Cómo optimizar un sitio web: Conoce los Core Web Vitals

Como nosotros, las páginas web tienen indicadores de su "salud" o rendimiento en detalles como capacidad de respuesta, estabilidad y tiempos de carga de sus contenidos. Estos son los Core Web Vitals o signos web vitales.

Hace pocos días, estos recibieron una nueva actualización, lo que ha generado cambios importantes en la clasificación del rendimiento de varias páginas web. Esto nos ofrece un momento valioso para profundizar en qué son los Core Web Vitals y su relación con la experiencia de los usuarios en páginas web.

Acompáñanos a explorar los conceptos fundamentales detrás de los signos web vitales, las mejores herramientas para medirlos y soluciones a los problemas más comunes que ellos reflejan. ¡Empecemos!

Explicando los Core Web Vitals

Empecemos entendiendo qué son los Core Web Vitals desde lo más básico. La definición corta es así: son un conjunto de indicadores que Google toma en cuenta para medir la experiencia de los usuarios en una web.

Hay tres indicadores principales, cada uno centrándose en algo diferente:

1. Largest Contentful Paint (LCP)

Esta primera métrica evalúa cuánto tiempo tarda en cargarse el contenido más grande y visible de una página desde el punto de vista del usuario. 

Por lo general, el contenido más grande son las imágenes que están arriba de todo, es decir, la portada, aunque también pueden ser títulos principales o videos.

• Tiempo de carga recomendado: 2.5 segundos o menos.

2. Interaction to Next Paint (INP)

También conocido simplemente como Input Delay, se trata del más reciente, ya que vino a reemplazar al First Input Delay (FID) en marzo de 2024.

Esta métrica evalúa la capacidad de respuesta de una página, midiendo la latencia de todas las interacciones de clic, toque y teclado con una página en un tiempo específico y reportando la duración más larga, ignorando valores anormales.

Por ejemplo, cuando un usuario interactúa con la página, como agregar un artículo al carrito de compras, abrir un menú de navegación móvil o comprobar un formulario de inicio de sesión, la página debe presentar un cambio en el siguiente fotograma para mostrar que la interacción fue exitosa.

• Tiempo de carga recomendado: Inferior a 200 milisegundos.

3. Cumulative Layout Shift (CLS)

Esta última métrica es la que más suele causar problemas, sobre todo si no se tienen en cuenta las buenas prácticas de WPO en el diseño de una web con elementos interactivos y animaciones.

En esencia, el CLS mide la estabilidad visual de una página web mientras se carga. Un CLS bajo significa que los elementos de la página no se mueven mucho durante la carga, lo que brinda una experiencia de usuario más agradable. 

Si tu web es completamente estática y no tiene ningún elemento en movimiento, esta métrica siempre será 0 y no deberás preocuparte.

Puntuación de carga recomendada: 0.1 segundos o menos.

Mejores herramientas para medir los Core Web Vitals

Ahora que entendemos en qué consiste cada signo web vital, es hora de saber medirlos, lo que nos ayudará a mejorarlos.

Google ofrece algunas herramientas integradas como PageSpeed Insights y el reporte de Core Web Vitals en Google Search Console, que dan una visión directa del rendimiento de tu sitio web desde la perspectiva de Google. Para usuarios principiantes, el primero es una opción más amigable y accesible.

En caso de que seas un usuario más técnico y avanzado, Lighthouse es otra herramienta poderosa que se puede ejecutar en el navegador o como parte de tu proceso de desarrollo. 

Para un análisis más detallado, GTmetrix permite pruebas más profundas y comparaciones históricas. Esta última es la mejor para usuarios novatos que quieran una interfaz que los ayude a mejorar su rendimiento web. Tristemente, no está disponible en algunos países, así que tal vez debas usar VPN.

Soluciones a problemas comunes a la carga lenta de Core Web Vitals

Tienes los conceptos clave y también las herramientas necesarias para medir y hacer seguimiento. Ahora, conozcamos los problemas que pueden perjudicar los signos web vitales de tu web y qué soluciones hay para cada uno.

Importante: Si ya has aplicado todas las buenas prácticas para mejorar el rendimiento de los Core Web Vitals, los cambios no se verán automáticamente reflejados en las herramientas de medición, ya que ellas toman los datos de los veintiocho días anteriores, así que deberías ver resultados un mes después.

Problemas de servidor

Normalmente, se debe a configuraciones incorrectas o recursos limitados en el servidor, lo que deriva en tiempos de respuesta lentos (TTFB bajo) o intermitentes por la falta de capacidad para manejar el tráfico entrante.

Para resolver esto, se debe optimizar la configuración del servidor, considerando aumentar los recursos o migrar a un servidor más potente.

Imágenes y videos de gran tamaño no optimizados

Este es el principal factor que afecta al LCP. Las buenas prácticas implican reducir su tamaño sin comprometer demasiado la calidad visual. Esto es posible con la compresión de archivos y el uso de formatos de archivo más eficientes, como WebP o AVIF.

Redirecciones múltiples

Un punto negativo de las redirecciones que muchos no saben es que aumentan la latencia en la carga de la página al requerir múltiples solicitudes al servidor antes de cargar por completo la página solicitada.

En este sentido, se deben minimizar las redirecciones y asegurarse de que estén configuradas correctamente para evitar latencias innecesarias.

JavaScript y CSS excesivos o no minificados

Este exceso de código no minificado causa un mayor tiempo de carga de la página al bloquear la renderización. Para resolver esto, se debe revisar y optimizar el código, eliminando cualquier línea innecesaria y reduciendo su tamaño en general.

Hay muchas herramientas en Internet que te ayudan con esto, así como plugins de WordPress que lo hacen automáticamente.

Caché insuficiente o mal implementada

Se debe usar una caché adecuada para los recursos estáticos y dinámicos, y configurar correctamente los encabezados de caché para aprovechar al máximo el almacenamiento en memoria del navegador por el mayor tiempo posible.

Para ello, recomendamos configurar la caché para que se refresque cada treinta días.

Anuncios o widgets de terceros

Especialmente hablando de redes publicitarias como AdSense, videos de YouTube o Vimeo incrustados, códigos de seguimiento de Analytics y Tag Manager, todos estos y más son iframes que cargan recursos externos, por lo que aumentan el tiempo total de carga.

Recomendamos aplazar y retrasar su carga lo más posible para que no afecten tanto al rendimiento general.

Falta de uso de tecnologías modernas

Afortunadamente, hoy en día hay tecnologías como HTTP/2 y servidores NVME que permiten una transferencia más eficiente de datos entre el servidor y el navegador, así que asegúrate de aprovechar estas tecnologías para mejorar el rendimiento.

Diseño web no responsivo

El diseño responsive (responsivo) o adaptativo es un tipo de diseño web dedicado a optimizar el funcionamiento de una página web en diferentes dispositivos, sean computadoras de sobremesa, laptops, smartphones o tabletas.

Cuando una web no está adaptada a móviles, se requiere la descarga de recursos adicionales al no adaptarse adecuadamente a diferentes tamaños de pantalla, lo que afecta negativamente al rendimiento general.

Los Core Web Vitals son un conjunto de métricas importantes que Google ha identificado como fundamentales para evaluar y mejorar la experiencia del usuario en la web. 

Estas métricas se centran en la velocidad, la capacidad de respuesta y la estabilidad visual de una página, lo que refleja directamente la calidad de la experiencia que ofrece a los usuarios.

Medir los Core Web Vitals es crucial para comprender cómo está funcionando una página web y dónde se pueden realizar mejoras. Para ello, recursos como PageSpeed Insights, Lighthouse, Search Console y GTmetrix ofrecen información detallada sobre estas métricas y sugieren acciones correctivas.

Sigue los consejos que te brindan estas herramientas para lograr el mejor rendimiento posible en tu web, lo que significará una mayor retención de visitantes y mejorar el rendimiento en los resultados de búsqueda de Google.