¿Qué son las Core Web Vitals?

Las Core Web Vitals son un conjunto de métricas establecidas por Google para mejorar la experiencia del usuario en las páginas web. En otras palabras, son factores que el motor de búsqueda considera para puntuar la experiencia de la página, que corresponde a diferentes facetas de la misma.

Las Core Web Vitals intentan responder a tres preguntas:

• ¿Qué tan rápido se carga una página?
• ¿Cuánto tiempo tarda un sitio web en volverse interactivo?
• ¿Y en estabilizarse?

Bueno, Google ha indicado que las Core Web Vitals evolucionarán con el tiempo. Pero por el momento, se centra en tres aspectos que responden a las preguntas anteriores.

Largest Content Paint (LCP)

LCP se refiere a el tiempo que tarda en cargarse el elemento de contenido más grande que el usuario puede ver. Google ha señalado que los elementos dispuestos en lo que se conoce como “above the fold” deben estar disponibles rápidamente y ser legibles.

Los elementos que se muestran al usuario una vez que hace clic en la pantalla no afectan al LCP. Cuando hablamos del elemento de contenido más grande, podemos referirnos a una imagen o a un bloque de texto.

Para Google, el tiempo máximo que debería tardar en cargarse el LCP para proporcionar una buena experiencia de usuario sería menos de 2.5 segundos.

First Input Delay (FID)

El FID se refiere a la interactividad, es decir, cuánto tarda la página en responder cuando el usuario interactúa con alguno de los elementos que contiene. En otras palabras, es la velocidad con la que el navegador actúa y produce un resultado desde el momento en que un usuario hace clic.

El buscador considera que un buen FID debería ser inferior a 100 milisegundos. Se necesitan mejoras de 100 a 300 milisegundos, y un valor superior a 300 milisegundos podría ser alarmante.

Cumulative Layout Shift (CLS)

Esta métrica se refiere a la carga de elementos que modifican la visualización de la página a medida que reacciona. Lo que se busca en este caso es asegurar que el contenido en la pantalla sea estable y no cambie a medida que se cargan otros recursos.

A Google le resulta (y con razón) extremadamente molesto cuando algunos elementos de la página se cargan y hacen que otros se muevan. El resultado es, a menudo, que el usuario termina haciendo clic en un sitio que no quería. Y el buscador considera que un buen CLS debe ser inferior a 0,1 segundos.

¿Por qué son importantes?

Ya en mayo de 2020, Google nos avisó: llegaría el momento en que diferentes señales que miden la experiencia del usuario en la página se tendrían en cuenta para fines de clasificación en las búsquedas. Esto tendrá un impacto enorme en el SEO.

Sin entrar en detalles, empezamos a oír hablar de las Core Web Vitals, que ya son fundamentales por una razón: porque Google anunció en noviembre de 2020 que, para mayo de 2021, serían un factor de posicionamiento sustancial.

Google había prometido anunciar con seis meses de antelación la actualización de la experiencia de la página y lo hizo en su blog oficial el 10 de noviembre del año pasado.

Por lo tanto, aquellas páginas que no cumplan con los valores considerados apropiados en estas métricas lo tendrán difícil para aparecer en las primeras posiciones de la SERP.

En este contexto, el gigante de las búsquedas recomienda prepararse con antelación para cumplir con estas métricas en tu sitio. Debes estar listo cuando llegue el momento de que el algoritmo de Google las aplique.

Las Core Web Vitals y otras métricas pronto definirán la experiencia en la página y jugarán un papel decisivo en el posicionamiento SEO.

¿Pero son importantes las Core Web Vitals solo porque Google las considerará un factor de ranking en un futuro próximo? En realidad, si el buscador ha tomado esta decisión, es porque estos aspectos son fundamentales. Hay tres razones principales por las que son esenciales:

• Mejoran el engagement y la experiencia del usuario.
• Ayudan a los editores a evaluar el rendimiento de una página.
• Dan continuidad a la experiencia de la página en diferentes dispositivos: PCs, móviles y tablets.

¿Cómo medir las Core Web Vitals?

Puedes medir estas métricas a través del informe de Core Web Vitals de Google Search Console (GSC), que indica qué URLs necesitan mejoras. A partir de ahí, puedes investigar qué requiere tu atención y deberías optimizar.

Ahora, con FandangoSEO, también puedes monitorizar las Core Web Vitals. Detecta rápidamente cualquier área de tu sitio que necesite mejoras. Una vez que abras tu proyecto, ve a Page Info > Core Web Vitals para usar esta función.

Para acceder al Informe de Experiencia del Usuario en Google Chrome, inicia sesión en GSC. A la izquierda, hay una barra que contiene una sección llamada "Mejoras". Una vez allí, haz clic en "Core Web Vitals". Verás algunos gráficos en los que se muestra la opción "Abrir informe". Ahí puedes realizar un análisis en profundidad de estas métricas.

Los informes de GSC están vinculados a los informes de Page Speed Insights. Page Speed Insights, a su vez, está impulsado por Lighthouse, que consiste en una serie de métricas de rendimiento. Para algunas personas, usarlos puede ser un poco complicado porque requiere conocimientos técnicos.

¿Cómo optimizar las Core Web Vitals?

Una vez que analices el rendimiento de tus web vitals, es hora de mejorarlo. Veamos cómo puedes optimizar tus Core Web Vitals en detalle.

Optimización de Largest Contentful Paint

Primero, para optimizar el LCP, revisa las causas más comunes que pueden llevar a un mal resultado. Así sabrás qué hacer en cada caso.

Tiempos de respuesta lentos del servidor

Para mejorar el tiempo de respuesta de tu servidor, puedes tomar las siguientes medidas.

• Optimiza tu servidor
• Usa una CDN
• Aplica el almacenamiento en caché del servidor
• Sirve páginas HTML completas o parciales con la caché como prioridad

JavaScript y CSS que bloquean el renderizado

El JavaScript y CSS que bloquean el renderizado impiden que los sitios muestren una página antes de cargar estos archivos. Para solucionar este problema, te recomendamos minificar el CSS. Además, aplaza el CSS no crítico e incluye el CSS crítico.

Tiempos de carga lentos de los recursos

• Para reducir el tiempo de carga de los recursos, puedes tomar las siguientes medidas
• Optimiza y comprime las imágenes
• Precarga recursos importantes
• Comprime archivos de texto
• Usa un service worker

Renderizado del lado del cliente

Si utilizas un gran paquete de Javascript sin optimizarlo en un sitio renderizado principalmente en el lado del cliente, dañarás el rendimiento de tu LCP. Para evitar este problema, minifica Javascript, aplaza el JavaScript no utilizado y minimiza los polyfills no utilizados.

Optimización del First Input Delay

Un FID deficiente suele ser el resultado de una fuerte ejecución de JavaScript. En otras palabras, debes optimizar cómo JavaScript analiza, compila y ejecuta en tu página. Para ello, puedes tomar las siguientes medidas.

• Divide las tareas largas en tareas asíncronas más pequeñas
• Optimiza la preparación para la interacción, como la carga progresiva de código
• Investiga el código de terceros y prioriza la carga
• Usa un web worker (Comlink, Workway, Workerize)
• Reduce el tiempo de ejecución de JS

Optimización del Cumulative Layout Shift

Veamos cuatro elementos que tienen más probabilidades de dañar tu rendimiento de CLS. Revísalos todos y toma las medidas necesarias para mejorar tu CLS.

• Anuncios, elementos incrustados e iframes sin dimensiones especificadas: Siempre debes reservar espacio para anuncios, elementos incrustados e iframes. No coloques anuncios cerca de la parte superior de la ventana gráfica.
• Imágenes sin dimensiones especificadas: Asegúrate de incluir atributos de tamaño de ancho y alto en tus elementos de imagen y video.
• Contenido inyectado dinámicamente: Recuerda evitar insertar contenido nuevo por encima del contenido existente.
• Web Fonts that cause FOIT/FOUT: Use font-display, font Loading API, or <link rel=” preload”> for key web fonts.

Otras Web Vitals que también debes tener en cuenta

Hemos visto que las Core Web Vitals serán un factor de posicionamiento esencial a partir de mayo de este año. Sin embargo, no serán las únicas Web Vitals que Google tendrá en cuenta. En particular, no debes perder de vista las siguientes métricas:

Reduce el Time to First Byte (TTFB)

El TTFB es el tiempo que transcurre desde que el navegador solicita la primera información de un servidor hasta que la recibe. Esto puede retrasar el proceso del navegador de mostrar una página. Un retraso entre la solicitud del navegador y la respuesta del servidor aumenta el tiempo TTFB.

First Contentful Paint (FCP)

Esta métrica se refiere al tiempo desde que la web comienza a cargarse hasta que se muestra cualquier parte del contenido web en la pantalla (texto, imágenes, etc.). La diferencia entre el FCP y el LCP es que este último mide el tiempo que tarda en cargarse el contenido principal de la página, no solo cualquier contenido. Para optimizar tu FCP, debes acelerar la carga de tu fuente. Para ello, precarga las fuentes web para mejorar la velocidad de carga.

Total Blocking Time (TBT)

Mide la capacidad de respuesta de la página al cargarse cuando el usuario entra. En otras palabras, se refiere al tiempo total que el sitio web ha estado bloqueado, impidiendo que el usuario interactúe con él.

Tiempo de Interactividad (TTI)

Esta métrica mide el tiempo que transcurre desde que la página empieza a cargarse hasta que se cargan sus recursos secundarios más importantes. Es cuando la página puede responder de forma rápida y fiable a la interacción del usuario.