Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more

Lighthouse

Lighthouse es una herramienta automatizada open-source, que busca mejorar la calidad de las páginas web. Podes correrla contra cualquier página web, sea pública o requiera autenticación. Cuenta con auditorías de performance, accesibilidad, progressive web apps, SEO y más.

Podes ejecutar Lighthouse en Chrome Devtools, desde la línea de comandos, o como un módulo de Node. Simplemente le das a Lighthouse una URL a auditar, correrá una serie de auditorías contra la página y luego generará un reporte sobre cuan buena fue la página. Desde allí, usa las auditorías que han fallado como indicadores sobre cómo improvisar la página. Cada auditoría tiene un doc de referencia explicando por qué la auditoría es importante, así como cómo arreglarla.

También puedes usar Lighthouse CI para prevenir regresiones en tu sitio.

Corre Lighthouse en Chrome DevTools Cargá un issue

Mirá el video a continuación de Google I/O 2019 para aprender más sobre cómo utilizar y contribuir a Lighthouse

Primeros Pasos

Elegí el flujo de Lighthouse que más te sirva:

Ejecutá Lighthouse en Chrome DevTools

Lighthouse potencia el panel Audits de Chrome Devtools. Para correr un reporte:

  1. Descargá Google Chrome para Desktop.
  2. En Google Chrome, ve a la URL que quieres auditar. Puedes auditar cualquier URL de la web.
  3. Abrí Chrome DevTools.
  4. Haz click en la pestaña Audits.

    El panel Audits de Chrome DevTools
    Figura 1. A la izquierda se encuentra el viewport de la página que será auditada. A la derecha se encuentra el panel Audits de Chrome Devtools, el cual ahora se encuentra impulsado por Lighthouse

  5. Haz click en Perform an audit. Devtools mostrará una lista de categorias de auditorías. Dejalas todas habilitadas.

  6. Haz click en Run audit. Luego de unos 30 a 60 segundos, Lighthouse te dará un reporte sobre la página.

    Un reporte de Lighthouse en Chrome DevTools
    Figura 2. Un reporte de Lighthouse en Chrome DevTools

Instalá y ejecutá la herramienta de línea de comando de Node

Para instalar el módulo de Node:

  1. Descargá Google Chrome para Desktop.
  2. Instalá la versión Long-Term Support actual de Node.
  3. Instalá Lighthouse. El flag -g lo instalará como un módulo global:

    npm install -g lighthouse
    

Para correr una auditoría:

lighthouse <url>

Para conocer todas las opciones:

lighthouse --help

Ejecutando el módulo de Node programáticamente

Lee Using programmatically para un ejemplo de Lighthouse corriendo programaticamente, como un módulo de Node.

Ejecutá Lighthouse como una Extensión de Chrome

Para instalar la extensión:

  1. Descarga Google Chrome para Desktop.

  2. Instala la Lighthouse Chrome Extension desde el Chrome Webstore.

Para correr una auditoría:

  1. En Chrome, dirígete a la página que deseas auditar.

  2. Hacé click en Lighthouse Lighthouse. Deberías verlo al lado de la barra de direcciones de Chrome. Sino, abrí el menu principal de Chrome y accedelo desde arriba del menú. Luego de hacer click, el menu de Lighthouse se desplegará

    La extension de Lighthouse
    Figura 3. El menú de Lighthouse

  3. Hacé click en Generar reporte. Lighthouse corre su auditoría contra la página actualmente activa, luego abrirá una una nueva pestaña con un reporte de los resultados.

    El reporte de Lighthouse
    Figura 4. Un reporte de Lighthouse

Ejecutá PageSpeed Insights

Para ejecutar Lighthouse en PageSpeed Insights:

  1. Navegá a PageSpeed Insights.
  2. Ingresá la URL de una página web.
  3. Hacé click en Analyze.

    La UI de PageSpeed Insights.
    Figura 5. La UI de PageSpeed Insights

Compartí y mirá reportes online

Usá Lighthouse Viewer para ver y compartir reportes online.

El Lighthouse Viewer.
Figura 6. El Lighthouse Viewer

Compartí reportes como JSON

Lighthouse Viewer necesita la salida en formato JSON de un reporte de Lighthouse. La siguiente lista explica cómo obtener la salida en formato JSON dependiendo de qué flujo de Lighthouse estés usando:

  • Chrome DevTools. Haz click en Download Report Download
Report.
  • Línea de comandos. Ejecutá:

    lighthouse --output json --output-path <path/for/output.json>

  • Lighthouse Viewer. Haz click en Export > Guardar como JSON.

Para ver los datos del reporte:

  1. Abrí Lighthouse Viewer en Google Chrome.
  2. Arrastrá el archivo JSON hasta el Viewer, o haz click en cualquier lugar del Viewer para abrir tu navegador de archivos y selecciona el archivo.

Compartí reportes como GitHub Gists

Si no querés estar pasando manualmente los archivos JSON, podes compartir tus reportes como Secret GitHub Gists. Un beneficio de utilizar Gists es que tendrás control de versión.

Para exportar un reporte como un Gist, desde el reporte:

  1. (Si ya te encuentras en Viewer saltea este paso) Haz click en Export > Open In Viewer. El reporte se abrirá en Viewer, ubicado en https://googlechrome.github.io/lighthouse/viewer/.
  2. En Viewer, haz click en Share Share. La primera vez que hagas esto, un popup pedirá permiso a tu información básica de GitHub, asó como permisos de lectura y escritura en tus Gists.

Para exportar un reporte como un Gist, desde la versión CLI de Lighthouse, simplemente crea manualmente un Gist y copy-pastea el reporte en formato JSON a tu Gist. El nombre del Gist debe terminar con .lighthouse.report.json. Lee Share reports as JSON para un ejemplo sobre cómo generar una salida JSON desde la línea de comandos.

Para ver un reporte que fue guardado como un Gist:

  • Agregá ?gist=<ID> a la URL de Viewer, donde <ID> es el ID del Gist.

    https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>

  • Abrí el Viewer, y pegá allí la URL del gist.

Extensibilidad de Lighthouse

Lighthouse apunta a proveer una guía que sea relevante y accionable para todos los desarrolladores web. Con este objetivo, hay dos funcionalidades actualmente disponibles que te permiten ajustar Lighthouse a tus necesidades específicas.

  • Stack Packs. Hoy en día muchos desarrolladores utilizan distintas tecnologías (backend/CMS/JavaScript frameworks) para construir sus páginas web. En vez de tan solo mostrar recomendaciones generales, Lighthouse ahora puede proveerte consejos más relevantes y accionables dependiendo de la tecnología usada.

Stack Packs le permite a Lighthouse detectar sobre qué tecnología se encuentra construido tu sitio y mostrar recomendaciones específicas basadas en tu stack/tecnología. Estas recomendaciones son definidas y curadas por expertos de la comunidad.

Para contribuir a Stack Pack, revisá el archivo de Contributing Guidelines.

  • Lighthouse Plugins. Los Plugins de Lighthouse permiten a los expertos de dominios de la comunidad, extender la funcionalidad de Lighthouse para sus necesidades específicas. Ahora podes potenciar los datos que Lighthouse recolecta para crear nuevas auditorías. En su núcleo, un plugin de Lighthouse es un módulo de Node que implementa una serie de comprobaciones que serán corridas por Lighthouse y sumadas al reporte como una nueva categoría.

Para más información sobre cómo crear tu propio plugin, lee el Plugin Handbook en el repositorio GitHub de Lighthouse.

Contribuir

Lighthouse es de código abierto y las contribuciones son bienvenidas. Consulta el rastreador de problemas del repositorio para buscar los errores que puedes corregir, o las auditorías que puedes crear o mejorar. El rastreador de problemas también es un buen lugar para debatir la métrica de auditoría, ideas para nuevas auditorías, o cualquier cosa relacionada con Lighthouse.