Lighthouse

Supported OS Linux

Integration version2.2.0

Información general

Obtén métricas de Google Chrome Lighthouse en tiempo real para:

  • Visualizar y monitorizar estadísticas de Lighthouse.
  • Realizar un seguimiento y auditar las puntuaciones de accesibilidad de tus sitios web, las prácticas recomendadas, el rendimiento, las PWA y las puntuaciones de auditorías SEO.

Configuración

El check de Lighthouse no está incluido en el paquete del Datadog Agent, por lo que necesitas instalarlo.

Instalación

Para el Agent v7.21/v6.21 y posteriores, sigue las siguientes instrucciones para instalar el check de Lighthouse en tu host. Para realizar la instalación con el Docker Agent o versiones anteriores del Agent, consulta el uso de integraciones de la comunidad.

  1. Ejecuta el siguiente comando para instalar la integración del Agent:

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

  2. Configura tu integración como si fuese una integración de base.

Configuración

  1. Edita el archivo lighthouse.d/conf.yaml, en la carpeta conf.d/ de la raíz del directorio de configuración de tu Agent para comenzar a recopilar tus métricas Lighthouse. Para ver todas las opciones de configuración disponibles, consulta el ejemplo lighthouse.d/conf.yaml.

  2. Reinicia el Agent.

Requisitos

  1. Node.js LTS (v8.9 o posterior).

    • Verifica si Node.js y npm están instalados:
    node -v
npm -v

  2. Lighthouse:

    • Verifica si está instalado.
    # example
root@hostname:~# npm list -g --depth=0 | grep 'lighthouse'
|_ lighthouse@5.6.0
    • Si no lo está, instálalo (no hay resultado del comando anterior):
    npm install -g lighthouse

  3. Google Chrome/Chromium o 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

      Nota: Esta integración ejecuta Chrome/Chromium en modo headless. Chrome/Chromium puede requerir kernel 4.4 o posterior en RHEL/CentOS para que el modo headless funcione correctamente.

    • Puppeteer

      • Verifica si está instalado.
      # example
root@hostname:~# npm list -g --depth=0 | grep 'puppeteer'
|_ puppeteer@1.12.2
      • Si no lo está, instálalo (no hay resultado del comando anterior):
      npm install -g puppeteer --unsafe-perm=true

  4. Verifica si el usuario dd-agent puede ejecutar la CLI de Lighthouse.

    sudo -u dd-agent lighthouse <WEB_URL> --output json --quiet --chrome-flags='--headless'

Validación

Ejecuta el subcomando status del Agent y busca lighthouse en la sección Checks.

Datos recopilados

Métricas

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

Eventos

La integración de Lighthouse no incluye eventos.

Checks de servicio

La integración de Lighthouse no incluye checks de servicios.

Solucionar problemas

¿Necesitas ayuda? Ponte en contacto con el servicio de asistencia de Datadog.