¿Qué son los Core Web Vitals y por qué son importantes?
Cada día crecen las expectativas de los usuarios de internet respecto a un sitio web. Los visitantes ya no solo buscan contenido de calidad; también quieren páginas que se abran al instante, que respondan a sus clics sin demora y que no se muevan de forma inesperada. Para basar la experiencia del usuario en datos concretos, Google puso en marcha la iniciativa Core Web Vitals (Métricas web esenciales). Estas métricas son indicadores de rendimiento fundamentales que miden cómo interactúan los usuarios reales con sus páginas (Real User Monitoring, RUM).
En lo que respecta al posicionamiento en buscadores (SEO), los Core Web Vitals son uno de los pilares de las señales de experiencia de página de Google. Una velocidad de sitio bien optimizada hace que los visitantes permanezcan más tiempo en el sitio, reduce la tasa de rebote y aumenta directamente las conversiones. Si utiliza un sistema de gestión de contenidos dinámico como WordPress, las consultas a la base de datos, los scripts externos y los elementos multimedia pueden provocar una pérdida de rendimiento con el tiempo. Por eso es necesario conocer bien estas métricas y aplicar los pasos de optimización adecuados.
Métricas básicas: qué significan LCP, CLS e INP
Al medir la experiencia del usuario, Google se centra en tres aspectos fundamentales: la velocidad de carga, la estabilidad visual y la capacidad de respuesta a la interacción. Estos tres pilares se miden actualmente con las métricas LCP, CLS e INP.
1. Largest Contentful Paint (LCP): velocidad de carga percibida
LCP mide cuánto tarda en mostrarse en pantalla el contenido principal de la página (generalmente, una imagen grande, la portada de un video o un bloque de título amplio). Representa el momento en que el visitante percibe que la página se ha “cargado”. Para una buena experiencia de usuario, el objetivo es que el LCP sea de 2.5 segundos o menos. Los tiempos de respuesta lentos del servidor (TTFB), los archivos JavaScript y CSS que bloquean el renderizado y las imágenes enormes sin optimizar son las principales causas de una mala puntuación de LCP.
2. Cumulative Layout Shift (CLS): estabilidad visual
¿Alguna vez ha estado a punto de hacer clic en un botón y el contenido se ha desplazado de repente hacia abajo, haciéndole pulsar un enlace que no quería? Esa molesta situación es lo que mide CLS. CLS calcula los desplazamientos inesperados de los elementos durante la carga de la página. El valor ideal de CLS debe ser inferior a 0.1. Las imágenes sin dimensiones especificadas, las áreas publicitarias que se cargan más tarde y los widgets externos inyectados dinámicamente son las fuentes habituales de los desplazamientos visuales.
3. Interaction to Next Paint (INP): velocidad de interacción
INP sustituye a la métrica FID (First Input Delay) y evalúa cuánto tarda la página en responder visualmente a cada clic, toque o pulsación de tecla del usuario. No solo examina la primera interacción, sino el retraso general de todas las acciones que el usuario realiza en la página. Para una buena puntuación de INP, el retraso de la interacción debe quedar por debajo de 200 milisegundos. Las operaciones pesadas de JavaScript y los comandos que bloquean el hilo principal (main thread) afectan directamente de forma negativa al valor de INP.
| Métrica | Valor objetivo (bueno) | Necesita mejorar | Deficiente |
|---|---|---|---|
| LCP | ≤ 2.5 segundos | 2.5 - 4.0 segundos | > 4.0 segundos |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
| INP | ≤ 200 ms | 200 - 500 ms | > 500 ms |
Cómo mejorar los Core Web Vitals en sitios WordPress
En los sitios basados en WordPress, para eliminar la deuda técnica y poner en verde las puntuaciones de velocidad hay que avanzar paso a paso. Con un mecanismo de caché bien configurado y una estructura de código ligera, los resultados se observan en poco tiempo.
1. Tácticas para mejorar la puntuación de LCP
En la optimización de LCP, la primera prioridad es que la imagen principal de la parte superior de la página (Hero image) se cargue rápido. A este elemento nunca debe aplicarse “lazy load” (carga diferida); al contrario, conviene pedir al navegador que la cargue con prioridad mediante el atributo fetchpriority="high". Además:
- Prefiera formatos de imagen de nueva generación, como WebP o AVIF.
- Convierta en línea (inline) los archivos de CSS críticos para reducir las solicitudes bloqueantes al inicio de la página.
- Utilice un plugin de caché de calidad y una caché de objetos, como Redis o Memcached, para reducir al mínimo el tiempo de respuesta del servidor.
- Configure una red de distribución de contenidos (CDN) para que los recursos lleguen a los usuarios desde el servidor más cercano.
2. Métodos para acercar CLS a cero
Evitar los desplazamientos repentinos en el diseño de la página requiere una disciplina de programación total. Puede aplicar estas buenas prácticas:
- Defina siempre los valores
widthyheighten todas las etiquetas<img>y<video>. Así el navegador reserva el espacio correspondiente antes de descargar el elemento. - Para las áreas publicitarias o los banners dinámicos, defina de antemano con CSS áreas de altura mínima fija (min-height).
- Para evitar que el texto desaparezca o cambie de tamaño mientras se cargan las fuentes web, use la regla CSS
font-display: swap;.
3. Optimización de JavaScript para reducir INP
En los sitios WordPress, la mejora de INP suele ser el mayor reto, porque los temas y los plugins ejecutan con frecuencia archivos JavaScript pesados. Para que la interacción con la página sea fluida:
- Elimine los archivos JavaScript que no utiliza o haga que se carguen solo en las páginas que los necesitan.
- Retrase los contadores, las animaciones y los códigos de seguimiento (tracking scripts) innecesarios (delay JS).
- Asegúrese de que su tema esté programado de forma moderna y limpia. Elegir soluciones de plugins y temas de WordPress adecuadas a sus necesidades y con un rendimiento probado le permite mantener los estándares de desarrollo y liberar su sitio de una carga excesiva de plugins.
Herramientas para medir y seguir los Core Web Vitals
Al optimizar, es fundamental basarse en datos reales. Las pruebas puntuales en el navegador pueden diferir de los datos de usuarios reales. Para hacer el seguimiento puede utilizar estas herramientas:
Google PageSpeed Insights: Realiza pruebas de simulación en un entorno de laboratorio y muestra los datos reales de usuarios del Informe de experiencia de usuario de Chrome (CrUX) de los últimos 28 días.
Google Search Console: Gracias a la pestaña “Métricas web esenciales” del menú lateral, enumera de forma conjunta qué páginas están en mal estado y cuáles están bien.
Extensión Web Vitals para Chrome: Le permite ver en directo los valores de LCP, CLS e INP mientras navega por la página.
Preguntas frecuentes
¿Los Core Web Vitals son directamente un factor de posicionamiento de Google?
Sí, las métricas Core Web Vitals forman parte oficial del algoritmo de experiencia de página de Google. Entre dos contenidos de calidad muy similar, Google tiende a situar en los primeros puestos la página que técnicamente tiene un mejor rendimiento y no hace esperar al usuario.
¿Qué mide exactamente INP, la métrica que sustituye a FID?
La antigua métrica FID se centraba solo en el retraso del primer clic de la página. INP, que se volvió permanente en marzo de 2024, mide el retraso promedio de todas las interacciones que el usuario realiza durante su visita (clics, aperturas de menús, filtrados).
¿Por qué las puntuaciones de Core Web Vitals son distintas en móvil y en escritorio?
Los dispositivos móviles suelen tener una potencia de procesamiento más limitada, y las conexiones de red móviles generan una latencia (latency) mayor que la de la fibra o el cable. Por eso el procesamiento de JavaScript tarda más en los móviles y, en general, sus puntuaciones son más bajas que las de escritorio.
