Como propietario de una página web, es importante que entiendas que las Core Web Vitals desempeñan un papel crucial en el posicionamiento de tu página web en Google. Estas tres métricas, Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS), forman la base de la valoración que hace Google de la experiencia de usuario en tu página web. En esta guía completa aprenderás todo sobre cómo optimizar Core Web Vitals, desde la medición hasta la mejora de estas métricas esenciales.

¿Qué son exactamente las Core Web Vitals?

Las Core Web Vitals son un conjunto de factores específicos que Google considera importantes para la experiencia de usuario de una página web. Google introdujo estas métricas en 2020 y en 2021 las convirtió en parte oficial de su algoritmo de búsqueda. Se trata de tres mediciones principales que recogen distintos aspectos de la experiencia de usuario:

  • Largest Contentful Paint (LCP): mide el rendimiento de carga
  • Interaction to Next Paint (INP): mide la interactividad y la capacidad de respuesta
  • Cumulative Layout Shift (CLS): mide la estabilidad visual

Estas tres Core Web Vitals, junto con otras métricas como First Contentful Paint (FCP) y Time to First Byte (TTFB), forman la imagen completa del rendimiento de tu página web. Pero ¿por qué son tan importantes estas métricas? Google usa las Core Web Vitals como factor de posicionamiento porque se correlacionan directamente con la forma en que los usuarios perciben tu página web. Las páginas web con buenas puntuaciones ofrecen una mejor experiencia de usuario y suelen tener porcentajes de conversión más altos.

Largest Contentful Paint (LCP) explicado

El Largest Contentful Paint mide cuánto tarda en hacerse visible para el usuario el elemento de contenido más grande de la ventana gráfica (viewport). Puede ser una imagen, un vídeo o un bloque de texto grande. Google considera bueno un LCP de menos de 2,5 segundos, entre 2,5 y 4 segundos como mejorable, y por encima de 4 segundos como malo.

¿Qué cuenta como elemento LCP?

No todos los elementos pueden actuar como LCP. Los siguientes elementos cumplen los requisitos:

  • Elementos IMG
  • Elementos de imagen dentro de un SVG
  • Elementos de vídeo con una imagen de póster
  • Elementos con una imagen de fondo cargada mediante url()
  • Elementos de nivel de bloque con nodos de texto o elementos de texto en línea

¿Cómo mejoras el LCP?

Hay varias estrategias para optimizar tu Largest Contentful Paint:

  1. Optimiza tus imágenes: usa formatos modernos como WebP o AVIF, comprime las imágenes e implementa imágenes adaptables con srcset.
  2. Implementa el lazy loading con criterio: carga al instante el contenido above-the-fold y usa lazy loading solo para el contenido que está más abajo en la página.
  3. Precarga los recursos importantes: usa <link rel="preload"> para imágenes y fuentes críticas.
  4. Reduce el tiempo de respuesta del servidor: optimiza tu código backend y las consultas a la base de datos. Usa caché y un buen proveedor de hosting como hosting LiteSpeed.
  5. Elimina los recursos que bloquean el renderizado: aplaza (defer) JavaScript, incluye en línea el CSS crítico y elimina el CSS que no uses.
  6. Usa una CDN: una red de distribución de contenidos como QUIC.cloud CDN hace que el contenido se sirva más cerca del usuario.

Interaction to Next Paint (INP) explicado

En marzo de 2024, INP sustituyó a First Input Delay (FID) como Core Web Vital. Esta métrica mide la capacidad de respuesta de tu página durante toda su vida útil, no solo en la primera interacción. INP mide la latencia de todas las interacciones (clics, toques, entradas de teclado) e informa de la interacción más larga, con excepción de los valores atípicos.

Una buena puntuación de INP es de menos de 200 milisegundos. Entre 200 ms y 500 ms debes mejorar, y por encima de 500 ms se considera mala. INP suele ser la Core Web Vital más difícil de optimizar porque depende de una ejecución compleja de JavaScript y de procesos de renderizado.

Causas habituales de un INP malo

  • Ejecución pesada de JavaScript: tareas largas que bloquean el hilo principal
  • Árboles DOM grandes: más de 1500 nodos hacen que el renderizado sea lento
  • Scripts que bloquean el renderizado: JavaScript que bloquea el análisis y el renderizado
  • Scripts de terceros: analítica, anuncios y widgets de redes sociales
  • Layout thrashing: lectura y escritura frecuentes de propiedades de diseño

¿Cómo mejoras el INP?

  1. Divide las tareas largas: usa setTimeout o requestIdleCallback para repartir el trabajo entre varios fotogramas.
  2. Optimiza los controladores de eventos: usa delegación de eventos y técnicas de debounce/throttle.
  3. Reduce el tamaño de JavaScript: la división del código (code splitting), el tree shaking y la minificación son esenciales.
  4. Usa web workers: traslada los cálculos pesados a hilos en segundo plano.
  5. Optimiza los scripts de terceros: cárgalos de forma asíncrona o aplázalos (defer), o usa facades.
  6. Implementa la virtualización: para listas largas, usa bibliotecas de virtual scrolling.

Cumulative Layout Shift (CLS) explicado

CLS mide la estabilidad visual de tu página. Registra los cambios de diseño (layout shifts) inesperados que se producen mientras se carga la página. Nada es más frustrante para los usuarios que estar a punto de hacer clic en un enlace y que el contenido se desplace, de modo que acabas haciendo clic en otra cosa.

CLS es una puntuación sin unidad. Una puntuación por debajo de 0,1 es buena, entre 0,1 y 0,25 hay que mejorarla, y por encima de 0,25 es mala. La puntuación se calcula multiplicando la impact fraction (qué parte del viewport se vio afectada) por la distance fraction (cuánto se desplazaron los elementos).

Causas habituales de los layout shifts

  • Imágenes sin dimensiones: el navegador no puede reservar espacio
  • Anuncios e incrustaciones: contenido dinámico que ocupa espacio
  • Fuentes web: FOIT (Flash of Invisible Text) y FOUT (Flash of Unstyled Text)
  • Contenido inyectado dinámicamente: banners, notificaciones, consentimiento de cookies
  • Animaciones: transiciones CSS que modifican propiedades de diseño

¿Cómo mejoras el CLS?

  1. Especifica siempre width y height para imágenes y vídeos: así los navegadores modernos pueden calcular la relación de aspecto.
  2. Reserva espacio para los anuncios: usa min-height en los contenedores de anuncios.
  3. Optimiza la carga de las fuentes web: usa font-display: swap y precarga las fuentes críticas.
  4. No insertes contenido encima del contenido existente: salvo que sea como respuesta a una interacción del usuario.
  5. Usa animaciones con transform: anima con transform y opacity, no con width, height, top o left.
  6. Reserva espacio para el contenido que se carga tarde: usa skeletons o placeholders.

Medir las Core Web Vitals: las herramientas

Para poder optimizar tus Core Web Vitals, primero tienes que medirlas. Hay varias herramientas disponibles, cada una con sus propias ventajas:

PageSpeed Insights

PageSpeed Insights es la herramienta oficial de Google y combina datos de laboratorio (pruebas simuladas) con datos de campo (datos reales de usuarios del Chrome User Experience Report). Basta con que introduzcas tu URL y obtendrás puntuaciones para todas las Core Web Vitals, además de recomendaciones detalladas. También puedes probar tu página web con la herramienta de análisis SEO de Theory7, que integra PageSpeed Insights.

Chrome DevTools

Chrome DevTools ofrece capacidades de análisis más detalladas. Abre DevTools (F12), ve al panel de Rendimiento y haz una grabación mientras se carga tu página. Así verás exactamente dónde se invierte el tiempo y podrás analizar LCP, INP y CLS en detalle. El panel Lighthouse de DevTools también puede ejecutar una auditoría completa.

Search Console

Google Search Console tiene un informe de Core Web Vitals que muestra cómo rinden tus páginas en la práctica, a partir de datos de usuarios reales de Chrome. Se trata de datos de campo y ofrecen la imagen más realista de tu rendimiento. Las URL se agrupan en Correctas, Necesitan mejoras y Deficientes.

Extensión Web Vitals

La extensión de Chrome Web Vitals muestra métricas en tiempo real mientras navegas por tu página web. Es útil para comprobaciones rápidas durante el desarrollo. La extensión muestra LCP, INP, CLS y otras métricas en un pequeño icono (badge).

Real User Monitoring (RUM)

Para las páginas web en producción, RUM es esencial. Herramientas como Google Analytics 4, Cloudflare Web Analytics o herramientas RUM específicas recopilan métricas de usuarios reales en distintos navegadores, redes y dispositivos. Esto ofrece la imagen más completa.

Optimizar Core Web Vitals en WordPress

Las páginas web con WordPress tienen retos específicos en lo que se refiere a las Core Web Vitals. Muchos temas y plugins cargan recursos innecesarios, y la flexibilidad de WordPress puede provocar problemas de rendimiento. Estos son los consejos de optimización específicos para WordPress:

Elige un hosting rápido

Tu hosting es la base de un buen rendimiento. Elige un hosting WordPress basado en LiteSpeed que admita caché nativa y esté optimizado para WordPress. La caché de servidor de LiteSpeed es notablemente más rápida que Nginx o Apache con plugins de caché tradicionales.

Usa un tema orientado al rendimiento

Temas como GeneratePress, Astra o Kadence están creados pensando en el rendimiento. Evita los temas con page builders que cargan mucho JavaScript y CSS. Un tema ligero es la base de unas buenas Core Web Vitals.

Optimiza los plugins

  • Usa el menor número posible de plugins: cada plugin añade sobrecarga
  • Elige calidad antes que cantidad: un buen plugin todo en uno es mejor que cinco pequeños
  • Prueba el impacto de los plugins: usa Query Monitor para ver qué plugins son lentos
  • Sustituye los plugins pesados: busca alternativas ligeras a plugins populares pero pesados

Implementa la caché de forma estratégica

El plugin LiteSpeed Cache es la solución de caché más completa para WordPress y se integra a la perfección con el hosting LiteSpeed. Configura:

  • Caché de páginas para servir HTML estático
  • Caché de objetos con Redis o Memcached
  • Caché del navegador para visitantes recurrentes
  • Integración de CDN con QUIC.cloud
  • Optimización de imágenes con conversión a WebP
  • Minificación y combinación de CSS/JS
  • Generación de CSS crítico para el contenido above-the-fold
  • Lazy loading para imágenes e iframes

Optimización de la base de datos

Las bases de datos de WordPress pueden acabar saturadas por revisiones, transients y spam. Usa WP-Optimize o plugins similares para limpiarlas con regularidad. Optimiza las consultas a la base de datos en el código personalizado y plantéate implementar la caché de objetos.

El impacto del hosting en las Core Web Vitals

Tu proveedor de hosting tiene un impacto directo en tus Core Web Vitals, sobre todo en LCP y TTFB (Time to First Byte). Este es el motivo por el que el hosting es importante:

Tiempo de respuesta del servidor

Un servidor lento significa un TTFB lento, lo que lleva directamente a un mal LCP. Los servidores LiteSpeed son notablemente más rápidos que Apache o Nginx para WordPress porque están optimizados para la ejecución de PHP y admiten caché nativa a nivel de servidor.

HTTP/3 y el protocolo QUIC

El hosting moderno con compatibilidad con HTTP/3 mediante el protocolo QUIC ofrece conexiones más rápidas, sobre todo en redes móviles. QUIC reduce la latencia al establecer la conexión y se recupera más rápido de la pérdida de paquetes. El hosting de Theory7 admite HTTP/3 de serie.

Límites de recursos

El hosting compartido barato suele limitar la CPU, la RAM y la I/O. Durante los picos de tráfico, esto puede empeorar drásticamente las Core Web Vitals. Elige un hosting con recursos suficientes y buena capacidad de ráfaga (burst capacity).

Ubicación del servidor y CDN

La distancia física entre el servidor y el usuario influye en la latencia. Una CDN lo resuelve almacenando el contenido en caché en servidores edge de todo el mundo. QUIC.cloud CDN se integra a la perfección con el hosting LiteSpeed y mejora las Core Web Vitals para los visitantes internacionales.

Problemas habituales de las Core Web Vitals y sus soluciones

Problema: LCP por encima de 4 segundos

Diagnóstico: usa PageSpeed Insights para identificar qué elemento causa el LCP. Revisa la cascada (waterfall) en Chrome DevTools para ver por qué este elemento se carga tarde.

Soluciones:

  • Si es una imagen: optimiza la imagen, usa WebP, implementa imágenes adaptables y precarga la imagen
  • Si es texto: incluye en línea el CSS crítico, precarga las fuentes y reduce los recursos que bloquean el renderizado
  • Si el TTFB es alto: cambia a un hosting mejor, implementa caché en el servidor y optimiza la base de datos
  • Si hay muchos recursos que bloquean el renderizado: aplaza JavaScript, elimina el CSS que no uses e incluye en línea el CSS crítico

Problema: INP por encima de 500 ms

Diagnóstico: usa el panel de Rendimiento de Chrome DevTools para identificar las tareas largas. Fíjate en la pista Interactions de la grabación.

Soluciones:

  • Divide las tareas largas con setTimeout o scheduler.yield()
  • Reduce el tamaño del bundle de JavaScript con code splitting
  • Aplaza los scripts de terceros o cárgalos de forma asíncrona
  • Implementa la virtualización para listas largas
  • Optimiza los controladores de eventos con debouncing
  • Reduce el tamaño del DOM (por debajo de 1500 nodos)

Problema: CLS por encima de 0,25

Diagnóstico: usa la sección Experience de Chrome DevTools durante una grabación de rendimiento. Así verás exactamente qué elementos se desplazan y cuándo.

Soluciones:

  • Añade width y height a todas las imágenes y vídeos
  • Reserva espacio para los anuncios con min-height
  • Usa font-display: swap y precarga las fuentes
  • No cargues contenido encima del contenido existente
  • Usa la propiedad CSS aspect-ratio para incrustaciones adaptables
  • Anima con transform/opacity, no con propiedades de diseño

Técnicas de optimización avanzadas

Resource Hints

Usa resource hints para ayudar al navegador a establecer prioridades:

  • preconnect: establece una conexión temprana con orígenes de terceros
  • dns-prefetch: resuelve el DNS de dominios de terceros
  • preload: carga los recursos críticos con prioridad alta
  • prefetch: carga recursos para la siguiente navegación durante el tiempo de inactividad

Priority Hints

El atributo fetchpriority (compatible con los navegadores modernos) te permite indicar al navegador qué recursos son más importantes. Usa fetchpriority="high" en tu imagen LCP.

CSS crítico

Incluye en línea el CSS necesario para el contenido above-the-fold y carga el resto de forma asíncrona. Esto reduce el bloqueo del renderizado y mejora el LCP de forma notable. Herramientas como Critical o Critters pueden automatizarlo.

Optimización de JavaScript

  • Code splitting: carga solo el código necesario para la página actual
  • Tree shaking: elimina el código sin usar durante la compilación (build)
  • Minificación: reduce el tamaño de los archivos
  • Compresión: usa Brotli o Gzip
  • Patrón module/nomodule: sirve módulos ES modernos a los navegadores modernos

Monitorización y mejora continua

Optimizar Core Web Vitals no es una tarea puntual. Implementa un sistema de monitorización continua:

  1. Configura RUM: recopila métricas de usuarios reales con Google Analytics 4 o herramientas RUM específicas
  2. Vigila Search Console: revisa cada semana el informe de Core Web Vitals
  3. Pruebas automatizadas: integra Lighthouse CI en tu pipeline de despliegue
  4. Sistema de alertas: recibe notificaciones cuando las métricas empeoren
  5. Auditorías periódicas: realiza cada mes una auditoría de rendimiento completa
  6. A/B testing: prueba las optimizaciones con usuarios reales antes de desplegarlas

    7. Usa la guía de herramientas para probar la velocidad de tu página web para ver un resumen de todas las herramientas de prueba disponibles y cómo usarlas de forma eficaz.

    Preguntas frecuentes sobre Core Web Vitals

    ¿Cuánta influencia tienen las Core Web Vitals en mi posicionamiento en Google?

    Las Core Web Vitals son uno de los muchos factores de posicionamiento. Google ha confirmado que la relevancia del contenido sigue siendo lo más importante, pero, con la misma relevancia, las Core Web Vitals pueden marcar la diferencia. Sobre todo en palabras clave competitivas, la diferencia entre una página web con buenas y malas Core Web Vitals puede notarse en las posiciones. Además, unas mejores Core Web Vitals tienen un impacto directo en la conversión y en la experiencia de usuario.

    ¿Tengo que sacar 100/100 en PageSpeed Insights?

    No, una puntuación perfecta no es necesaria y a menudo es poco realista para páginas web en producción con una funcionalidad normal. Céntrate en poner en verde tus Core Web Vitals (LCP por debajo de 2,5 s, INP por debajo de 200 ms, CLS por debajo de 0,1). Una puntuación de 90+ es excelente y de 75-90 es buena. El tiempo dedicado a pasar de 95 a 100 normalmente no aporta ningún beneficio medible.

    ¿Por qué mis puntuaciones de laboratorio difieren de las de campo?

    Los datos de laboratorio (PageSpeed Insights, Lighthouse) usan pruebas simuladas en condiciones controladas con una conexión móvil lenta. Los datos de campo (Search Console, Chrome User Experience Report) proceden de usuarios reales con distintos dispositivos, navegadores y redes. Los datos de campo son los que cuentan para el posicionamiento. Si tus puntuaciones de laboratorio son malas pero las de campo son buenas, no hay ningún problema. Céntrate siempre primero en los datos de campo.

    ¿Qué navegadores cuentan para las Core Web Vitals?

    Solo Chrome y los navegadores basados en Chromium (Edge, Opera, Brave, etc.) envían datos de Core Web Vitals al Chrome User Experience Report. Esto significa que los usuarios de Safari y Firefox no cuentan en tus métricas oficiales. Aproximadamente el 65 % de los usuarios de la web usa navegadores basados en Chrome, así que de todos modos obtienes una imagen representativa.

    ¿Con qué frecuencia actualiza Google los datos de Core Web Vitals?

    Los datos de Search Console y del Chrome User Experience Report se actualizan a diario y muestran una media móvil de 28 días. Esto significa que los cambios que hagas hoy solo se hacen visibles en las métricas pasados unos días, y puede tardar hasta 28 días en verse el efecto completo. Ten paciencia y vigila las tendencias a lo largo de semanas, no de días.

    Resumen

    Optimizar Core Web Vitals es esencial para las páginas web modernas. Con las herramientas, las técnicas y el hosting adecuados, cualquier página web puede conseguir buenas puntuaciones. Empieza midiendo tu rendimiento actual, identifica los mayores problemas y trabaja de forma sistemática en las mejoras. Céntrate primero en los datos de campo y en las mejoras rápidas (quick wins), como la optimización de imágenes y la caché. Elige un hosting de calidad con LiteSpeed y compatibilidad con CDN. Monitoriza de forma continua y sigue optimizando a medida que evoluciona tu página. Con esta guía completa tienes todo el conocimiento para llevar tus Core Web Vitals a la zona verde y mantenerlas ahí.