Core Web Vitals: 7 herramientas y técnicas para identificar cuellos de botella en el desempeño

Core Web Vitals (CWV) es un tema candente en este momento. Aquí, veremos algunas de las herramientas que podemos usar para ayudar a identificar problemas de rendimiento del sitio web, en preparación para la próxima actualización de clasificación de Google en mayo de 2021.

¿Necesita un repaso sobre Core Web Vitals? Aprenda qué son y cómo optimizarlos en mi artículo Explicación de Core Web Vitals.

Monitoreo automatizado de métricas de CWV

Si tiene varios sitios web o páginas clave que desea monitorear a lo largo del tiempo, sin tener que ejecutar manualmente una prueba tras otra, esta hoja de cálculo de Digital Inspiration podría ser para usted. Simplemente tome una clave de API de Lighthouse PageSpeed, agregue algunas URL y ¡listo!

La hoja de cálculo ayuda a identificar posibles problemas de rendimiento en torno a los indicadores clave de CWV y cuándo podrían haber ocurrido, lo que a su vez puede darnos pistas sobre cuál podría ser la causa. También se puede utilizar para demostrar cómo las puntuaciones de velocidad pueden cambiar de forma natural con el tiempo a medida que crece un sitio web o cuando se realizan cambios en los algoritmos de velocidad de la página subyacentes.

Hemos estado utilizando una versión modificada de esta hoja de cálculo durante algunos meses y nos ha ayudado a identificar oportunidades para mejorar el rendimiento de varios sitios web.

PageSpeed ​​Insights

PageSpeed ​​Insights de Google es mi herramienta de referencia para las investigaciones iniciales de primera línea sobre el rendimiento y los problemas relacionados con CWV, tanto para dispositivos móviles como de escritorio. Los informes contienen 'Datos de campo'; cómo los usuarios del mundo real experimentan el sitio web junto con los datos de Lighthouse 'Lab' que simulan la carga de una página, lo cual es útil para pruebas repetibles y consistentes.

Las métricas fundamentales de Web Vital se destacan claramente con indicadores sencillos codificados por colores. Las métricas deficientes se resaltan en rojo, las buenas en verde. Estas métricas se combinan para dar una puntuación de velocidad general, y necesita un 90% o más para un "pase" ecológico.

En estos informes también se dan una serie de recomendaciones y diagnósticos, ordenados por los elementos de mayor impacto en términos de segundos totales que se pueden ahorrar.

Monitor de rendimiento de Chrome DevTools

Para un análisis más detallado del rendimiento y los problemas relacionados con CWV, a menudo recurro al Monitor de rendimiento de Chrome dentro de DevTools y algunos de los indicadores clave de CWV que uso están enumerados en la captura de pantalla a continuación.

1. En primer lugar, querrá asegurarse de que está ejecutando el monitor de rendimiento con la resolución correcta, ya que los elementos LCP y CLS a menudo cambiarán a diferentes resoluciones. Tengo el mío configurado en 350 x 636 píxeles para replicar la vista móvil de PageSpeed ​​Insights.
2. Antes de ejecutar el informe, es posible que también desee simular la conectividad y la potencia de un dispositivo móvil. A menudo selecciono una ralentización rápida de la CPU 3g y 4x.
3. La selección de la métrica LCP una vez que se ha generado un informe identifica cuál es el elemento más grande. Debe estar lo más cerca posible del FCP (Primera pintura con contenido). Si hay una brecha, querrá identificar y optimizar la entrega del elemento más grande.
4. Las tareas largas de la CPU se resaltan con diagonales rojas en las barras grises. Esto a menudo es causado por un JavaScript más pesado, representado por las barras amarillas y afectará sus métricas de interactividad (FID, TBT y TTI). Desglosar las barras a continuación generalmente apuntará a los archivos y funciones de JavaScript ofensivos.
5. Los cambios de diseño se resaltan con estas barras rojas y, al seleccionarlas, generalmente se resaltará qué elemento se ha cambiado. Una gran cantidad de estos creará valores CLS más altos.
6. La vista de marco puede ser una excelente manera de resaltar visualmente cómo aparece el contenido y cómo se cambia el diseño a medida que se carga. Para valores altos de CLS, a menudo es obvio a partir de los marcos cuál es la causa. En este ejemplo, un banner de cookies grande hace que el diseño cambie a medida que el contenido se empuja hacia abajo.

Extensiones de Chrome Web Vitals

Vitales básicos de SERP

La extensión SERP Vitals muestra un indicador útil para las métricas LCP, FID y CLS directamente en los resultados de búsqueda. Es ideal para el análisis de la competencia y puede proporcionar una indicación rápida de la velocidad probable de una página web antes de que la visite.

Los datos se compilan de forma anónima de usuarios reales mediante el Informe de experiencia del usuario de Chrome (CrUX). Sin embargo, no está disponible para todos los sitios, ya que los sitios nuevos o los sitios con poco tráfico no habrán obtenido suficientes puntos de datos.

Vitales web

La práctica extensión Web Vitals mide las 3 métricas clave de CWV para usuarios de escritorio en Chrome en tiempo real, y su color de semáforo proporciona un indicador rápido mientras navega por un sitio web. Como no se basa en datos de usuario recopilados externamente, puede ser excelente para los desarrolladores que trabajan en un entorno local detectar cualquier problema desde el principio.

Faro

Lighthouse Extensions proporciona una ruta rápida a la misma función de informes disponible en Chrome DevTools y extrae datos de laboratorio utilizando la API de Lighthouse en lugar de datos de campo de usuarios del mundo real a través de CrUX.

El informe de rendimiento es muy similar al análisis móvil de PageSpeed ​​Insights, y ofrece diagnósticos y recomendaciones similares. También se generan informes adicionales para SEO, accesibilidad y mejores prácticas.

Visualizador de velocidad del sitio Treo

El visualizador en https://treo.sh/sitespeed muestra métricas de CWV a lo largo del tiempo, filtrables por dispositivo, conectividad y región geográfica. Se actualiza semanalmente y utiliza datos del informe CrUX.

En el siguiente ejemplo para bbc.co.uk, podemos ver cómo la métrica CLS ha caído significativamente en los últimos 3 meses, dando resultados de "aprobación" verde para todas las métricas centrales. Esta es una excelente manera de analizar el rendimiento de las métricas de CWV a lo largo del tiempo o de realizar análisis de la competencia.

Visualización de solicitudes de terceros

Las métricas de interactividad para FID, TTI y TBT a menudo pueden ser difíciles de solucionar. PageSpeed ​​Insights puede ser útil para identificar algunos de los scripts de terceros más pesados, pero a veces una visualización decente puede comunicar el impacto de estos scripts mucho más fácilmente.

La herramienta de mapeo de solicitudes https://requestmap.herokuapp.com/ es excelente para esto. Los mapas generados contienen nodos para cada solicitud de terceros, con nodos más grandes que representan scripts de mayor impacto. Si sus métricas de interactividad son malas, es probable que vea muchos nodos en este mapa.

Aquí hay un ejemplo de un sitio que tiene la friolera de 26 segundos para la métrica Tiempo para interactuar TTI. Un vistazo rápido al mapa muestra un widget de chat en vivo, representado por los numerosos nodos azul oscuro en la parte superior, que representan más de la mitad del total de solicitudes.

La herramienta de mapa de solicitudes también es una excelente manera de determinar desde dónde se cargan los scripts u otros activos. Podemos ver a continuación varios nodos que provienen directamente del nodo amarillo de Google Tag Manager en este ejemplo.

Cascadas en WebPageTest

Los informes de WebPageTest proporcionan muchos más detalles que PageSpeed ​​Insights y se pueden generar desde varios dispositivos y ubicaciones.

A menudo uso esta herramienta para el análisis en cascada, que visualiza la secuencia de carga de todos los activos en una página. Esto puede ser particularmente útil cuando intentas optimizar tu contenido crítico "por encima de la mitad". Por ejemplo, si está optimizando para LCP y el elemento más grande en la parte superior del pliegue es una imagen o tipografía, es posible que desee implementar la precarga en los archivos de imagen y fuente más grandes, y verificar que estos recursos precargados aparezcan en la parte superior de la cascada. .

Si no está seguro de cómo CWV afectará su sitio, envíenos un mensaje hoy.