Cómo analizar el rendimiento del sitio web con Lighthouse

Audite el rendimiento del sitio web de forma manual, programática o automática

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 en la página y luego genera un informe sobre el rendimiento de 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 solucionarlo. Faro

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

Ejecución de 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 "desempeño". También puede optar por 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 de Github del proyecto Lighthouse.

Haga clic en "Ejecutar auditorías" a continuación. Una vez completado, Lighthouse proporciona un informe dentro de la interfaz de usuario de la extensión.

Este informe es una descripción general de métricas importantes, oportunidades y puntaje de desempeño 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 la puntuación de rendimiento general.

En la parte superior izquierda del panel Chrome DevTools hay un ícono de descarga que puede usar para descargar el informe completo en formato JSON. Luego, puede usarlo para crear un informe PDF a través del Visor de informes Lighthouse.

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

Ejecutar Lighthouse mediante programación

Para nuestras situaciones estándar de “funcionamiento del molino”, 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 de la documentación de la CLI. Esto puede resultar beneficioso si, por ejemplo, desea ejecutar auditorías mediante programación en una canalización de compilación.

De manera 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?

Ejecutar Lighthouse automáticamente a lo largo del tiempo

Entonces, 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 en el que muchos desarrolladores implementan 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 por ranking SEO u otras razones. En estas situaciones, es fundamental supervisar 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 de un umbral definido por el usuario, cuando vuelve a la normalidad y cuando las mejoras se identifican automáticamente.

¡La mejor parte es que puede crear una cuenta gratis! Una vez registrado e iniciado sesión, haga clic en el enlace "Páginas" de la navegación superior. Aquí es donde puede agregar URL para monitorear. Foo guarda los 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 de sitios web. Hay libros que vale la pena documentar sobre Lighthouse que brindan detalles de métricas importantes.