Lighthouse

Supported OS Linux

Versión de la integración2.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 o posteriores, sigue las instrucciones a continuación para instalar el check de Lighthouse en tu host. Consulta el uso de integraciones de la comunidad para instalar con el Docker Agent o versiones anteriores del Agent.

  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 de forma similar a las [integraciones] centrales (https://docs.datadoghq.com/getting_started/integrations/).

Configuración

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

  2. Reinicia el Agent

Requisitos

  1. Node.js LTS (8.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 de estado del Agent y busca lighthouse en la sección Checks.

Datos recopilados

Métricas

lighthouse.accessibility
(gauge)		Puntuación de la accesibilidad de Google Chrome Lighthouse
Se muestra como porcentaje
lighthouse.best_practices
(gauge)		Puntuación de las prácticas recomendadas de Google Chrome Lighthouse
Se muestra como porcentaje
lighthouse.performance
(gauge)		Puntuación del rendimiento de Google Chrome Lighthouse
Se muestra como porcentaje
lighthouse.pwa
(gauge)		Puntuación de la aplicación web progresiva (PWA) de Google Chrome Lighthouse
Se muestra como porcentaje
lighthouse.seo
(gauge)		Puntuación de la optimización para motores de búsqueda (SEO) de Google Chrome Lighthouse
Se muestra como porcentaje
lighthouse.largest_contentful_paint
(gauge)		Largest Contentful Paint marca el momento en el que se pinta el texto o la imagen más grande.
Se muestra como milisegundo
lighthouse.first_contentful_paint
(gauge)		First Contentful Paint marca el momento en que se pinta el primer texto o imagen.
Se muestra como milisegundo
lighthouse.cumulative_layout_shift
(gauge)		Cumulative Layout Shift mide el movimiento de los elementos visibles dentro de la ventana gráfica.
Se muestra como unidad
lighthouse.max_potential_fid
(gauge)		El máximo retraso potencial en la primera entrada que podrían experimentar los usuarios es la duración de la tarea más larga.
Se muestra como milisegundo
lighthouse.time_to_interactive
(gauge)		El tiempo de interactividad es el tiempo que tarda la página en ser totalmente interactiva.
Se muestra como milisegundo
lighthouse.mainthread_work_breakdown
(gauge)		Considera la posibilidad de reducir el tiempo dedicado a analizar, compilar y ejecutar JS. Es posible que la entrega de cargas útiles JS más pequeñas te ayude a conseguirlo.
Se muestra como milisegundo
lighthouse.unused_javascript
(gauge)		Reduce el JavaScript no utilizado y aplaza la carga de scripts hasta que sean necesarios para disminuir los bytes consumidos por la actividad de red.
Se muestra como milisegundo
lighthouse.unused_css_rules
(gauge)		Reduce las reglas no utilizadas de las hojas de estilo y aplaza las hojas de estilo en cascada (CSS) que no se utilicen para el contenido por encima del pliegue para disminuir los bytes consumidos por la actividad de red.
Se muestra como milisegundo
lighthouse.modern_image_formats
(gauge)		Los formatos de imagen como WebP y AVIF suelen ofrecer una mejor compresión que PNG o JPEG, lo que se traduce en descargas más rápidas y un menor consumo de datos.
Se muestra como milisegundo
lighthouse.uses_optimized_images
(gauge)		Las imágenes optimizadas se cargan más rápido y consumen menos datos móviles.
Se muestra como milisegundo
lighthouse.render_blocking_resources
(gauge)		Los recursos están bloqueando la primera pintura de tu página. Considera entregar JS/CSS críticos en línea y diferir todos los JS/estilos no críticos.
Se muestra como milisegundo
lighthouse.bootup_time
(gauge)		Considera la posibilidad de reducir el tiempo dedicado a analizar, compilar y ejecutar JS. Es posible que la entrega de cargas útiles JS más pequeñas te ayude a conseguirlo.
Se muestra como milisegundo
lighthouse.server_response_time
(gauge)		Mantén reducido el tiempo de respuesta del servidor al documento principal porque todas las demás solicitudes dependen de él.
Se muestra como milisegundo
lighthouse.speed_index
(gauge)		Número de milisegundos que tarda en poblarse visiblemente el contenido de una página.
Se muestra como milisegundo
lighthouse.dom_size
(gauge)		Tamaño actual del DOM. Un DOM grande aumentará el uso de memoria, causará cálculos de estilo más largos y producirá costosos reflujos de diseño.
lighthouse.total_blocking_time
(gauge)		Suma de todos los periodos de tiempo entre FCP y Time to Interactive en los que la duración de la tarea superó los 50 ms expresada en milisegundos.
Se muestra como milisegundo

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.