¿Qué son los Core Web Vitals?

Los Core Web Vitals son un conjunto de métricas específicas y medibles que Google utiliza para evaluar la experiencia de usuario real de una página web. Se centran en tres aspectos fundamentales de cómo se siente una página para los visitantes: cómo de rápido aparece el contenido principal, con qué rapidez responde la página a la interacción y cómo de estable es el diseño durante la carga. Google utiliza los Core Web Vitals como una señal oficial de posicionamiento en los resultados de búsqueda desde junio de 2021, lo que significa que estas métricas influyen directamente en dónde aparece tu sitio WordPress en las búsquedas.

Las tres Core Web Vitals explicadas

Cada Core Web Vital mide una dimensión diferente de la experiencia de usuario, y cada una tiene un umbral específico que define un rendimiento "bueno", "necesita mejorar" y "deficiente".

Largest Contentful Paint (LCP)

LCP mide cuánto tarda en renderizarse por completo en pantalla el elemento de contenido visible más grande. Suele ser una imagen hero, un bloque grande de texto o un póster de vídeo. El reloj empieza cuando el usuario navega por primera vez a la página y se detiene cuando ese elemento más grande termina de pintarse.

• Bueno: 2,5 segundos o menos
• Necesita mejorar: entre 2,5 y 4,0 segundos
• Deficiente: más de 4,0 segundos

LCP es la métrica que refleja más directamente la velocidad de carga percibida. Una página puede tener un Time to First Byte (TTFB) rápido pero aun así un LCP deficiente si el elemento más grande tarda mucho en renderizarse debido a imágenes grandes, recursos que bloquean el renderizado o respuestas lentas del servidor para activos críticos.

Interaction to Next Paint (INP)

INP sustituyó a First Input Delay (FID) como Core Web Vital en marzo de 2024. Mientras que FID solo medía el retraso de la primera interacción, INP mide la capacidad de respuesta de todas las interacciones a lo largo del ciclo de vida de la página. Registra clics, toques y entradas de teclado, midiendo el tiempo desde la interacción hasta que el navegador realmente actualiza la pantalla. El valor final de INP suele ser la peor interacción observada (con algunos ajustes para valores atípicos).

• Bueno: 200 milisegundos o menos
• Necesita mejorar: entre 200 y 500 milisegundos
• Deficiente: más de 500 milisegundos

INP es una métrica más difícil de optimizar que FID porque cubre cada interacción, no solo la primera. Una página puede responder rápido al primer clic pero volverse lenta más tarde cuando se está ejecutando JavaScript pesado.

Cumulative Layout Shift (CLS)

CLS mide cuánto se mueve inesperadamente el contenido visible mientras se carga la página y durante la sesión del usuario. Cada vez que un elemento cambia de posición sin que el usuario lo provoque (por ejemplo, haciendo clic en un botón), ese cambio contribuye a la puntuación de CLS. La puntuación se calcula multiplicando la fracción de impacto (cuánto de la zona visible se ve afectada) por la fracción de distancia (cuánto se ha movido el elemento).

• Bueno: 0,1 o menos
• Necesita mejorar: entre 0,1 y 0,25
• Deficiente: más de 0,25

CLS es especialmente frustrante para los usuarios. Imagina que intentas hacer clic en un botón pero, justo antes de que aterrice tu clic, se carga un anuncio encima y empuja el botón hacia abajo. Acabas haciendo clic en el anuncio. Eso es exactamente el tipo de experiencia que mide CLS.

Cómo usa Google los Core Web Vitals como señal de posicionamiento

Los Core Web Vitals forman parte de las señales más amplias de "experiencia de página" de Google, que también incluyen la compatibilidad con móviles, HTTPS y la ausencia de intersticiales intrusivos. Google evalúa los Core Web Vitals utilizando datos de usuarios reales del Chrome User Experience Report (CrUX). Esto significa que Google usa datos reales de campo de usuarios reales de Chrome que visitan tu sitio, no datos de laboratorio de una única prueba. El impacto en el posicionamiento se aplica tanto a los resultados de búsqueda en móvil como en escritorio. Aunque la relevancia del contenido sigue siendo el factor de posicionamiento más fuerte, los Core Web Vitals pueden ser el desempate entre páginas con calidad de contenido similar.

Medición de los Core Web Vitals

Hay varias herramientas para medir los Core Web Vitals, y se dividen en dos categorías: datos de campo (mediciones de usuarios reales) y datos de laboratorio (pruebas simuladas).

• PageSpeed Insights: la herramienta de Google que muestra tanto datos de campo (de CrUX) como datos de laboratorio (de Lighthouse). La sección de datos de campo muestra las puntuaciones reales de Core Web Vitals basadas en usuarios reales durante los últimos 28 días. Esta es la sección más importante porque refleja lo que Google usa para el posicionamiento.
• Google Search Console: el informe de Core Web Vitals agrupa tus URLs por estado (bueno, necesita mejorar, deficiente) basándose en datos de usuarios reales. Te ayuda a identificar patrones en tu sitio en lugar de comprobar páginas individuales.
• Chrome User Experience Report (CrUX): el conjunto de datos en bruto que alimenta PageSpeed Insights y Search Console. Puedes consultarlo directamente a través de la API CrUX o BigQuery para análisis personalizados.
• Lighthouse: una herramienta de pruebas de laboratorio integrada en Chrome DevTools. Simula cargas de página en una conexión limitada e informa de LCP y CLS (INP requiere interacción real del usuario y no puede medirse de forma fiable en condiciones de laboratorio). Útil para depurar pero no refleja la experiencia real del usuario.
• Extensión Web Vitals para Chrome: una extensión del navegador que muestra puntuaciones de Core Web Vitals en tiempo real mientras navegas, facilitando la detección de problemas durante el desarrollo y las pruebas.

Datos de usuarios reales frente a datos de laboratorio

Esta distinción importa más de lo que muchos propietarios de sitios creen. Los datos de laboratorio (de Lighthouse o herramientas similares) simulan una carga de página en condiciones controladas: un dispositivo, velocidad de red y ubicación específicas. Es útil para depurar e identificar problemas técnicos, pero no refleja lo que experimentan los visitantes reales. Los datos de usuarios reales (datos de campo) provienen de usuarios reales de Chrome que visitan tu sitio. Capturan toda la variedad de dispositivos, velocidades de red y ubicaciones geográficas que utilizan tus visitantes. El algoritmo de posicionamiento de Google usa datos de campo, no de laboratorio. Una página puede puntuar 95 en Lighthouse pero aun así tener Core Web Vitals deficientes en el campo porque los usuarios reales con dispositivos más lentos tienen una experiencia diferente.

Problemas comunes de WordPress con LCP

Los sitios WordPress tienen con frecuencia dificultades con LCP debido a varios problemas comunes:

• Imágenes hero grandes y sin optimizar: una imagen hero de 3 MB tarda mucho más en descargarse y renderizarse que una versión WebP correctamente comprimida de 200 KB. Comprime siempre las imágenes, usa formatos modernos (WebP o AVIF) y sirve imágenes con un tamaño adecuado a la pantalla del visitante.
• CSS y JavaScript que bloquean el renderizado: cuando el navegador encuentra archivos CSS o JavaScript en el <head>, debe descargarlos y analizarlos antes de renderizar cualquier contenido. Demasiadas hojas de estilo o muy grandes retrasan significativamente el LCP. Inserta el CSS crítico en línea y aplaza las hojas de estilo no esenciales para solucionarlo.
• Tiempo de respuesta del servidor lento (TTFB): si tu servidor de hosting tarda 2 segundos solo en generar el HTML, tu LCP no podrá estar por debajo de 2,5 segundos. Mejora el hosting, habilita la caché del lado del servidor y usa una CDN para reducir el TTFB.
• Demasiados plugins: cada plugin añade potencialmente CSS y JavaScript a cada página. Los sitios con más de 30 plugins activos suelen tener decenas de recursos que bloquean el renderizado compitiendo por el ancho de banda.
• Falta del atributo fetchpriority: el elemento LCP debería tener fetchpriority="high" para indicar al navegador que lo descargue primero. Sin él, el navegador puede priorizar otros recursos sobre el más importante.

Problemas comunes de WordPress con INP

Los problemas de INP en WordPress suelen tener su origen en la ejecución de JavaScript:

• JavaScript pesado de plugins: deslizadores, popups, herramientas de analítica, widgets de chat y plugins de compartir en redes sociales añaden todos JavaScript que se ejecuta en el hilo principal. Cuando un usuario hace clic en algo, el navegador puede necesitar terminar de ejecutar otros scripts antes de poder responder.
• Scripts de terceros: Google Analytics, Facebook Pixel, scripts de publicidad y herramientas de chat en vivo a menudo ejecutan tareas largas que bloquean el hilo principal. Cargar estos scripts con async o defer ayuda, pero aun así consumen tiempo de procesamiento.
• Tamaño excesivo del DOM: las páginas con miles de elementos DOM (común con maquetadores como Elementor o Divi) tardan más en actualizarse cuando ocurren interacciones. Un clic que cambia una clase CSS puede disparar costosas recalculaciones de estilo en miles de elementos.
• Tareas largas en el hilo principal: cualquier tarea JavaScript que dure más de 50 milisegundos se considera una "tarea larga" que bloquea la capacidad de respuesta. Dividir tareas grandes en trozos más pequeños usando patrones como requestAnimationFrame o setTimeout puede ayudar.

Problemas comunes de WordPress con CLS

Los desplazamientos de diseño en sitios WordPress suelen estar causados por:

• Imágenes sin atributos width y height: cuando una imagen se carga sin dimensiones explícitas, el navegador no sabe cuánto espacio reservar. El contenido que está debajo se desplaza cuando la imagen finalmente se renderiza. Establece siempre los atributos width y height en las imágenes (WordPress lo hace automáticamente para las imágenes añadidas a través de la biblioteca de medios).
• Carga de fuentes web: las fuentes personalizadas que se cargan después del renderizado inicial pueden hacer que el texto se redistribuya cuando se intercambia la fuente. Usa font-display: swap combinado con la precarga de fuentes para minimizar este efecto, o considera usar font-display: optional para fuentes no críticas.
• Inyecciones de anuncios: los anuncios que se cargan dinámicamente empujan el contenido. Reserva espacio para los huecos de anuncios usando contenedores de tamaño fijo, incluso antes de que el anuncio cargue.
• Contenido inyectado dinámicamente: los banners de consentimiento de cookies, popups de boletines y barras de notificación que aparecen después de que la página se cargue pueden desplazar el contenido si se insertan en el flujo del documento en lugar de superponerse encima.
• Incrustaciones e iframes sin dimensiones: los vídeos de YouTube, tweets y otros contenidos incrustados sin dimensiones explícitas provocan desplazamientos cuando cargan.

Mejorar los Core Web Vitals en WordPress

Aquí tienes un enfoque práctico para mejorar cada métrica en un sitio WordPress:

• Para LCP: optimiza y comprime las imágenes (usa WebP/AVIF), utiliza una CDN, habilita la caché del lado del servidor, inserta el CSS crítico en línea, aplaza el JavaScript no esencial y añade fetchpriority="high" a la imagen LCP. Elimina los plugins no usados que añaden recursos que bloquean el renderizado.
• Para INP: audita y elimina el JavaScript innecesario, aplaza los scripts de terceros, reduce el tamaño del DOM (considera maquetadores más ligeros o bloques nativos de WordPress) y divide las tareas largas de JavaScript en trozos más pequeños. Usa la pestaña Performance en Chrome DevTools para identificar qué scripts bloquean el hilo principal.
• Para CLS: establece dimensiones explícitas en todas las imágenes, vídeos e iframes. Precarga las fuentes y usa font-display: swap. Reserva espacio para anuncios y contenido dinámico. Evita insertar contenido encima de contenido existente después de la carga de la página.

Qué comprueba InspectWP

InspectWP analiza múltiples factores que influyen directamente en las puntuaciones de Core Web Vitals. Comprueba la compresión HTTP (que afecta al LCP), el uso de HTTP/2 (que permite la carga paralela de recursos), el número de archivos JavaScript y CSS (que pueden causar bloqueo de renderizado y afectar tanto al LCP como al INP), oportunidades de optimización de imágenes, el tamaño del documento HTML y otros indicadores relacionados con el rendimiento. Esto te da una imagen clara de qué necesita mejorar para conseguir mejores puntuaciones de Core Web Vitals.