Núcleos vitales de la web: Qué son y cómo optimizarlas

Anunciadas por Google en mayo de 2020, las Core Web Vitals son métricas específicas que evalúan la calidad de la experiencia del usuario en un sitio web.

Estas señales web, consideradas esenciales, han cobrado gran importancia para el SEO después de que Google declarara oficialmente que, a partir de 2021, se convertirían en factores de clasificación.

Aunque ya ha pasado algún tiempo desde entonces, muchos sitios web adolecen de falta de rendimiento.

En este artículo veremos juntos qué son los Core Web Vitals de Google, cómo influyen en el SEO y por qué merece la pena mejorar el rendimiento de su sitio.

¿Qué son los Core Web Vitals?

CoreWeb Vitals es un conjunto de métricas que evalúan la experiencia del usuario en un sitio web en términos de rendimiento, estabilidad y capacidad de respuesta.

Se definen como esenciales y se han convertido en importantes no sólo para la UX, sino también para el SEO.

Y, aunque existen otras señales de experiencia de usuario, estas se consideran los parámetros esenciales que debe respetar un sitio de calidad.

En concreto, son:

• Mayor Dolor de Contenido (LCP)

• Primer retraso de entrada (FID)

• Desplazamiento acumulativo del diseño (CLS)

Analicémoslos uno por uno.

Mayor dolor de contenido (LCP)

Largest Contentful Pain (LCP) es la primera de las métricas de Core Web Vitals y mide la velocidad de carga del contenido identificado como principal (en otras palabras, el mayor en términos de tamaño en bytes) dentro de la ventana gráfica.

Este parámetro se calcula a partir de la carga de la primera página y no tiene en cuenta todos los elementos, sino que se centra únicamente en imágenes, vídeos o bloques de texto.

Del mismo modo, el valor no se calcula en toda la página, sino sólo en la parte visible al cargar, descartando los elementos recortados u ocultos.

También es bueno saber que el tamaño de las imágenes se calcula sobre el valor más bajo entre el intrínseco y el visible.

Tener una puntuación LCP baja indica que la página se carga rápidamente y ofrece una experiencia de usuario positiva.

El límite máximo considerado positivo por Google es de 2,5 segundos, esto significa que el contenido más impactante de tu sitio tendrá que cargarse dentro de este límite.

De lo contrario, cuanto mayor sea el tiempo de carga, mayor será su puntuación LCP. Por eso es esencial mejorar la velocidad de carga de su página.

Retraso en la primera entrada (FID)

First Input Delay (FID) es la segunda métrica de Core Web Vitals y mide la capacidad de respuesta de una página web.

Google sugiere que es importante causar una buena primera impresión. Pero para ello no hay que fiarse sólo de la apariencia, sino también de los tiempos de reacción.

Desde hace algún tiempo, Google calcula la puntuación First Contentful Paint (FCP) para medir el tiempo de carga del primer contenido, considerado significativo, en la pantalla.

Hoy en día, sin embargo, parece que este valor ya no es suficiente, por lo que se introdujo el FID para medir cuánto tarda un sitio web en responder a la interacción inicial del usuario, como un clic en un botón o un enlace.

Una puntuación FID baja indica que la página responde bien y ofrece una experiencia de usuario fluida.

En caso contrario, como hemos visto para la métrica LCP, cuanto más tiempo se tarda en responder a la interacción, más aumenta el valor.

Desplazamiento acumulativo del diseño (CLS)

CumulativeLayout Sh ift (CLS) es la última de las métricas de Core Web Vitals y mide la estabilidad visual de una página web.

En otras palabras, evalúa cuántos elementos de la página se mueven inesperadamente durante la carga. Este problema suele deberse a tiempos de renderizado de la página bastante largos, especialmente cuando se cargan recursos externos y no se definen de antemano los espacios necesarios.

Obtener una puntuación CLS baja significa no sólo que la página es estable y puede beneficiarse de una puntuación de clasificación más alta, sino también que ofrece una experiencia de usuario agradable y, por tanto, tendrá más probabilidades de conversión.

De hecho, una puntuación alta puede ser síntoma de graves problemas de usabilidad que van mucho más allá del SEO y, por experiencia personal, te aconsejo que analices esta métrica con más detenimiento.

¿Son realmente esenciales las Core Web Vitals?

Respuesta corta: sí.

Pero ahora sé lo que estás pensando.

"Si las web vitales son tan importantes, ¿por qué hay tantos sitios de éxito que tienen puntuaciones muy altas?

(Recuerde que cuando hablamos de Web Vitals, una puntuación alta equivale a un valor negativo).

Pues bien, el rendimiento es sólo uno de los muchos factores de clasificación, y desde luego, para el SEO, ni siquiera el más importante.

El contenido seguirá teniendo una posición predominante sobre la velocidad de carga y también es natural que así sea.

Dicho esto, sin embargo, vale la pena recordar cómo las estadísticas en la mano, mejorar el rendimiento de un sitio aumenta proporcionalmente las posibilidades de que este sitio genera compromiso, aumenta la retención de usuarios, y reduce la tasa de rebote, todos los factores que pueden contribuir a un mejor posicionamiento en la búsqueda de resultados y el aumento de las conversiones.

Optimización básica de la web

El primer paso, esencial para mejorar el rendimiento de Core Web Vitals, es comprender por dónde empezar y qué hacer.

Es un proceso que también puede parecer largo y complejo. Pero, con unas pocas intervenciones específicas, puede conseguir mejoras en términos de velocidad de carga, capacidad de respuesta y estabilidad.

Para ello, puedes aprovechar una de las muchas herramientas disponibles en línea. Mi consejo es que utilices más de una para comparar los resultados (al fin y al cabo, no dejan de ser herramientas y el error de evaluación siempre está a la vuelta de la esquina).

Hay muchas opciones disponibles, basta pensar en las conocidas GTMetrix, Pingdom Tools y WebPageTest.org. Todas ellas son muy útiles y capaces de ofrecerte un punto de vista único, basado en el algoritmo de análisis propio.

Independientemente de la solución que elija, seguirá teniendo que lidiar con la opinión de Google sobre su sitio, por lo que el análisis con PageSpeedInsight se convierte en esencial para su actividad de optimización.

Esta herramienta es especialmente útil cuando se desea probar un sitio en desarrollo, quizás todavía local o bloqueado al acceso externo.

Por último, puedes echar un vistazo a la pestaña "Experiencia" de Google Search Console, que te proporcionará una visión más amplia de tu sitio web y no sólo de una página.

Una vez que haya identificado la herramienta de análisis que más le conviene, tenga en cuenta que cada sitio necesita una actividad diferente y que, por tanto, no es posible definir de antemano cómo debe actuar.

Sin embargo, hay algunos casos que son comunes a casi todos los sitios y que, por lo tanto, independientemente de la tecnología utilizada, deben analizarse siempre.

Estas son las principales áreas en las que debe centrarse la optimización de Core Web Vitals:

• Imágenes

• CSS y JavaScript

• Fuentes

Imágenes

Algunas de las prácticas de optimización más importantes para las imágenes incluyen:

• Asegúrate de que siempre se cargan cuando es necesario utilizando una tecnología llamada lazy-loading. De esta forma evitará que todas las imágenes de su página se carguen sin motivo en la primera fase de renderizado, incluso cuando aún no son visibles en la ventana gráfica.

• Es esencial que su sitio pueda proporcionar imágenes en formatos comprimidos y modernos, para ofrecer la misma experiencia a los usuarios pero con un tiempo de carga significativamente menor. Los formatos más populares son WebP y Avif, pero tenga en cuenta que no todos los navegadores admiten ambas tecnologías. Por lo tanto, tendrá que asegurarse de que se ofrecen versiones alternativas para los navegadores más antiguos. Siempre puede consultar caniuse.com en cualquier momento para saber qué navegadores (y qué versiones) admiten tecnologías específicas.

• Al igual que con otros elementos HTML, es una buena práctica hacer explícitos los valores de longitud y anchura de las imágenes para evitar en lo posible un aumento del CLS.

CSS y JavaScript

Siga estos consejos sobre CSS y JavaScript:

• Asegúrate de minimizar al máximo los archivos para reducir su tamaño.

• Pruebe la combinación de archivos para determinar si se aceleran los tiempos de carga manteniendo la funcionalidad.

• Extraiga el CSS crítico de las hojas de estilo y sírvalo de forma prioritaria. Existen muchas herramientas que pueden ayudarte a identificar la porción de código utilizada a partir de la utilizada. Alternativamente, puedes aprovechar la función Cobertura presente en el Inspector de Chrome.

• Aplaza la ejecución de scripts innecesarios tanto como sea posible utilizando los comandos delay o defer o simplemente moviéndolos al pie de página.

• Precarga los recursos críticos utilizando los comandos preload, prefetch o pre-connect según sea necesario.

Fuentes

Las fuentes también son un factor crucial para mejorar el rendimiento:

• Si quieres optimizar (y también cumplir plenamente con la GDPR) debes alojar tus fuentes localmente (especialmente si tu sitio utiliza fuentes de Google).

• Prefiera las fuentes variables a las estáticas para tener más funcionalidad con menos tiempo de carga.

• Asegúrese de que los textos estén siempre visibles incluso antes de que se carguen las fuentes utilizando la función CSS de visualización de fuentes.

Hay docenas de otras micro-optimizaciones, obviamente, pero si te centras en estos puntos, ¡ya has superado el 95% del trabajo!

Core Web Vitals: Una próxima actualización

Google se compromete constantemente a mejorar sus algoritmos y la experiencia en la web.

En este sentido, se ha anunciado una noticia importante.

Veamos juntos de qué se trata.

Adiós al FID y bienvenidos al INP

A partir de marzo de 2024, uno de los Core Web Vitals será sustituido por un nuevo parámetro.

En efecto, el Primer Retraso de Entrada será sustituido por la Interacción a la Próxima Pintura (INP).

Conclusión

Las Core Web Vitals de Google se han convertido en un parámetro fundamental para el SEO y la experiencia del usuario.

Supervisar y optimizar sus métricas CLS, LCP y FID le ayudará a garantizar que su sitio web se clasifique bien en los resultados de búsqueda y ofrezca una experiencia de usuario de calidad.

Utilice Search Console y otras herramientas de análisis para identificar cualquier problema e implantar soluciones que le ayuden a mejorar el rendimiento de su sitio web y, en última instancia, su posición en los resultados de búsqueda.