4 consejos principales para mejorar la auditoría de Core Web Vitals

Publicado: 2022-05-10

No existe una regla estricta y rápida sobre cómo auditar Core Web Vitals, especialmente con una variedad de herramientas de terceros a considerar. Desglosamos algunos de nuestros mejores consejos de auditoría de velocidad para incorporar a sus flujos de trabajo, que cubrirán:

  • Experiencia de página y consola de búsqueda de Google
  • Los inconvenientes de PageSpeed ​​Insights
  • Herramientas de auditoría de terceros recomendadas
  • Comprender los gráficos de cascada

1. Comience su flujo de trabajo de auditoría Core Web Vitals con Search Console

Al auditar un sitio web para conocer la velocidad del sitio y los problemas de Core Web Vitals, recomendamos siempre comenzar el proceso de solución de problemas revisando la sección "Experiencia" en Search Console, siempre que haya acceso disponible. La consola de búsqueda agrega datos de usuarios reales (campo) del informe Chrome UX, por lo que esta es una manera fácil de comprender cuáles de los problemas de LCP, CLS o FID están afectando su experiencia de usuario y, en última instancia, el potencial de clasificación del sitio.

Vaya a 'Experiencia de la página' > 'Números vitales web principales' y el gráfico que se muestra mostrará la cantidad de URL que se clasifican como 'Bueno', 'Necesita mejorar' o 'Deficiente' para la propiedad del sitio web. Por ejemplo:

Ejemplo de gráfico Core Web Vitals de GSC

Consulte el cuadro a continuación sobre los tiempos y las métricas de Google en los umbrales anteriores de Core Web Vitals.

Bueno Necesita mejorar Pobre
LCP <=2.5s <=4s >4s
DEFENSOR <=100ms <=300ms >300ms
CLS <=0.1 <=0.25 >0.25

A partir de aquí, podemos evaluar si la mayoría de las URL están clasificadas como "Buenas" y, por lo tanto, superan las 3 métricas de Core Web Vitals, o si la mayoría de las páginas son "Deficientes" o "Necesitan mejorar", lo que indica que hay algunos problemas técnicos pendientes. que deben resolverse para que pasen.

Sugerencia útil: las páginas deben pasar los tres web vitals para pasar al estado 'Bueno', y no es suficiente que la mayoría de las URL de un sitio estén en el rango 'Necesita mejorar'.

Luego puede profundizar en cada sección para descubrir las URL específicas que se ven afectadas por problemas de velocidad y necesitan auditoría. Estos se agrupan por aquellos que son similares a nivel de plantilla. Por lo tanto, en lugar de intentar auditar todos los diferentes tipos de URL que puede tener un sitio, por ejemplo, página de inicio, páginas de categorías, páginas de productos, publicaciones de blog, etc., los problemas que enfrentan los usuarios reales cuando visitan el sitio web pueden centrarse solo en 1 o 2 de estos, lo que significa que puede centrar sus esfuerzos únicamente en estas plantillas, lo que puede ser un gran ahorro de tiempo.

2. Usa PageSpeed ​​Insights con moderación

Aunque PageSpeed ​​Insights (PSI) es una útil herramienta gratuita de Google que brinda una descripción general de alto nivel de las posibles oportunidades para solucionar problemas, es realmente una forma perezosa de auditar la velocidad del sitio si se usa de forma aislada. Hemos visto a muchos SEO tomar las recomendaciones, a veces palabra por palabra, y presentarlas a los desarrolladores o al equipo técnico de los clientes sin comprender realmente el por qué o el contexto detrás de ellas.

Desafortunadamente, esto a menudo puede llevar a que le respondan más preguntas, especialmente si no está profundizando en las oportunidades y recomendaciones que arrojará la herramienta.

Por ejemplo, todos hemos oído hablar de la recomendación de 'Eliminar los recursos de bloqueo de procesamiento' para acelerar la carga del elemento LCP, pero ¿qué sucede cuando es fundamental tener este recurso en su lugar en la primera pintura, como un script de banner de cookies? o los activos afectados son recursos de terceros? Es probable que los desarrolladores rechacen esto directamente, ya que no habrá mucho que puedan hacer, por lo que es muy importante que cualquier recomendación técnica tomada de PSI se tome con pinzas y se investigue más a fondo antes de transmitirla a desarrolladores

También es útil saber que PSI utiliza un dispositivo emulado (Moto G4) con Lighthouse, pero los problemas pueden variar considerablemente según el dispositivo que los usuarios reales utilicen con más frecuencia, como es el caso de las pruebas de "laboratorio". A menudo, puede significar que PSI no devolverá problemas u oportunidades para realizar pruebas en ese dispositivo específico, aunque sepa que hay un problema para los usuarios reales del sitio a partir del informe de Chrome UX.

Configuración de prueba de Lighthouse predeterminada utilizada por PageSpeed ​​Insights

Por lo tanto, siempre recomendamos usar PSI junto con otras herramientas de prueba de velocidad donde la configuración del dispositivo y la conexión se pueden ajustar en consecuencia.

3. Explore herramientas alternativas de auditoría de velocidad

Además de usar PageSpeed ​​y otras herramientas de Google, también recomendamos explorar otras herramientas de prueba de velocidad gratuitas y gratuitas, como WebPageTest (WPT) o GTMetrix.

WebPageTest tiene una variedad de características útiles y opciones de configuración que ayudan a realizar pruebas de velocidad a nivel de página. La configuración avanzada le permite ajustar configuraciones de prueba importantes, como el navegador y el tipo de dispositivo, así como la ubicación de la prueba. Esto le permite ajustar su auditoría, especialmente si sabe dónde se encuentran la mayoría de los usuarios del sitio, así como su tipo de dispositivo, lo que significa que no solo confía en el dispositivo simulado preestablecido de Google.

Aquí, también puede ajustar la configuración de conexión desde la conexión 3G Fast predeterminada, así como bloquear ciertas URL si desea probar aumentos de rendimiento para scripts problemáticos. Hay muchas otras opciones de configuración que no hemos enumerado para explorar, pero las anteriores son las que encontramos más útiles al auditar los datos vitales web principales.

Las útiles opciones de configuración avanzada de WebPageTest

Una vez que se haya ejecutado una prueba, navegue a la pestaña Core Web Vitals para obtener un desglose detallado del rendimiento de cada métrica, incluidas tiras de película, líneas de tiempo de video, gráficos de cascada, así como un desglose granular del elemento que desencadenó el evento, todo lo cual se pueden exportar en una variedad de formatos y, lo mejor de todo, ¡gratis!

La vista de tira de película es particularmente útil para comprender en qué punto de la página se cargan ciertos elementos, lo que puede ayudar a priorizar qué activos podrían cargarse más rápido. Se mostrará muy claramente si hay cambios visuales significativos para ayudar a identificar los elementos que lo causan.

Ejemplo de tira de película que muestra un problema de CLS debido a una carga de banner de cookies

GTMetrix tiene características similares a WebPageTest, sin embargo, muchas de las opciones avanzadas que son gratuitas en WPT solo están disponibles en los paquetes pagados.

4. Conozca los gráficos de cascada

En términos básicos, un gráfico de cascada es una línea de tiempo de cuándo se solicitan los archivos o activos, cuánto tiempo tardaron en descargarse y cuándo están visibles en la página.

Mirar un gráfico de cascada puede parecer un poco desalentador, ya que hay muchas filas, longitudes de barra y colores diferentes que significan cosas diferentes, ¡pero no se desanime! Dedicar tiempo a aprender y comprender los gráficos en cascada es la habilidad más importante que debe tener un SEO técnico para la auditoría de velocidad.

Si está acostumbrado a usar WebPageTest para la auditoría de datos vitales web, consideramos que sus gráficos en cascada son los más fáciles de usar. WebPageTest proporciona una clave codificada por colores sobre el gráfico que indica la información de conexión, los tipos de recursos que se solicitan y otros eventos, como la ejecución de JS. También muestra visualmente los recursos que bloquean el renderizado, además de resaltar los recursos solicitados que tienen una respuesta 3xx o 4xx.

Consejo útil: preste atención a las sombras claras y oscuras de las barras horizontales en la cascada, la sombra clara indica que el navegador ha solicitado el recurso, mientras que la sombra oscura indica que el recurso se está descargando .

En general, esto ayuda a obtener una comprensión más profunda de los problemas de rendimiento en el sitio y, a su vez, hace que sus recomendaciones para solucionarlos sean más prácticas. Recomendamos el artículo detallado de Matt Hobbs sobre cómo leer un gráfico de cascada para obtener más información.


Si está buscando asesoramiento experto para resolver problemas de rendimiento en su sitio web, comuníquese con nosotros o visite nuestra página de Servicios técnicos de SEO para obtener más información sobre cómo puede ayudar Semetrical.