Cómo mejorar tu puntuación de Core Web Vitals

Qué son los Core Web Vitals

Los Core Web Vitals son un conjunto de métricas que Google utiliza para medir la experiencia de usuario en las páginas web. Desde 2021, estas métricas son un factor de posicionamiento en la búsqueda de Google, lo que significa que una web con mejores Core Web Vitals tiene ventaja en los resultados de búsqueda sobre una web con peores puntuaciones. Con este movimiento, Google ha dejado claro que la experiencia de usuario no es solo una cuestión de diseño, sino un parámetro técnico medible que afecta a la visibilidad en las búsquedas.

Las tres métricas principales son Largest Contentful Paint, que mide la velocidad de carga; Interaction to Next Paint, que mide la capacidad de respuesta a las acciones del usuario; y Cumulative Layout Shift, que mide la estabilidad visual de la página. Cada métrica tiene umbrales definidos para puntuaciones buenas, que necesitan mejora y deficientes. El objetivo es que el 75 por ciento de las visitas a la página tengan buenas puntuaciones en las tres métricas. Entender cada métrica y las técnicas de optimización es la clave para lograr puntuaciones altas.

Largest Contentful Paint (LCP)

Qué mide el LCP

El LCP mide el tiempo necesario para que el elemento visible más grande de la página se cargue en el viewport. Ese elemento suele ser una imagen hero, un titular grande o el póster de un vídeo. Una buena puntuación es un LCP por debajo de 2,5 segundos; entre 2,5 y 4 segundos requiere mejora; y por encima de 4 segundos es una puntuación deficiente. El LCP es la métrica más importante para la percepción de velocidad, porque los usuarios consideran que una página se ha cargado cuando ven el contenido principal, independientemente de si todos los elementos han terminado de cargarse.

Optimización de imágenes

Las imágenes son la causa más común de un LCP deficiente porque suelen ser el elemento más grande de la página. Utiliza formatos modernos como WebP o AVIF, que ofrecen la misma calidad de imagen con un tamaño de archivo entre un 25 y un 50 por ciento menor en comparación con JPEG. Establece las dimensiones de la imagen al tamaño exacto en que se va a mostrar, en lugar de enviar una imagen de 4000 píxeles para mostrarla a 800. Las imágenes responsivas con el atributo srcset permiten al navegador elegir el tamaño óptimo para cada dispositivo.

La pista preload para la imagen del LCP le indica al navegador que empiece a descargar la imagen lo antes posible, sin esperar a que el parser llegue a la etiqueta img. Añade link rel preload as image href ruta-a-la-imagen en la sección head de la página. Para las imágenes hero por encima del pliegue, utiliza el atributo fetchpriority high, que da prioridad a su descarga frente a otros recursos. Evita el lazy loading para la imagen del LCP, porque retrasa su carga.

Tiempo de respuesta del servidor

El Time to First Byte afecta directamente al LCP, porque el contenido no puede empezar a cargarse hasta que el servidor responda. Un TTFB por debajo de 200 milisegundos es el objetivo para un rendimiento óptimo. Utiliza una CDN para distribuir el contenido desde el servidor geográficamente más cercano al visitante. El cacheo del lado del servidor con Redis o Memcached elimina la necesidad de regenerar la página en cada petición. En BeoHosting, nuestros servidores con discos SSD y configuración optimizada ofrecen un TTFB bajo en toda España.

Interaction to Next Paint (INP)

Qué mide el INP

El INP sustituyó al First Input Delay en marzo de 2024 como métrica de capacidad de respuesta. Mientras que el FID medía solo el retardo del primer clic, el INP mide la capacidad de respuesta de todas las interacciones durante toda la visita a la página y tiene en cuenta la peor interacción. Una buena puntuación es un INP por debajo de 200 milisegundos. El INP mide el tiempo desde la acción del usuario, como un clic, un toque o una pulsación de tecla, hasta la siguiente actualización visual de la pantalla, lo que incluye el procesamiento del manejador de eventos, el cálculo del layout y el renderizado.

Optimización de JavaScript

Las tareas largas de JavaScript bloquean el hilo principal e impiden que el navegador responda a las interacciones del usuario. Divide las tareas largas en partes más pequeñas mediante técnicas como ceder el control con scheduler.yield o setTimeout. El code splitting con import dinámico carga solo el JavaScript necesario para la página actual en lugar de todo el bundle. El tree shaking elimina el código no utilizado del bundle final, reduciendo su tamaño y el tiempo de parseo.

Los scripts de terceros, como analítica, widgets de chat y código publicitario, son una causa habitual de un INP deficiente porque se ejecutan en el hilo principal y bloquean las interacciones del usuario. Cárgalos de forma asíncrona con los atributos async o defer y retrasa su inicialización hasta que el usuario interactúe con la página. Los Web Workers permiten ejecutar operaciones computacionalmente intensivas fuera del hilo principal, liberándolo para las interacciones del usuario.

Debouncing y throttling

Los manejadores de eventos que se ejecutan con cada pulsación de tecla, movimiento del ratón o evento de scroll pueden degradar significativamente el INP. El debouncing retrasa la ejecución de la función hasta que el usuario detiene la acción, por ejemplo 300 milisegundos después del último carácter en un campo de búsqueda. El throttling limita la frecuencia de ejecución, por ejemplo una vez cada 100 milisegundos para un manejador de scroll. Ambas técnicas reducen el número de ejecuciones de los manejadores de eventos y liberan el hilo principal para procesar las interacciones del usuario.

Cumulative Layout Shift (CLS)

Qué mide el CLS

El CLS mide la estabilidad visual de la página cuantificando cuánto se desplazan inesperadamente los elementos durante la carga. Una buena puntuación es un CLS por debajo de 0,1. El desplazamiento del layout ocurre cuando un elemento visible cambia de posición de un fotograma renderizado a otro sin que medie una acción del usuario. Las causas típicas son imágenes sin dimensiones definidas, fuentes que cargan tarde, contenido insertado dinámicamente por encima del área visible y anuncios que cargan con retraso.

Dimensiones para imágenes y vídeo

Define siempre los atributos width y height en los elementos img y video. Esto permite al navegador reservar el espacio antes de que el recurso se cargue, evitando que el contenido inferior se desplace. La propiedad CSS aspect-ratio es una alternativa moderna que calcula automáticamente las dimensiones a partir de la proporción definida. Para imágenes responsivas, utiliza CSS max-width 100 por ciento y height auto junto con los atributos HTML width y height definidos, que garantizan la proporción exacta.

Estrategia de carga de fuentes

Las fuentes web que cargan tarde pueden provocar efectos FOIT o FOUT que desplazan el contenido. Font-display swap muestra de inmediato la fuente de reserva y la sustituye por la fuente web cuando se carga, pero esta sustitución puede provocar un desplazamiento del layout si las fuentes difieren mucho en dimensiones. La pista preload para las fuentes críticas acelera su carga. El descriptor size-adjust en la declaración font-face alinea las dimensiones de la fuente de reserva con las de la fuente web, minimizando el desplazamiento en la sustitución.

Contenido dinámico

Los anuncios, los banners de cookies, las notificaciones y el contenido insertado dinámicamente son causas habituales de CLS porque ocupan un espacio que desplaza el resto de la página. Reserva espacio para los anuncios con la propiedad CSS min-height incluso antes de que cargue el código del anuncio. Coloca el banner de cookies en la parte superior o inferior de la pantalla con posición fija para que no desplace el contenido inferior. Para el contenido cargado de forma asíncrona, como sliders o scroll infinito, utiliza placeholders esqueleto que ocupen el mismo espacio que el contenido final.

Herramientas de medición

Datos de laboratorio

Google Lighthouse en Chrome DevTools ofrece una medición de laboratorio de los Core Web Vitals en tu ordenador. PageSpeed Insights combina datos de laboratorio y de campo y da recomendaciones concretas de optimización. WebPageTest ofrece una visión más profunda con diagramas en cascada, una visualización filmstrip de la carga y la posibilidad de probar desde distintas ubicaciones y dispositivos. Lighthouse CI permite medir el rendimiento de forma automática en cada deploy como parte del pipeline de CI/CD.

Datos de campo

El Chrome User Experience Report ofrece datos reales de Core Web Vitals de usuarios reales del navegador Chrome. Google Search Console muestra un informe de Core Web Vitals de tu web con la identificación de las URL que necesitan mejora. La biblioteca JavaScript Web Vitals de Google permite recopilar métricas de tus visitantes y enviarlas a un sistema de analítica. Los datos de campo son más importantes que los de laboratorio porque reflejan la experiencia real de los usuarios en distintos dispositivos y redes.

Impacto del hosting en los Core Web Vitals

Rendimiento del servidor

La calidad del hosting afecta directamente al TTFB y, en consecuencia, al LCP. Un hosting compartido con servidores sobrecargados puede dar como resultado un TTFB superior a un segundo, lo que prácticamente hace imposible lograr un buen LCP. Discos SSD, RAM suficiente y una configuración de servidor optimizada son el mínimo para un buen rendimiento. La versión 8.2 de PHP o más reciente con OPcache acelera significativamente la ejecución del código PHP en comparación con versiones anteriores.

En BeoHosting, nuestros paquetes de hosting optimizados están ajustados para los Core Web Vitals, con discos NVMe SSD, soporte para HTTP/2 y HTTP/3, compresión Brotli y cacheo a nivel de servidor. El servidor web LiteSpeed que utilizamos ofrece un rendimiento superior en comparación con Apache, especialmente para webs de WordPress con el plugin LiteSpeed Cache. Nuestra infraestructura, en un centro de datos tier 3+ en Fráncfort/Ámsterdam, garantiza una latencia baja para los visitantes locales, mejorando directamente las métricas de TTFB y LCP.

Conclusión

La optimización de los Core Web Vitals requiere un enfoque sistemático, con foco en las imágenes y el servidor para el LCP, la optimización de JavaScript para el INP y la estabilidad visual para el CLS. Utiliza herramientas de medición para identificar las páginas problemáticas y hacer seguimiento del progreso después de cada optimización. La combinación de un hosting de calidad, un código optimizado y un cacheo configurado correctamente puede mejorar significativamente las tres métricas y garantizar mejores posiciones en la búsqueda de Google.