Lighthouse

Docs > Intégrations > Lighthouse

Supported OS Linux

Intégration2.1.0

Présentation

Recueillez les métriques de Google Chrome Lighthouse en temps réel pour :

Visualiser et surveiller les états de Lighthouse
Mesurer et auditer les scores de vos sites Web en matière d’accessibilité, de meilleures pratiques, de performances, d’adaptabilité et de SEO

Configuration

Le check Lighthouse n’est pas inclus avec le package de l’Agent Datadog : vous devez donc l’installer.

Installation

Pour l’Agent v7.21+/6.21+, suivez les instructions ci-dessous afin d’installer le check Lighthouse sur votre host. Consultez la section Utiliser les intégrations de la communauté pour effectuer une installation avec l’Agent Docker ou avec des versions antérieures de l’Agent.

Exécutez la commande suivante pour installer l’intégration de l’Agent :

datadog-agent integration install -t datadog-lighthouse==<INTEGRATION_VERSION>

Configurez votre intégration comme une intégration de base.

Configuration

Modifiez le fichier lighthouse.d/conf.yaml dans le dossier conf.d/ à la racine du répertoire de configuration de votre Agent pour commencer à recueillir vos métriques Lighthouse. Consultez le fichier d’exemple lighthouse.d/conf.yam pour découvrir toutes les options de configuration disponibles.
Redémarrez l’Agent.

Prérequis

Node.js LTS (8.9 ou ultérieur) :
- Vérifiez que Node.js et npm sont installés :
```
node -v
npm -v
```
- Si ce n’est pas le cas, installez-les.
Lighthouse :
- Vérifiez que Lighthouse est installé.
```
# example
root@hostname:~# npm list -g --depth=0 | grep 'lighthouse'
|_ lighthouse@5.6.0
```
- Si ce n’est pas le cas (la commande ci-dessus ne génère aucun résultat), installez-le :
```
npm install -g lighthouse
```
Google Chrome/Chromium ou Puppeteer :
- Chromium
  - Debian/Ubuntu
```
sudo apt-get update
sudo apt-get install -y chromium-browser
```
  - RHEL/CentOS
```
sudo yum install -y epel-release
sudo yum install -y chromium
```
  Remarque : cette intégration exécute Chrome/Chromium en mode headless. Il se peut que Chrome/Chromium requière un kernel 4.4 ou ultérieur sur RHEL/CentOS pour que le mode headless fonctionne correctement.
- Puppeteer
  - Vérifiez que Puppeteer est installé.
```
# example
root@hostname:~# npm list -g --depth=0 | grep 'puppeteer'
|_ puppeteer@1.12.2
```
  - Si ce n’est pas le cas (la commande ci-dessus ne génère aucun résultat), installez-le :
```
npm install -g puppeteer --unsafe-perm=true
```
Vérifiez que l’utilisateur dd-agent peut exécuter l’interface de ligne de commande Lighthouse.
```
sudo -u dd-agent lighthouse <WEB_URL> --output json --quiet --chrome-flags='--headless'
```

Validation

Lancez la sous-commande status de l’Agent et cherchez lighthouse dans la section Checks.

Données collectées

Métriques

lighthouse.accessibility (gauge)	The google chrome lighthouse score for accessibility Shown as percent
lighthouse.best_practices (gauge)	The google chrome lighthouse score for best_practices Shown as percent
lighthouse.performance (gauge)	The google chrome lighthouse score for performance Shown as percent
lighthouse.pwa (gauge)	The google chrome lighthouse score for pwa Shown as percent
lighthouse.seo (gauge)	The google chrome lighthouse score for seo Shown as percent
lighthouse.largest_contentful_paint (gauge)	Largest Contentful Paint marks the time at which the largest text or image is painted. Shown as millisecond
lighthouse.first_contentful_paint (gauge)	First Contentful Paint marks the time at which the first text or image is painted. Shown as millisecond
lighthouse.cumulative_layout_shift (gauge)	Cumulative Layout Shift measures the movement of visible elements within the viewport. Shown as unit
lighthouse.max_potential_fid (gauge)	The maximum potential First Input Delay that your users could experience is the duration of the longest task. Shown as millisecond
lighthouse.time_to_interactive (gauge)	Time to interactive is the amount of time it takes for the page to become fully interactive. Shown as millisecond
lighthouse.mainthread_work_breakdown (gauge)	Consider reducing the time spent parsing compiling and executing JS. You may find delivering smaller JS payloads helps with this. Shown as millisecond
lighthouse.unused_javascript (gauge)	Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Shown as millisecond
lighthouse.unused_css_rules (gauge)	Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Shown as millisecond
lighthouse.modern_image_formats (gauge)	Image formats like WebP and AVIF often provide better compression than PNG or JPEG which means faster downloads and less data consumption. Shown as millisecond
lighthouse.uses_optimized_images (gauge)	Optimized images load faster and consume less cellular data. Shown as millisecond
lighthouse.render_blocking_resources (gauge)	Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Shown as millisecond
lighthouse.bootup_time (gauge)	Consider reducing the time spent parsing compiling and executing JS. You may find delivering smaller JS payloads helps with this. Shown as millisecond
lighthouse.server_response_time (gauge)	Keep the server response time for the main document short because all other requests depend on it. Shown as millisecond
lighthouse.speed_index (gauge)	The number of milliseconds it takes for the contents of a page to be visibly populated. Shown as millisecond
lighthouse.dom_size (gauge)	The current size of the DOM. A large DOM will increase memory usage cause longer style calculations and produce costly layout reflows.
lighthouse.total_blocking_time (gauge)	Sum of all time periods between FCP and Time to Interactive when task length exceeded 50ms expressed in milliseconds. Shown as millisecond

Événements

L’intégration Lighthouse n’inclut aucun événement.

Checks de service

L’intégration Lighthouse n’inclut aucun check de service.

Dépannage

Besoin d’aide ? Contactez l’assistance Datadog.