Glosario SEO: Google Core Web Vitals

¿Qué Core Web Vitals existen y cuáles son sus funciones?

Google ha definido tres "Core Web Vitals" que se centran especialmente en los requisitos técnicos de un sitio web: ¿Con qué rapidez se proporciona el contenido, cuándo responde el sitio web al usuario y cuán estable es el contenido visual? Para medir esto se utilizan las siguientes Core Web Vitals:

 

1. Pintura de mayor contenido (LCP)
2. Interacción con la siguiente pintura (INP)
3. Desplazamiento de diseño acumulativo (CLS)

 

Si ya te has familiarizado con el tema, puede que te hayas dado cuenta de que ha desaparecido un Web Vital y se ha añadido un nuevo valor. Y en efecto: en marzo de 2024, Google sustituyó el Web Vital First Input Delay (FID) por la métrica Interaction to Next Paint (INP). Explicaremos por qué en un momento. Pero primero, echemos un vistazo a los actuales Core Web Vitals y sus funciones.

 

LCP: Velocidad de carga de un sitio web

La pintura del contenido más grande (LCP ) describe el tiempo que tarda en hacerse visible el contenido principal o el elemento más grande relevante para el usuario después de hacer clic en una página. Inicialmente, esto solo se refiere al contenido por encima del pliegue, es decir, bloques de texto o imágenes que aparecen en el sitio web sin desplazamiento.

 

En el pasado, en lugar de la LCP se solía medir la duración hasta que aparecía el primer elemento en el sitio web: la Primera Pintura de Contenido (FCP). Podía tratarse, por ejemplo, de la aparición de las barras de carga, el índice o la barra de entrada en los buscadores. La LCP es ahora mucho más fácil de usar, ya que se tiene en cuenta la intención del usuario. Esto se debe a que el usuario está interesado principalmente en el contenido principal del sitio web.

 

Si observa sus métricas, se preguntará: ¿Cuál es un buen valor para mi LCP? Google proporciona las siguientes pistas:

 

• Bueno: Velocidades de carga inferiores a 2,5 segundos.
• Mejorable: velocidad de carga entre 2,5 y 4 segundos.
• Malo: Velocidades de carga superiores a 4 segundos

 

También puede averiguar cómo puede mejorar Core Web Vitals, como la mayor pintura de contenido, en nuestro artículo.

 

INP: La velocidad de respuesta de un sitio web

La Interacción Vital en la Web con Next Paint es una medida de la interactividad de un sitio web. Se registran todas las acciones del usuario: clics, pulsaciones de teclas y toques en pantallas táctiles. A continuación se mide el tiempo que tarda la reacción deseada en hacerse visible para el usuario.

 

Un INP bajo indica que el sitio web responde con fluidez y rapidez a más del 75% de los usuarios . Esto significa que las acciones se ejecutan en menos de 200 milisegundos. No se tienen en cuenta los valores atípicos. Si el tiempo de respuesta es superior a 500 milisegundos, el INP es bajo; todo lo que esté entre 200 y 500 milisegundos necesita mejoras.

 

¿Por qué el valor de medición INP ha sustituido al FID Core Web Vital?

Como ya se ha mencionado, la INP es una web vital bastante nueva y sustituyó a la medición FID (First Input Delay) en marzo de 2024. Google empezó a probar el INP en 2022. Tras su introducción, rápidamente quedó claro que este Web Vital tiene más en cuenta la experiencia del usuario que el FID. Pero, ¿por qué?

 

El First Input Delay sólo podía visualizar la primera impresión de un sitio web porque sólo se medía la primera interacción del usuario. Ahora, el INP ofrece una imagen mucho más completa de la velocidad de reacción, ya que registra todas las interacciones del usuario en un sitio web.

 

Además, el INP mide el tiempo transcurrido hasta que el consumidor recibe una representación visual o una reacción reconocible en su pantalla. Esto también fue diferente con el Web Vital FID. Éste sólo registraba el tiempo transcurrido hasta que el navegador empezaba a procesar la interacción. El FID no mostraba cuándo el usuario recibía realmente una reacción a su acción.

 

CLS: La estabilidad visual de un sitio web

El Cumulative Layout Shift (CLS) es el tercer vital web que Google ha definido para medir la experiencia del usuario en un sitio web. Se trata de la estabilidad visual de los bloques de texto, elementos de imagen y gráficos. En cuanto el diseño cambia inesperadamente durante la carga, el desplazamiento u otras interacciones del usuario, se toman las dos mediciones siguientes:

 

1. ¿Qué porcentaje del área de visualización ocupa el elemento, incluido el desplazamiento? Con una fracción de impacto del 60 %, el valor medido sería 0,6.
2. ¿A qué distancia se ha desplazado el elemento en relación con el tamaño del área de visualización? Con una fracción de distancia del 20 %, el valor medido sería 0,2.

 

Si se multiplican los valores, se obtiene la puntuación del desplazamiento del diseño. Si es inferior a 0,1, se trata de un buen valor CLS. Todo lo que supere este valor debe mejorarse. En nuestro ejemplo, el desplazamiento de la disposición es de 0,12 (0,6 * 0,2). Por tanto, habría que optimizarlo. A continuación, Timo Specht le explicará dónde puede encontrar las métricas de sus Core Web Vitals.

 

¿Cómo se mide Core Web Vitals?

Google mide las Core Web Vitals tanto en términos de facilidad de uso para móviles como para las versiones de escritorio de una página. Gracias a su orientación al usuario, los valores también son fáciles de entender para los no expertos.

 

Si ahora quiere medir las Core Web Vitals de sus sitios web, quizá se pregunte cuál es la forma mejor y más fácil de hacerlo. Hay dos formas de hacerlo: recopilando datos de laboratorio y midiendo las experiencias reales de los usuarios. Lo mejor es combinar ambas opciones.

 

Datos de laboratorio (Lab Data)

Cuando se miden datos de laboratorio, se utilizan herramientas que imitan el acceso del usuario a su sitio web y miden así las constantes vitales de la web. Esto es especialmente útil antes de publicar una o varias páginas para evitar que surjan problemas con la experiencia real de la página.

 

Las siguientes herramientas se utilizan con mayor frecuencia en la recogida de datos de laboratorio:

 

• Herramientas para desarrolladores de Chrome(Google Lighthouse)
• Google PageSpeed Insights

 

La desventaja de los datos de faro y otros datos de laboratorio es que no son un factor de clasificación y, por tanto, son irrelevantes para el posicionamiento en los resultados de los motores de búsqueda. Lo único que importa son los datos de campo. Además, el INP de Web Vital no puede medirse porque requiere una entrada real del usuario. En su lugar, se recoge un valor similar: TBT (Tiempo Total de Bloqueo). Debe ser inferior a 300 milisegundos.

 

Experiencias reales de los usuarios (datos de campo)

Los datos de laboratorio no sólo carecen de interés para la clasificación de sus páginas en las SERP, sino que además suelen arrojar resultados divergentes en comparación con las mediciones sobre el terreno. Esto se debe a que los usuarios utilizan diferentes dispositivosy tienen diferentes condiciones de red.

 

La memoria de trabajo y el rendimiento de la CPU, así como las interacciones con el sitio , también difieren de un usuario a otro y, sobre todo, de un usuario a otro en el laboratorio. Por tanto, a diferencia de las mediciones de laboratorio, los datos de campo ofrecen una imagen más realista.

 

Para medir la experiencia real de los usuarios existen diversas herramientas, como por ejemplo

 

• Informe sobre la experiencia del usuario en Chrome (Google PageSpeed Insights)
• Informe Google Core Web Vitals
• JavaScript (biblioteca Web Vitals)
• Extensión Web Vitals para Chrome
• Proveedores externos de RUM (Real User Monitoring)

 

Sin embargo, los datos de campo también tienen sus desventajas. Por ejemplo, los nuevos problemas en las páginas web sólo son visibles en los informes al cabo de un mes aproximadamente. Los datos de laboratorio pueden ser muy útiles para ver los ratios con mayor regularidad. Especialmente después de optimizaciones o cambios en el sitio , proporcionan información inmediata sobre los posibles efectos en las Core Web Vitals.

 

Los consejos más importantes para mejorar Core Web Vitals

Si desea mejorar una o todas las Core Web Vitals, primero debe encontrar la causa de un LCP, INP o CLS deficiente. La buena noticia es que con Google PageSpeed Insights no solo puedes ver las métricas de todas las Core Web Vitals de tu sitio web, sino también encontrar un diagnóstico de las Web Vitals individuales y consejos sobre cómo mejorarlas.

Opciones para optimizar el LCP

El mayor cuadro de contenido, es decir, el mayor elemento relevante para el usuario de su página, puede consistir en texto o en un elemento de imagen. Para mejorar los tiempos de carga, primero debe averiguar qué elemento define Google como el elemento principal. Esto puede parecer diferente dependiendo del dispositivo del usuario. Por lo tanto, con PageSpeed Insights, debe analizar su página tanto para la vista móvil como para la de escritorio.

 

En la sección de Diagnósticos, encontrará el elemento de pintura de mayor contenido, así como otros consejos útiles para mejorar su Web Vitals. Para mejorar el tiempo de su LCP, este elemento de contenido debe cargarse lo más rápidamente posible. Para ello, puede realizar los siguientes ajustes en sistemas de gestión de contenidos como WordPress:

 

• Configurar el cobro del navegador para obtener una respuesta más rápida del servidor
• Optimice el alojamiento de su sitio web para acortar el TTFB (Time to First Bite)
• Utilice la red de distribución de contenidos para ofrecer contenidos más rápidamente
• Eliminar/eliminar JavaScript y CSS innecesarios para una representación más rápida de los elementos LCP.
• Si su elemento LCP es una imagen, debe comprimirla.

 

Aunque mejorar el LCP puede requerir muchos conocimientos técnicos, deberías centrarte primero en dos cosas: Asegurarte de que el tiempo de respuesta de tu servidor es más rápido y hacer que el elemento LCP esté disponible para el usuario lo antes posible.

 

Cómo conseguir un mejor INP

El INP de Web Vital sólo puede medirse con datos de campo. Por regla general, los datos CrUX proporcionados por Google, que puedes encontrar en el informe de experiencia de usuario de Chrome, son suficientes para ello. El tiempo de respuesta a la interacción de un usuario puede verse afectado en los tres lugares siguientes:

 

1. Durante la entrada (retardo de entrada)
2. Durante el procesamiento (tiempo de procesamiento largo)
3. Durante la presentación (retraso de la presentación)

 

Para acelerar la interacción con el usuario, debe optimizar el código Java Script. Asegúrese de que haya menos trabajo en el hilo principal y elimine el código JavaScript innecesario de terceros proveedores. Las tareas largas de JavaScript también deberían dividirse en varias partes. Esto permite que las acciones del usuario tengan lugar entre ellas sin que JavaScript tenga que terminar antes el trabajo por completo.

 

Para un procesamiento y una presentación más rápidos del contenido, debe descartar los problemas de maquetación proporcionando el contenido de forma asíncrona. Un menor tamaño del DOM también contribuye a una representación más rápida del contenido de la página.

 

Cómo puede mejorar el CLS

La causa más común de una lectura CLS elevada es la falta de asignación de tamaños de imagen. Para minimizar los desplazamientos en la maquetación, debe especificar la anchura y la altura de los elementos en el código HTML utilizando "width" y "height ". Así reservará espacio en el diseño de la página para sus imágenes y vídeos, aunque ya se hayan cargado otros elementos.

 

Debería reservar de antemano un espacio suficientemente grande en el diseño de la página para los anuncios y banners sobre cuyo tamaño no puede influir. Si esto tampoco es posible, los contenidos dinámicos en particular deberían colocarse más abajo en el área de visualización.

 

Cuando se utilizan fuentes web, pueden producirse desplazamientos del diseño después de cargar estas fuentes. Para evitarlo, el operador del sitio web puede realizar las siguientes optimizaciones:

 

• Sorg dafür, dass die Webschriftart so früh wie möglich lädt (<link rel=preload>).
• Utilice una fuente alternativa de tamaño y estilo similares a los de la fuente web.
• Adaptar la fuente fallback y la fuente web entre sí mediante API.
• Reduzca el tiempo de carga de la fuente web mediante la API de carga de fuentes.

 

Puedes comprobar si las optimizaciones han dado sus frutos en el informe de experiencia de usuario de Chrome al cabo de 28 días.

 

¿Buen Core Web Vitals y mala clasificación en las SERP? Esa podría ser la razón.

Las Web Vitals son una de las pocas formas de hacer que la facilidad de uso de un sitio web sea medible y comparable en cifras . No obstante, es posible que su sitio web no aparezca entre los primeros resultados de los motores de búsqueda a pesar de que las Web Vitals estén optimizadas. Tenga en cuenta que otros factores de clasificación también contribuyen a la experiencia del usuario y, por tanto, a una mejor clasificación en Google.

 

Un buen SEO incluye también la optimización on-page, que se consigue, por ejemplo, con medidas de link building, un diseño atractivo, la optimización de palabras clave y contenidos relevantes con valor añadido. Si tiene en cuenta estos puntos, las Core Web Vitals representan una oportunidad para subir algunos puestos en las SERPs. En Timo Specht le ayudamos a mejorar sus medidas SEO y SEA de forma integral y a conseguir que su sitio web ocupe el primer puesto en Google.