Estructura del contenido
Métricas Web Performance más importantes
De un hilo en twitter espectacular, claro y super útil de midudev, se extraen las que son consideradas las métricas más importantes a nivel de performance que se pueden analizar a través de la herramienta de desarrolladores de Chrome. Te recomiendo seguir a midudev también en su canal de Youtube ya que es experto en desarrollo web y explica muy sencillo lo que a priori es algo complejo de entender.
No se por cuánto tiempo estará disponible este vídeo de su canal de Twitch donde repasa una a una estas métricas además de hablar sobre el tema de las Core Web Vitals diferencias entre las diferentes métricas y herramientas, etc, es oro el vídeo.
Cómo auditar el rendimiento de una página usando Lighthouse
La funcionalidad “Lighthouse” dentro de la herramienta para desarrolladores de Chrome, te permite analizar el rendimiento de la página según la puntuación obtenida en los valores de Progressive Web App (PWA), Performance, Best Practices, Accessibility y SEO. Podrás diferenciar en el test por dispositivo móvil y PC. Además, incluyen una opción de auditoría en fase beta para los anuncios.
Los resultados en términos por ejemplo de velocidad de una página en concreto, no deberían ser tomados como 100% fiables y es recomendable no sólo hacer varias pruebas con diferentes tipos de urls que conformen el site (desde las páginas de registro a páginas detalle, categorías, etc.) sino que además se recomienda medir el resultado con otras herramientas como por ejemplo WebPageTest.org , PageSpeedInsight , TestMySite , etc. y sacar conclusiones de mejora de esos tiempos.
Puedes además hacer la simulación entre los dispositivos de mobile y desktop.
Cómo acceder a Lighthouse
- Instalando Lighthouse como un módulo de Node global a través de una línea de comandos.
- Descargando la extensión para Chrome o para Firefox a modo add-on
- A través de la opción “Lighthouse” de la herramienta Chrome DevTools.
Es preferible utilizar la herramienta desde la vista de incógnito simulando la experiencia de un nuevo usuario, deshabilitando la opción de caché y no permitiendo el uso de extensiones en incógnito.
Monitoriza los resultados
Se recomienda hacer un seguimiento de cada resultado para poder comprobar si se ha mejorado en las estadísticas.
Para ello puedes descargar el .json de cada auditoría y a través de la opción “Lighthouse Viewer” puedes ir importando la url base y la comparativa (no permite hacer un volcado de varios informes y ver la evolución de esas puntuaciones).
También es posible hacer un seguimiento desde la herramienta online de medición WebDev. Si te logas con una cuenta podrás ir registrando tus informes guardados y ver la comparativa con el visor «Lighthouse CI Diff». Como punto negativo de esta tool es que necesitarás recordar las urls que estás monitorizando cada vez, además de que sólo permite un único informe.
Nuevas métricas
A partir de la versión de Chrome 84 se añadieron las nuevas métricas que serán tenidas en cuenta a partir de Junio 2021 motivados por las «Core Web Vitals», y que en Lighthouse se ven reflejadas en Large Contentful Paint y Cumulative Layout Shift, ya que son métricas que se analizan bajo entorno simulado con este tipo de herramientas de laboratio.
La otra métrica, First Input Delay, se analiza desde el punto de vista del usuario real (RUM) y no es posible simularla con Lighthouse, por lo que se sustituiría por el Total Blocking Time o Max Potential First Input Delay.
Calculadora de puntuación Lighthouse
Esta herramienta permite jugar con los valores y puntuaciones de las diferentes métricas de rendimiento, e incluso puedes hacer una comparativa entre las puntuaciones de las diferentes versiones.
Cuando ejecuta una auditoría con Lighthouse, el informe adjunta un enlace a la calculadora con sus resultados completados:
Y es que éstas tres métricas no tiene el mismo peso sobre el total de las métricas de rendimiento en Lighthouse. Esto se puede ver claramente en la calculadora de peso de Core Web Vitals y que constantemente los ingenieros actualizan en el % de peso para ajustarse a las necesidades del usuario.
Lighthouse 8.0.0 – DevTools Chrome
El pasado 02 de junio se publicó una actualización importante en la versión de Lighthouse a la 8.0.0 que corre sobre la versión 93 de Chrome y la versión de pruebas Chrome Canary (en la herramienta de PageSpeedInsights también se aplica).
Las principales novedades tienen que ver con el peso que se otorga en la herramienta de rendimiento las diferentes métricas que la conforman y que afectan directamente a las Core Web Vitals (y por tanto a la experiencia de página como factor de posicionamiento).
- Se ha vuelto a ponderar la puntuación de rendimiento ( # 12577 )
- Se actualizaron las curvas de puntuación TBT y FCP ( # 12576 , # 12556 )
- CLS se ha actualizado a su nueva definición en ventana ( # 12554 )
- Nuevo filtro. Puedes filtrar después de la auditoría, entre las diferentes métricas para centrarte en las oportunidades y diagnósticos más relevantes para mejorar.
- El Lighthouse Treemap ya está disponible en todos los principales clientes de Lighthouse. Si tu sitio expone mapas de origen a Lighthouse, busca el botón «View Treemap» para ver un desglose del todas de peticiones de la página filtrable por peso y cobertura (cuánto no se usa).
- Esta actualización viene con algunos cambios importantes en el peso de las métricas: CLS aumenta su peso x3 en favor de otras métricas como FCP, SI o TTI (que bajan un 5% cada una), TBT (FID) sube un 5% y LCP que se mantiene en un 25%.
Simulación del test
La configuración predeterminada de Lighthouse usa dispositivo móvil. La simulación tiene en cuenta:
- Red de conexión lenta
- Emulación de pantalla del dispositivo (la misma que se encuentra en Chrome DevTools).
- Se cambia de Nexus 5X Moto G4 como dispositivo de referencia (igual que tiene por defecto WebPageTest).
Lighthouse 8.4 – DevTools Chrome
Última versión de Lighthouse 8.4 publicada el pasado 8 de septiembre de 2021. Nota desde Developer Chrome.
Ya se encuentra disponible en la línea de comandos y en Chrome Canary . Llegará a la versión estable de Chrome 95 y estará disponible en PageSpeed Insights a partir del 21 de septiembre aproximadamente.
Algunas de las novedades que trae este update son:
- Lighthouse detectará si la imagen que corresponde con el elemento LCP lleva el atributo de lazy load y avisa el eliminarlo ya que el navegador podría poner la carga de la imagen en cola y renderizar otros recursos (quizás menos importantes) primeros, lo que afectaría a la métrica LCP.
- Aviso en la configuración de la meta viewport si no está configurada correctamente:
<meta name="viewport" content="width=device-width">
Fuentes:
Developers Google Auditar Apps Web con Lighthouse
A Technical SEO Guide to Lighthouse Performance Metrics (SEJ)
