Cómo analizar el rendimiento del sitio web con Lighthouse

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.

Nota: Lighthouse actualmente tiene un gran enfoque sobre las funciones de las Progressive Web Apps, como Add to homescreen y soporte sin conexión. Sin embargo, el objetivo general del proyecto es ofrecer una auditoría de extremo a extremo de todos los aspectos de la calidad de la app web.Incluye bibliotecas front-end de jаvascript con vulnerabilidades de seguridad conocidas 5 vulnerabilidades detectadas
Algunos scripts de terceros pueden contener vulnerabilidades de seguridad conocidas que los atacantes pueden identificar y explotar fácilmente.

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 "Auditorías".

de "Auditorías" de Chrome DevTools

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.

Informe de rendimiento del Lighthouse

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 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

Nota: Para que te de un buen puntaje, desactiva toda la publicidad que tenga hasta la de Google Adsense, dado que por tener script de tercero siempre te mostrara en Accesibilidad, Mejores prácticas y demás una puntuación muy baja.

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.futbolgratis.org)
3 - Haz clic en el ícono de Lighthouse (Lighthouse icon) que se encuentra en la barra de herramientas de Chrome.

Ícono de Lighthouse 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ú.

Menú de Lighthouse

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.

Desktop

Mobile Lite. Para los s que tenga una conexión lenta

Mobile

Nota: La puntuación dada por Lighthouse en Best Practices (Mejores prácticas en español) es debido a mi sistema de gestión de contenido CMS, DataLife Engine:
1 - No utiliza oyentes pasivos para mejorar el rendimiento de desplazamiento: Considere marcar sus oyentes de eventos táctiles y de rueda como 'pasivos' para mejorar el rendimiento de desplazamiento de su página, en este caso hace referencia al script de https://tutorialesenlinea.futbolgratis.org/engine/classes/min/index.php?charset=utf-8&g=general&v=26, que es inyectado por la ingenieria del sistema.
2 - Los enlaces a destinos de origen cruzado no son seguros: Agregue `rel =" noopener "` o `rel =" noreferrer "` a cualquier enlace externo para mejorar el rendimiento y evitar vulnerabilidades de seguridad.

URL	Target
/authorize?client_id=…(oauth.vk.com)	_blank
/dialog/oauth?client_id=…(www.facebook.com)	_blank

Esto hace referenca a la autentificacion de inicio de sesion de los s por medio de las redes sociales. Que esta dentro de la carpeta engine del CMS.
3 - Incluye bibliotecas front-end de jаvascript con vulnerabilidades de seguridad conocidas: 5 vulnerabilidades detectadas. Algunos scripts de terceros pueden contener vulnerabilidades de seguridad conocidas que los atacantes pueden identificar y explotar fácilmente.

Versión de biblioteca	Recuento de vulnerabilidades	Mayor gravedad
[email protected]	2	Medio
jQuery [email protected]	3	Alto

4 - Los errores del navegador se registraron en la consola: Los errores registrados en la consola indican problemas no resueltos. Pueden provenir de fallas de solicitud de red y otras preocupaciones del navegador.

URL	Descripción
https://tutorialesenlinea.futbolgratis.org	TypeError: No se puede leer la propiedad 'addEventListener' de nulo en https://tutorialesenlinea.futbolgratis.org/:4922:3

Esta ultima es dada por el navegador, en esta tendré que investigar mas por que da este error...

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 , 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.