Introducción a Lighthouse

Lighthouse es una herramienta automatizada de código abierto que te ayuda a mejorar la calidad de las páginas web. Puedes ejecutarla en cualquier página web, ya sea pública o que requiera autenticación. Realiza auditorías de rendimiento, accesibilidad, apps web progresivas, SEO y mucho más.

Puedes ejecutar Lighthouse en Chrome DevTools, desde la línea de comandos o como un módulo de Node. Otorga a Lighthouse una URL para auditar, ejecuta una serie de auditorías en la página y genera un informe sobre el rendimiento de la página. Usa las auditorías que no se completaron como indicadores para mejorar la página. Cada auditoría tiene una referencia que explica por qué es importante, así como cómo corregirla.

También puedes usar Lighthouse CI para evitar regresiones en tus sitios.

Comenzar

Elige el flujo de trabajo de Lighthouse que mejor te convenga:

• En las Herramientas para desarrolladores de Chrome. Audita las páginas que requieren autenticación y lee tus informes en un formato fácil de usar, directamente desde el navegador.
• Desde la línea de comandos. Automatizar las ejecuciones de Lighthouse con secuencias de comandos de shell.
• Como un módulo de Node. Integra Lighthouse en tus sistemas de integración continua.
• Desde una IU web Ejecuta Lighthouse y vincula los informes, sin necesidad de instalarlo.

Ejecuta Lighthouse en las Herramientas para desarrolladores de Chrome

Lighthouse tiene su propio panel en las Herramientas para desarrolladores de Chrome. Para ejecutar un informe, siga estos pasos:

1. Descarga Google Chrome para computadoras.
2. Abre Chrome y ve a la URL que quieres auditar. Puedes auditar cualquier URL en la Web.
3. Abre las herramientas para desarrolladores de Chrome.

4. Haz clic en la pestaña Lighthouse.

   

5. Haz clic en Analizar la carga de la página. DevTools muestra una lista de categorías de auditoría. Déjalos todos habilitados.

6. Haz clic en Ejecutar auditoría. Después de 30 a 60 segundos, Lighthouse te proporciona un informe sobre la página.

   

Instala y ejecuta la herramienta de línea de comandos de Node

Para instalar el módulo de Node, haz lo siguiente:

1. Descarga Google Chrome para computadoras.
2. Instala la versión actual de asistencia a largo plazo de Node.
3. Instala Lighthouse. La marca -g lo instala como un módulo global.

npm install -g lighthouse

Para ejecutar una auditoría, sigue estos pasos:

lighthouse <url>

Para ver todas las opciones, haz lo siguiente:

lighthouse --help

Ejecuta el módulo Node de forma programática

Consulta Cómo usar Lighthouse de forma programática para ver un ejemplo de cómo ejecutar Lighthouse de forma programática, como un módulo de Node.

Ejecuta PageSpeed Insights

Para ejecutar Lighthouse en PageSpeed Insights, haz lo siguiente:

1. Ve a PageSpeed Insights.
2. Ingresa la URL de una página web.

3. Haga clic en Analyze.

   

Ejecuta Lighthouse como una extensión de Chrome

Para instalar la extensión, sigue estos pasos:

1. Descarga Google Chrome para computadoras.
2. Instala la extensión de Chrome de Lighthouse desde Chrome Web Store.

Para ejecutar una auditoría, sigue estos pasos:

1. En Chrome, ve a la página que quieres auditar.

2. Haz clic en Lighthouse, junto a la barra de direcciones de Chrome o en el menú de extensiones de Chrome. Una vez que hagas clic, se expandirá el menú de Lighthouse.

   

3. Haz clic en Generar informe. Lighthouse ejecuta sus auditorías en la página enfocada actualmente y, luego, abre una pestaña nueva con un informe de los resultados.

   

Cómo compartir y ver informes en línea

Usa el Visor de Lighthouse para ver y compartir informes en línea.

Comparte informes en formato JSON

El visor de Lighthouse necesita el resultado JSON de un informe de Lighthouse. Genera los resultados JSON de la siguiente manera:

• Desde un informe de Lighthouse. Haz clic en more_vert para acceder al menú y, luego, haz clic en Guardar como JSON.
• Línea de comandos. Ejecutar: shell lighthouse --output json --output-path <path/for/output.json>

Para ver los datos del informe, sigue estos pasos:

1. Abre el Visor de Lighthouse.
2. Arrastra el archivo JSON al visor o haz clic en cualquier lugar del visor para abrir el navegador de archivos y seleccionar el archivo.

Cómo compartir informes como Gists de GitHub

Si no quieres pasar archivos JSON de forma manual, también puedes compartir tus informes como Gist secretos de GitHub. Uno de los beneficios de gists es el control de versiones gratuito.

Para exportar un informe como un resumen, sigue estos pasos:

1. Haz clic en el menú more_vert y, luego, en Abrir en el visualizador. El informe se encuentra en https://googlechrome.github.io/lighthouse/viewer/.
2. En el visor, haz clic en el menú more_vert y, luego, en Guardar como Gist. La primera vez que lo hagas, aparecerá una ventana emergente que te pedirá permiso para acceder a tus datos básicos de GitHub y para leer y escribir en tus Gist.

Para exportar un informe como un gist desde la versión de CLI de Lighthouse, crea un gist de forma manual y copia y pega el resultado JSON del informe en el gist. El nombre del archivo gist que contiene el resultado JSON debe terminar en .lighthouse.report.json. Consulta Cómo compartir informes como JSON para ver un ejemplo de cómo generar un resultado JSON desde la herramienta de línea de comandos.

Para ver un informe que se guardó como resumen, sigue estos pasos:

• Agrega ?gist=<ID> a la URL del visor, en la que <ID> es el ID del gist. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Abre el Visor y pega la URL de un resumen en él.

Extensibilidad de Lighthouse

El objetivo de Lighthouse es proporcionar orientación relevante y práctica para todos los desarrolladores web. Para ello, hay dos funciones disponibles que te permiten adaptar Lighthouse a tus necesidades específicas.

Paquetes de pila

Los desarrolladores usan muchas tecnologías diferentes (backend, sistemas de administración de contenido y frameworks de JavaScript) para compilar sus páginas web. En lugar de mostrar recomendaciones generales, Lighthouse proporciona consejos relevantes y prácticos, según las herramientas que se usan.

Los paquetes de pila permiten que Lighthouse detecte en qué plataforma se compiló tu sitio y muestre recomendaciones específicas basadas en la pila. Estas recomendaciones las definen y seleccionan expertos de la comunidad.

Para contribuir con un paquete de pila, consulta los Lineamientos de contribución.

Complementos de Lighthouse

Los complementos de Lighthouse permiten a los expertos en dominios extender la funcionalidad de Lighthouse para las necesidades específicas de su comunidad. Puedes aprovechar los datos que recopila Lighthouse para crear auditorías nuevas. En esencia, un plugin de Lighthouse es un módulo de nodo que implementa un conjunto de verificaciones que Lighthouse ejecutará y agregará al informe como una categoría nueva.

Para obtener más información sobre cómo crear tu propio complemento, consulta nuestro Manual de complementos en el repositorio de GitHub de Lighthouse.

Cómo integrar Lighthouse

Si eres una empresa o una persona que integra Lighthouse como parte de los productos o servicios que ofreces, me da mucho gusto. Queremos que la mayor cantidad posible de personas use Lighthouse.

Consulta los Lineamientos y recursos de marca para integrar Lighthouse para mostrar que se usa Lighthouse y, al mismo tiempo, proteger nuestra marca.

Contribuye a Lighthouse

Lighthouse es de código abierto y se aceptan contribuciones. Consulta el seguimiento de problemas del repositorio para encontrar errores que puedas corregir o auditorías que puedas crear o mejorar. Los problemas son un buen lugar para analizar las métricas de rendimiento, las ideas para auditorías nuevas o cualquier otra cosa relacionada con Lighthouse.