Lighthouse es un proyecto de código abierto de Google que le brinda una forma de medir el rendimiento de la página web. Tiene ajustes configurables para reproducir varias condiciones. Puede configurar la red y el tipo de dispositivo para simular, por ejemplo.

Le da a Lighthouse una URL para auditar, ejecuta una serie de auditorías contra la página y luego genera un informe sobre qué tan bien funcionó la página. A partir de ahí, utilice las auditorías fallidas como indicadores sobre cómo mejorar la página. Cada auditoría tiene un documento de referencia que explica por qué la auditoría es importante y cómo solucionarla.

Hay muchas razones por las que querrías medir el rendimiento, pero una de las más importantes es sobre el impacto en el SEO. Entro en más detalles sobre esto y cómo abordar ciertas métricas en este Tutorial.

Running Lighthouse con Chrome DevTools

Puede ejecutar auditorías de rendimiento manualmente con la extensión del navegador Chrome DevTools. Simplemente inicie la extensión desde la página web que desea probar y seleccione el panel "Auditorías".
Entre una variedad de auditorías, puede elegir "rendimiento". También puede elegir simular el tipo de dispositivo y la limitación de la red. Se puede encontrar información específica sobre la limitación en el repositorio Github del proyecto Lighthouse.

Haga clic en "Run audits - Ejecutar auditorías" a continuación. Al finalizar, Lighthouse proporciona un informe dentro de la IU de extensión.


Este informe es una descripción general de métricas importantes, oportunidades y puntaje de rendimiento general. Las miniaturas ilustran el ciclo de vida de la carga de la página. Qué significa todo esto? Google proporciona una gran cantidad de documentación que describe cada métrica , cómo abordarlas y el puntaje general de rendimiento .

En el lado superior izquierdo del panel Chrome DevTools hay un icono de descarga que puede usar para descargar el informe completo en formato JSON. Luego puede usarlo para crear un informe en PDF a través de Lighthouse Report Viewer.

Debido al alto volumen de factores que influyen en el ciclo de vida de la carga de la página, es importante comparar los resultados en lotes. Tomar un promedio de 5 carreras, por ejemplo, proporcionará una mejor visión.

Ejecutando Lighthouse con una extensiones de Chrome

Para poder hacer la prueba con esta extensión, primero lógicamente necesitamos instalarla en nuestro navegador, para ello vamos:

1 - Instalar la extensión de Chrome de Lighthouse.
2 - Ve a la página que quieres auditar. (En este ejemplo hemos escogido a tutorialesenlinea.es)
3 - Haz clic en el ícono de Lighthouse (Lighthouse icon) que se encuentra en la barra de herramientas de Chrome.

Si no ves el ícono en tu barra de herramientas, es posible que esté oculto en el menú principal de Chrome.
Después de hacer clic en el ícono, debes ver un menú.
Si solo quieres ejecutar un subconjunto de auditorías, haz clic en el botón Options y deshabilita las auditorías que no quieres ejecutar. Desplázate hacia abajo y presiona OK para confirmar los cambios.

Haz clic en el botón Generate report para ejecutar las pruebas de Lighthouse contra la página actualmente abierta.

Cuando terminan las auditorías, Lighthouse abre una nueva pestaña y muestra un informe en los resultados de la página.

Ejecutando Lighthouse programáticamente

Para nuestras situaciones estándar de "ejecución de la fábrica", lo anterior debería ser suficiente. Otra forma de ejecutar Lighthouse implica instalar el paquete de código abierto a través de NPM y seguir las instrucciones en la documentación de la CLI. Esto puede ser beneficioso si desea ejecutar auditorías mediante programación en una canalización de compilación, por ejemplo.

Similar a lo anterior, también puede ejecutar Lighthouse en código siguiendo la documentación para usar el módulo Node mediante programación. ¡Podría crear una aplicación Node.js completa con Lighthouse?!

Ejecutando el Lighthouse automáticamente en el tiempo

Así que ahora que somos profesionales, llevemos esto al siguiente nivel. Hay muchas integraciones enumeradas en la documentación de Lighthouse, así que echemos un vistazo a una de ellas.

Uso de "Foo" para ejecutar Lighthouse y comparar resultados a lo largo del tiempo

En un entorno de ingeniería donde muchos desarrolladores están implementando cambios en las aplicaciones de forma regular, puede ser importante monitorear el rendimiento del sitio web a lo largo del tiempo para asociar los conjuntos de cambios con la degradación o mejora del rendimiento. Otro ejemplo serían los equipos que tienen iniciativas para mejorar el rendimiento para el ranking SEO u otras razones. En estas situaciones, es crítico monitorear el rendimiento del sitio web durante días, semanas, meses, etc.

Puede agregar URL para rastrear en www.foo.software y monitorear el cambio de rendimiento. ¡Foo también proporciona notificaciones por correo electrónico, Slack o PagerDuty cuando el rendimiento ha caído por debajo del umbral definido por el usuario, cuando vuelve a la normalidad y cuando las mejoras se identifican automáticamente!

¡La mejor parte es que puedes crear una cuenta gratis ! Una vez registrado e iniciado sesión, haga clic en el enlace "Páginas" en la barra de navegación superior. Aquí es donde puede agregar URL para monitorear. Foo guarda resultados y muestra un gráfico de línea de tiempo que proporciona una visualización de métricas importantes. Puede alternar entre días, semanas, meses y profundizar en informes detallados.

Conclusión

Lighthouse se está convirtiendo en un estándar de la industria en la medición del rendimiento del sitio web. Hay libros valiosos sobre Lighthouse que proporcionan detalles de métricas importantes.