25 Jul ¿Qué son las Core Web Vitals Y Cuál es su impacto en SEO ?
Índice de contenidos
¿CÓMO AFECTARÁN LAS CORE WEB VITALS EN SEO ?
Las Core Web Vitals son unas nuevas métricas de Google pensadas para para impulsar la calidad de los sitios web. Esto se pretende lograr por medio de una mayor rapidez de carga y una mejorada experiencia de usuario en la navegación a través de los contenidos.
En mayo de 2020, Google anunció lo que sería una actualización de la experiencia de usuario con su nuevo algoritmo de clasificación llamado Core Web Vitals. Entonces ya comenzó su implementación con Pagespeed Insights y Lighthouse además de AMP, en dónde ya se podían averiguar las métricas que ofrecía una página web.
Estas métricas siguen activas y la gran diferencia como decíamos antes es que desde mediados de Junio de 2021 Google ya las tiene en consideración de forma gradual para las clasificaciones de posicionamiento de los sitios web de todo el mundo.
Según un anuncio oficial sobre las CWV, en Google pensaban que no era sencillo manejar muchas métricas sin un esquema general. Así, era complicado por usuarios poco entendidos en SEO y con la resolución de temas técnicos, comprender fácilmente y de un solo vistazo dónde están los problemas de usabilidad (UX) y Web Performance Optimization (WPO), y de ese modo saber cómo solucionarlos.
CWV establece unos criterios generales sobre lo que es una mejor experiencia de usuario , es decir que sea, rápida y de gran usabilidad. Estos Core Web Vitals son 3 métricas que representan el tiempo de carga, la estabilidad visual y la interactividad de una página.
Algunas aclaraciones Previas
Los Core Web Vitals son solo una parte de las pruebas de experiencia de Google. Las otras señales son compatibilidad con dispositivos móviles, HTTPS, (navegación segura) y intersticiales intrusivos ( ventanas emergentes no son bien recibidas ); No cumplir con estas reglas también penalizará en las clasificaciones orgánicas.
¿Cuánto afectarán las Core Web Vitals en SEO ?
John Mueller de Google nos ofrece un video acerca de esto, aunque está en inglés podrás ver subtítulos en Español:
Resumen del vídeo:
En general, en Google se priorizará con las páginas que ofrezcan la mejor información con carácter en general, incluso si algunos aspectos son algo deficientes en la experiencia de la página. Una mala experiencia en la página no anula el hecho de tener contenido excelente y relevante » por lo que no se penalizará completamente.
Como era de esperar, el contenido de calidad sigue siendo el rey. Al mismo tiempo, los Core Web Vitals indudablemente aumentan la importancia de la experiencia general del usuario como un factor relevante de clasificación.
Por otro lado, si está tratando de clasificar un sitio web donde la calidad de la información es en gran partemedida idéntica con otro , la optimización para Core Web Vitals puede marcar una gran diferencia. Puede pensar en este nuevo factor como un desempate. Solo recuerde que nada puede reemplazar tener contenido de valor en su sitio.
Seguidamente vamos a hacer un resumen de las CWV y a explicar en que afectan a una página web.
LCP (Largest Contentful Paint)
Se encarga de medir el tiempo de carga del contenido. Señala el momento en el que se carga completamente el elemento más grande de contenido en la parte superior. Este elemento puede ser de texto, imagen o vídeo.
Solo el contenido de la mitad superior de la página puede afectar a esta métrica.
Sin una buena optimización de imágenes para una carga rápida en webs de diseño con potentes sliders podría ser complicado sacar altas puntuaciones en LCP. Para ser considerado válido o bueno, el LCP debe ser inferior a 2,5 segundos.
Google ha publicado en WEB.DEV una serie de recomendaciones técnicas con las que tendrás una base para saber cómo optimizar el Largest Contentful Paint.
FID (First Input Delay)
El FID medirá la Interactividad, la capacidad de interactuar rápido. FID es el tiempo que va desde que el usuario realiza una acción en el sitio, (por ejemplo puede ser un clic) hasta que el navegador responde visualmente a esa acción.
Muchas veces los usuarios han experimentado que al hacer un clic la página se quede “pensando” hasta que finalmente nos muestra el resultado. Para ser considerado válido o bueno, el FID debería estar por debajo de 0,1 segundos.
Google DEV recomienda cómo optimizar la métrica del FID.
CLS (Cumulative Layout Shift)
Los CLS son los cambios acumulados de diseño, pero no se refiere a los cambios que hace el diseñador, si no de los cambios en el diseño mientras se está cargando la página. Esta métrica se encarga de medir la estabilidad desde el punto de vista visual. Los elementos de una página pueden ir cambiando de posición o ubicación según el contenido carga, es decir, se mueven mientras se va creando la imagen final que tu ves en la pantalla. Esto puede ser molesto y también provocar muchos clics en posiciones o lugares en los que no se pretendía hacer clic, lo que al final no supone una mala experiencia de usuario en la navegación.
Esta métrica no es una métrica de tiempo, sino que mide la frecuencia y la importancia con la que se dan estos cambios en una página. Se acumula un valor de puntuación cada vez que se produce una variación o cambio de este tipo, entonces este valor es mayor cuanto más se mueve un elemento. Cuando la carga está completa obtienes la puntuación de la suma de los valores de todos los elementos que se han movido.
Aquí puedes encontrar los detalles completos para calcular el CSL.
Un buen CLS es mejor que sea inferior a 0,1.
Google DEV también ha publicado una serie de recomendaciones sobre optimización del CLS.
Evaluación básica de elementos vitales web en PageSpeed Insights
PageSpeed Insights (PSI) de Google proporciona una evaluación de Core Web Vitals según la puntuación de optimización general de una página.
Esta evaluación forma parte del informe obtenido con los de datos de campo. Los datos de campo los proporcionan el Informe relacionado con la experiencia del usuario de Chrome (CrUX).
Esta información se recopila a partir de la interacción de usuarios reales y se basa en lo que experimentan ellos mismos en su sitio web. Cuando se trata de clasificaciones de búsqueda, Google utilizará estos datos de campo.
La sección «Diagnóstico» de PSI también proporciona información útil sobre los elementos que afectan a cada una de las tres métricas.
Recuerda que a través de Google Search Console podemos evaluar y hacer un seguimiento de las CVW aunque puedes encontrate con que no se visualizan los datos. Este problema ocurre cuando CrUX no ha recopilado suficientes datos de campo, lo cual es común en sitios web pequeños. Afortunadamente, hay otros lugares donde tenemos en nuestras manos datos de campo.
Lighthouse y Web Vitals Crhome Extension
Lighthouse es una herramienta que también te permitirá ver tus métricas según las CWV, esta herramienta busca mejorar la calidad de las páginas web a través de la comprensión de los resultados que ofrece y su posterior corrección. Puedes ejecutarla para cualquier página web y ofrece auditorías de performance, accesibilidad, progressive web apps, SEO y más.
Una vez que haya medido los elementos fundamentales de la Web de su sitio, es hora de optimizarlos.
¿ Cómo mejorar el LCP ?
Obtenga un mejor Hosting o plan de alojamiento. El tiempo de respuesta rápido por parte del servidor (TTFB) es fundamental para la velocidad del sitio web. Si está en un servidor con alojamiento compartido podría ser lento, considere entonces la posibilidad de actualizar a un plan VPS de mejores prestaciones o un hosting dedicado;
Implemente CSS crítico. Esta acción trata de encontrar el CSS necesario para cargar el contenido en la mitad superior de la página e incluirlo en la etiqueta principal. Esta técnica mejora el rendimiento percibido y real.
Optimiza las imágenes. A menudo, la razón más importante de los sitios web lentos es que las imágenes se deben comprimir, cambiar de tamaño y convertir al formato correcto.
Precargue las imágenes del slide principal. Las imágenes del slider home suelen ser los elementos de la parte superior del pliegue más significativos, por lo que cargarlas más rápido es crucial para la experiencia del usuario. El uso de link rel = preload, especialmente para imágenes de slide cargadas con CSS o JavaScript, puede reducir significativamente el LCP.
¿ Cómo solucionar problemas de FID ?
Esto son algunas de las mejores opciones que puede aplicar para mejorar su FID:
Divida las tareas largas. Esta debería ser su principal preocupación. Las tareas largas impiden que el hilo principal responda con rapidez y que a las interacciones del usuario tengan que esperar más tiempo. Al dividirlos, puede mejorar significativamente el performance o rendimiento de su sitio web;
Minifica y comprime archivos de código. La minificación elimina partes innecesarias del código como saltos de línea y espacios en blanco. La compresión también modifica los archivos de código, haciéndolos más pequeños. Algunos proveedores que ofrecen soluciones CDN de alojamiento o en sus servicios generales implementan estas técnicas de forma predeterminada;
Retrase o elimine los scripts de terceros que no sean críticos. Los scripts de terceros retrasan la carga y en ocasiones pueden evitar que sus propios scripts se ejecuten a tiempo. Considere qué scripts son más necesarios y téngalos como prioritarios. Asegúrese de que las secuencias de comandos de anuncios y ventanas emergentes no están en la parte superior de la lista;
Utilice » WEB WORKERS». Los Web workers son un medio funcional para que el contenido web ejecute scripts en subprocesos en segundo plano sin afectar el hilo principal. Mover operaciones que no son de IU a un subproceso en segundo plano es generalmente una buena práctica;
Optimiza CSS. Si bien JS es el villano principal de FID, CSS también bloquea el renderizado de forma predeterminada. Es por eso que el CSS excesivo también puede dañar la experiencia del usuario. Además de implementar CSS crítico y minimizar y comprimir archivos CSS, también vale la pena reducir el CSS no utilizado en su sitio.
¿ Cómo solucionar problemas de CLS ?
A continuación, se muestran algunas acciones de optimización que pueden reducir los cambios de diseño de manera significativa:
Debe evitar la inserción de anuncios y ventanas emergentes sobre otro contenido. Insertar contenido en la parte superior de una página como sliders, popups, etc.. provoca que todo lo que está debajo cambie, lo que resulta en una mala puntuación CLS;
Agregue atributos de ancho y alto a imágenes y videos. Los atributos de imagen ayudan al navegador a asignar la cantidad necesaria y correcta de espacio para cada elemento por adelantado. Esto reduce significativamente los cambios de diseño;
Reserve espacio para anuncios, iFrames y contenido dinámico. Al igual que las imágenes y los videos, estos elementos también pueden causar cambios de diseño si no tienen espacio reservado. Utilice contenedores con las dimensiones adecuadas y la propiedad overflow: hidden para garantizar que el contenido no se desborde de su contenedor;
Optimice la carga y entrega de fuentes. El uso de link rel = «preload» y font-display: opcional en combinación puede evitar cambios de diseño y destellos de texto invisible.
Conclusión final
Los Core Web Vitals son un gran paso para mejorar la web para más usuarios. Y como parte del algoritmo de clasificación de Google, parece que estas métricas llegaron para quedarse.
Es por eso que debe monitorearlos continuamente, incluso si no ve problemas específicos en este momento. En ese sentido, aquí hay una lista de verificación rápida de cosas para recordar en el futuro:
Google determina si su sitio pasa la auditoría de Core Web Vitals basándose en el período anterior de 28 días. Es por eso que debe probar su sitio al menos una vez al mes;
Al realizar las pruebas, céntrese en los datos de campo, ya que reflejan con precisión cómo los usuarios reales experimentan su sitio;
Utilice PageSpeed Insights para comprender el rendimiento de una página específica;
Por otro lado, use Google Search Console para encontrar problemas comunes en grupos de páginas;
Para una mayor personalización y una comprensión más profunda del rendimiento de su sitio, intente extraer datos de CrUX con BigQuery o la API de CrUX.
Si necesita ayuda con todo esto, no dude en contactar con nuestros expertos.