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:
- Descarga Google Chrome para computadoras.
- Abre Chrome y ve a la URL que quieres auditar. Puedes auditar cualquier URL en la Web.
- Abre las herramientas para desarrolladores de Chrome.
Haz clic en la pestaña Lighthouse.
A la izquierda, se encuentra el viewport de la página web que se auditará. A la derecha, se muestra el panel Lighthouse de las Herramientas para desarrolladores de Chrome. Haz clic en Analizar la carga de la página. DevTools muestra una lista de categorías de auditoría. Déjalos todos habilitados.
Haz clic en Ejecutar auditoría. Después de 30 a 60 segundos, Lighthouse te proporciona un informe sobre la página.
Un informe de Lighthouse en las Herramientas para desarrolladores de Chrome.
Instala y ejecuta la herramienta de línea de comandos de Node
Para instalar el módulo de Node, haz lo siguiente:
- Descarga Google Chrome para computadoras.
- Instala la versión actual de asistencia a largo plazo de Node.
- Instala Lighthouse. La marca
-glo 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:
- Ve a PageSpeed Insights.
- Ingresa la URL de una página web.
Haga clic en Analyze.
El sitio web de PageSpeed Insights.
Ejecuta Lighthouse como una extensión de Chrome
Para instalar la extensión, sigue estos pasos:
- Descarga Google Chrome para computadoras.
- Instala la extensión de Chrome de Lighthouse desde Chrome Web Store.
Para ejecutar una auditoría, sigue estos pasos:
- En Chrome, ve a la página que quieres auditar.
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.
La extensión te solicita que generes un informe. 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.
Un informe de Lighthouse generado a partir de la extensión.
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
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:
- Abre el Visor de Lighthouse.
- 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:
- Haz clic en el menú y, luego, en
Abrir en el visualizador. El informe se encuentra en https://googlechrome.github.io/lighthouse/viewer/. - En el visor, haz clic en el menú 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.