lighthouse
v12.2.2
Lighthouse analiza aplicaciones y páginas web y recopila métricas de rendimiento modernas e información sobre las mejores prácticas de los desarrolladores.
Lighthouse está integrado directamente en Chrome DevTools, en el panel "Lighthouse".
Instalación : instale Chrome.
Ejecútelo : abra Chrome DevTools, seleccione el panel Lighthouse y presione "Generar informe".
La extensión de Chrome estaba disponible antes de que Lighthouse estuviera disponible en Chrome Developer Tools y ofrece una funcionalidad similar.
Instalación : instale la extensión desde Chrome Web Store.
Ejecútelo : siga la guía de inicio rápido de la extensión.
La CLI de Node proporciona la mayor flexibilidad en cuanto a cómo se pueden configurar e informar las ejecuciones de Lighthouse. Los usuarios que quieran un uso más avanzado o quieran ejecutar Lighthouse de forma automatizada deben utilizar la CLI de Node.
Nota Lighthouse requiere el Nodo 18 LTS (18.x) o posterior.
Instalación :
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse Ejecútelo : lighthouse https://airhorner.com/
De forma predeterminada, Lighthouse escribe el informe en un archivo HTML. Puede controlar el formato de salida pasando banderas.
$ lighthouse --help
lighthouse <url> <options>
Logging:
--verbose Displays verbose logging [boolean] [default: false]
--quiet Displays no progress, debug logs, or errors [boolean] [default: false]
Configuration:
--save-assets Save the trace contents & devtools logs to disk [boolean] [default: false]
--list-all-audits Prints a list of all available audits and exits [boolean] [default: false]
--list-trace-categories Prints a list of all required trace categories and exits [boolean] [default: false]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string]
--config-path The path to the config JSON.
An example config file: core/config/lr-desktop-config.js [string]
--preset Use a built-in configuration.
WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"]
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""]
--port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0]
--hostname The hostname to use for the debugging protocol. [string] [default: "localhost"]
--form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"]
--screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
--emulatedUserAgent Sets useragent emulation [string]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md [boolean]
--gather-mode, -G Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
--audit-mode, -A Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
--only-audits Only run the specified audits [array]
--only-categories Only run the specified categories. Available categories: accessibility, best-practices, performance, seo [array]
--skip-audits Run everything except these audits [array]
--disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large [boolean]
Output:
--output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
Example: --output-path=./lighthouse-results.html [string]
--view Open HTML report in your browser [boolean] [default: false]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--cli-flags-path The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
--locale The locale/language the report should be formatted in
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--throttling-method Controls throttling method [string] [choices: "devtools", "provided", "simulate"]
--throttling
--throttling.rttMs Controls simulated network RTT (TCP layer)
--throttling.throughputKbps Controls simulated network download throughput
--throttling.requestLatencyMs Controls emulated network RTT (HTTP layer)
--throttling.downloadThroughputKbps Controls emulated network download throughput
--throttling.uploadThroughputKbps Controls emulated network upload throughput
--throttling.cpuSlowdownMultiplier Controls simulated + emulated CPU throttling
--extra-headers Set extra HTTP Headers to pass with request
--precomputed-lantern-data-path Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency. [string]
--lantern-data-output-path Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag. [string]
--plugins Run the specified plugins [array]
--channel [string] [default: "cli"]
--chrome-ignore-default-flags [boolean] [default: false]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent Disable device emulation and all throttling
lighthouse <url> --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{"Cookie":"monster=blue", "x-men":"wolverine"}" Stringify'd JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
lighthouse <url> --only-categories=performance,seo Only run the specified categories. Available categories: accessibility, best-practices, performance, seo
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path= ~ /mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json` Puede ejecutar un subconjunto del ciclo de vida de Lighthouse si lo desea a través de los indicadores CLI --gather-mode ( -G ) y --audit-mode ( -A ).
lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits
lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report
lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.
# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.comLa primera vez que ejecute la CLI, aparecerá un mensaje que le preguntará si Lighthouse puede informar de forma anónima excepciones de tiempo de ejecución. El equipo de Lighthouse utiliza esta información para detectar nuevos errores y evitar regresiones. La exclusión voluntaria no afectará su capacidad para utilizar Lighthouse de ninguna manera. Obtenga más información.
También puede utilizar Lighthouse mediante programación con el módulo Node.
Lea Uso de Lighthouse mediante programación para obtener ayuda para comenzar.
Lea Configuración de Lighthouse para obtener más información sobre las opciones de configuración disponibles.
Lighthouse puede generar un informe como JSON o HTML.
Informe HTML:
La ejecución de Lighthouse con el indicador --output=json genera un volcado JSON de la ejecución. Puede ver este informe en línea visitando https://googlechrome.github.io/lighthouse/viewer/ y arrastrando el archivo a la aplicación. También puede utilizar el botón "Exportar" en la parte superior de cualquier informe HTML de Lighthouse y abrir el informe en Lighthouse Viewer.
En el Visor, los informes se pueden compartir haciendo clic en el ícono de compartir en la esquina superior derecha e iniciando sesión en GitHub.
Nota : los informes compartidos se guardan como un Gist secreto en GitHub, en su cuenta.
Documentación útil, ejemplos y recetas para empezar.
Documentos
Recetas
Vídeos
La sesión de Google I/O 2018 cubre el nuevo motor de rendimiento, la próxima API REST de Lighthouse y el uso del informe Chrome UX para evaluar datos de usuarios reales.
La sesión de Google I/O 2017 cubre arquitectura, redacción de auditorías personalizadas, integración de GitHub/Travis/CI, Chrome sin cabeza y más:
Haz clic en la imagen para ver el vídeo en YouTube.
Siga leyendo para conocer los conceptos básicos de piratería en Lighthouse. Además, consulte Contribuir para obtener información detallada.
# yarn should be installed first
git clone https://github.com/GoogleChrome/lighthouse
cd lighthouse
yarn
yarn build-allnode cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to ChromeConsejo para comenzar :
node --inspect-brk cli http://example.compara abrir Chrome DevTools y recorrer toda la aplicación. Consulte Depuración de Node.js con Chrome DevTools para obtener más información.
# lint and test all files
yarn test
# run all unit tests
yarn unit
# run a given unit test (e.g. core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js)
yarn mocha uses-long-cache-ttl
# watch for file changes and run tests
# Requires http://entrproject.org : brew install entr
yarn watch
# # run linting, unit, and smoke tests separately
yarn lint
yarn unit
yarn smoke
# # run tsc compiler
yarn type-check Algunos de nuestros documentos tienen pruebas que se ejecutan solo en CI de forma predeterminada. Para modificar nuestra documentación, deberá ejecutar yarn build-pack && yarn test-docs localmente para asegurarse de que se aprueben.
Dependencias adicionales
brew install jqEsta sección detalla los servicios que tienen datos integrados de Lighthouse. Si está trabajando en un proyecto interesante que integra Lighthouse y le gustaría aparecer aquí, presente un problema en este repositorio o envíenos un tweet a @_____lighthouse.
Prueba de página web : una herramienta de código abierto para medir y analizar el rendimiento de páginas web en dispositivos reales. Los usuarios pueden optar por producir un informe Lighthouse junto con el análisis de los resultados de WebPageTest.
HTTPArchive : HTTPArchive rastrea cómo se construye la web rastreando 500.000 páginas con Web Page Test, incluidos los resultados de Lighthouse, y almacena la información en BigQuery, donde está disponible públicamente.
Calibre : Calibre es una plataforma integral de monitoreo del rendimiento que se ejecuta en Lighthouse. Vea el impacto en el rendimiento de su trabajo antes de que llegue a producción con GitHub Pull Request Reviews. Realice un seguimiento del impacto de los scripts de terceros. Automatice su sistema de rendimiento con una API Node.js exclusiva para desarrolladores. Pruebe Calibre con una prueba gratuita de 15 días.
DebugBear : DebugBear es una herramienta de monitoreo de sitios web basada en Lighthouse. Vea cómo sus puntuaciones y métricas cambiaron con el tiempo, centrándose en comprender qué causó cada cambio. DebugBear es un producto pago con una prueba gratuita de 30 días.
Treo : Treo es Lighthouse como servicio. Proporciona pruebas de regresión, regiones geográficas, redes personalizadas e integraciones con GitHub y Slack. Treo es un producto pago con planes para desarrolladores individuales y equipos.
PageVitals : PageVitals combina Lighthouse, CrUX y pruebas de campo para monitorear el rendimiento de los sitios web. Vea el rendimiento de su sitio web a lo largo del tiempo y reciba alertas si se vuelve demasiado lento. Profundice y encuentre la causa real de cualquier problema de rendimiento. PageVitals es un producto pago con una prueba gratuita de 14 días.
Screpy : Screpy es una herramienta de análisis web que puede analizar todas las páginas de sus sitios web en un solo panel y monitorearlas con su equipo. Está impulsado por Lighthouse y también incluye algunas herramientas de análisis diferentes (SERP, W3C, Uptime, etc.). Screpy tiene planes gratuitos y de pago.
Siteimprove Performance : Siteimprove Performance es una solución de monitoreo del rendimiento web que permite a un especialista en marketing, gerente o tomador de decisiones comprender y optimizar los tiempos de carga del sitio web. Obtenga información fácil de usar centrándose en resultados rápidos e impactantes. Siteimprove Performance es un producto pago con una prueba gratuita de 14 días.
SpeedCurve : SpeedCurve es una herramienta para monitorear continuamente el rendimiento web en diferentes navegadores, dispositivos y regiones. Puede agregar cualquier métrica, incluidas las puntuaciones de Lighthouse, en varias páginas y sitios, y le permite establecer presupuestos de rendimiento con Slack o alertas por correo electrónico. SpeedCurve es un producto pago con una prueba gratuita de 30 días.
Foo : Lighthouse-as-a-service que ofrece planes premium y gratuitos. Proporciona monitoreo e informes históricos de las auditorías de Lighthouse con CircleCI, GitHub y otras integraciones. Las características incluyen notificaciones de Slack, informes de comentarios de relaciones públicas y más.
Apdex : Apdex es un servicio de rendimiento de sitios web. Las características principales son visualizaciones históricas de informes de Lighthouse, opciones móviles/de escritorio, alertas, monitoreo del tiempo de actividad y más. Hay planes pagos flexibles y una prueba gratuita de 30 días.
Websu : Websu es un proyecto de código abierto para proporcionar Lighthouse-as-a-Service a través de una sencilla API REST HTTP. Las características principales son la capacidad de alojar e implementar en su propio entorno y resúmenes de informes históricos de Lighthouse.
DTEKT.IO : DTEKT es un servicio de supervisión del rendimiento y del tiempo de actividad de un sitio web. Utiliza Lighthouse para brindar visibilidad del rendimiento de los sitios web desde múltiples ubicaciones en múltiples dispositivos. Ofrece tres meses de prueba gratuita y planes pagos.
SpeedVitals : SpeedVitals es una herramienta impulsada por Lighthouse para medir el rendimiento web en múltiples dispositivos y ubicaciones. Tiene varias características como visualización de cambios de diseño, gráfico en cascada, datos de campo y gráficos de recursos. SpeedVitals ofrece planes gratuitos y de pago.
Lighthouse Metrics : Lighthouse Metrics le brinda información sobre el rendimiento global con una sola prueba. También puede monitorear sus sitios web diariamente o cada hora. Lighthouse Metrics ofrece pruebas únicas globales gratuitas y monitoreo del rendimiento como función paga con una prueba gratuita de 14 días.
Auditzy : Auditzy™ es una sólida herramienta de auditoría y monitoreo de sitios web que le permite analizar el recorrido previo al uso de sus páginas web. Analice la métrica de salud de la competencia, los elementos básicos de la web y la tecnología. Compare sus páginas web con las de sus competidores para comprender dónde se encuentra a la cabeza o a la zaga. Notificación en tiempo real con Slack. Tenga una colaboración perfecta con varios equipos. Automatiza tus Auditorías horarias, diarias, semanales, etc. Tiene una prueba gratuita con planes de pago por uso.
Lighthouse Metrics China : la primera herramienta de métricas de Lighthouse diseñada específicamente para China. Experimente capacidades incomparables de monitoreo de sitios web con Lighthouse. Obtenga información sobre las fluctuaciones de sus puntuaciones y métricas dentro del ámbito del Gran Cortafuegos de China, lo que permitirá una comprensión integral de los factores que influyen en cada cambio. Lighthouse Metrics China ofrece planes gratuitos y de pago.
DeploymentHawk : DeploymentHawk es una herramienta automatizada de auditoría de sitios impulsada por Lighthouse. Detecte sin esfuerzo los problemas de rendimiento, accesibilidad y SEO antes de que afecten a sus usuarios. DeploymentHawk es un producto pago con una prueba gratuita de 7 días.
Guardius : Guardius es una plataforma SaaS DevOps y DevSecOps que integra Lighthouse para ofrecer análisis automatizados del rendimiento web. No solo proporciona evaluación de métricas y escaneo automático, sino que también permite comparaciones de desempeño en diferentes períodos y observación continua a lo largo del tiempo. Además, Guardius ofrece alertas predefinidas y personalizadas adaptadas a sus requisitos específicos. Hay una versión gratuita de Guardius disponible para que los usuarios exploren sus funciones.
PageWatch : PageWatch es una herramienta para encontrar páginas problemáticas en su sitio web. Proporciona información sobre errores ortográficos, problemas de diseño, páginas lentas (con tecnología de Lighthouse) y más. PageWatch se ofrece a través de planes gratuitos y de pago.
Fluxguard : Fluxguard proporciona monitoreo de cambios DOM del sitio web orquestado con Google Puppeteer y auditado por Lighthouse. Fluxguard es un producto freemium, con seguimiento mensual de hasta 75 páginas de forma gratuita.
Microlink : Microlink es un navegador en la nube como API. Ofrece informes Lighthouse a pedido, lo que facilita la creación de cualquier servicio adicional. Una funcionalidad similar está disponible a través del proyecto subyacente de código abierto llamado browserless.
Wattspeed : Wattspeed es una herramienta gratuita que genera instantáneas: capturas históricas de sus páginas web que incluyen puntuaciones de Lighthouse, una lista de tecnologías, resultados del validador HTML del W3C, tamaño DOM, información de contenido mixto y más.
lighthouse-plugin-field-rendimiento : un complemento que agrega métricas de rendimiento del usuario real para la URL utilizando los datos del Informe UX de Chrome.
lighthouse-plugin-publisher-ads : una herramienta para mejorar la velocidad de los anuncios y la calidad general a través de una serie de auditorías automatizadas. Por el momento, esto está dirigido principalmente a sitios que utilizan Google Ad Manager. Esta herramienta ayudará a resolver los problemas descubiertos, proporcionando una herramienta que se utilizará para evaluar la efectividad de los cambios iterativos y al mismo tiempo sugerirá comentarios procesables.
lighthouse-plugin-crux : un complemento que recopila rápidamente datos de métricas de usuarios reales de la API Chrome UX Report.
Otros proyectos increíbles de código abierto que utilizan Lighthouse.
Ver Arquitectura del faro.
Lighthouse informa las métricas de rendimiento tal como las experimentaría un usuario móvil típico con una conexión 4G y un teléfono de nivel medio de ~$200. Incluso si se carga rápidamente en su dispositivo y red, los usuarios de otros entornos experimentarán el sitio de manera muy diferente.
Lea más en nuestra guía sobre aceleración.
Las puntuaciones de rendimiento de Lighthouse cambiarán debido a la variabilidad inherente en las tecnologías web y de red, incluso si no ha habido un cambio de código. Pruebe en entornos consistentes, ejecute Lighthouse varias veces y tenga cuidado con la variabilidad antes de sacar conclusiones sobre un cambio que afecte el rendimiento.
Lea más en nuestra guía para reducir la variabilidad.
¡Sí! Detalles en configuración del faro.
Buena pregunta. La limitación de red y CPU se aplica de forma predeterminada en una ejecución de Lighthouse. La red intenta emular la conectividad 4G lenta y la CPU se ralentiza 4 veces con respecto a la velocidad predeterminada de su máquina. Si prefiere ejecutar Lighthouse sin aceleración, deberá usar la CLI y deshabilitarla con las opciones --throttling.* mencionadas anteriormente.
Lea más en nuestra guía sobre limitación de red.
No. Lighthouse se ejecuta localmente y audita una página utilizando una versión local del navegador Chrome instalado en la máquina. Los resultados del informe nunca se procesan ni se envían a un servidor remoto.
A partir de Lighthouse 8.0, Lighthouse depende completamente del soporte Intl nativo y ya no utiliza un polirelleno Intl . Si está utilizando Node 14 o posterior, no debería haber ningún problema porque Node ahora está construido con full-icu de forma predeterminada.
Sin embargo, si está utilizando una compilación de nodo small-icu , es posible que vea mensajes de registro de Lighthouse indicando que su ubicación no está disponible. Para remediar esto, puede instalar manualmente los datos de ICU utilizando el módulo full-icu y el indicador de nodo --icu-data-dir en el inicio.
Consejo : consulte Lighthouse Architecture para obtener más información sobre terminología y arquitectura.
Lighthouse se puede ampliar para ejecutar auditorías personalizadas y recopiladores que usted cree. Esto es excelente si ya está realizando un seguimiento de las métricas de rendimiento en su sitio y desea mostrar esas métricas en un informe Lighthouse.
Si está interesado en ejecutar sus propias auditorías personalizadas, consulte nuestro Ejemplo de auditoría personalizada en las recetas.
¡Nos encantaría ayudarnos a redactar auditorías, corregir errores y hacer que la herramienta sea más útil! Consulte Contribuir para comenzar.
Faro , ˈlītˌhous (n): torre u otra herramienta estructural que contiene un faro luminoso para advertir o guiar a los barcos en el mar .
