?>

Core Web Vitals explicados: LCP, INP, CLS – Guía completa para principiantes (2026)

Core Web Vitals son el conjunto de métricas centradas en el usuario de Google que miden la experiencia real de la página. Han sido factores de ranking desde 2021, y en 2026 son más importantes que nunca – superarlos puede mejorar directamente tus rankings de búsqueda y tus tasas de conversión. Esta guía explica cada métrica, cómo medirlas y exactamente cómo solucionar los problemas comunes.

Por qué Core Web Vitals importan (El caso de negocio)

• Las páginas que aprueban Core Web Vitals tienen un 24% menos de probabilidades de ser abandonadas.
• Una mejora de 0,5 s en LCP puede aumentar las conversiones entre un 12 y un 15% (estudio de caso de Google).
• Core Web Vitals deficientes actúan como desempate – si dos páginas tienen relevancia similar, la página más rápida y estable se posiciona mejor.

Si tu sitio no aprueba alguna de las tres métricas, estás dejando dinero y posicionamiento sobre la mesa.

Las tres Core Web Vitals – Desglose detallado

1. LCP (Largest Contentful Paint) – Velocidad de carga

Qué mide: El tiempo que tarda en renderizarse el elemento visible más grande (imagen principal, titular, vídeo). Bueno: menos de 2,5 segundos. Deficiente: más de 4 segundos.

Por qué importa: Los usuarios perciben la velocidad en función de cuándo aparece el contenido principal. Un LCP lento da la sensación de un sitio roto.

Causas comunes de un LCP deficiente:

• Imágenes principales grandes (> 200 KB).
• Tiempo de respuesta lento del servidor (TTFB > 600 ms).
• CSS o JavaScript que bloquean el renderizado.
• Renderizado del lado del cliente (React/Vue) que retrasa la pintura.

2. INP (Interaction to Next Paint) – Capacidad de respuesta

Qué mide: El tiempo entre una interacción del usuario (clic, toque, pulsación de tecla) y la siguiente actualización visual. Bueno: menos de 200 milisegundos. Reemplazó a FID en 2024.

Por qué importa: Un INP lento hace que tu sitio se sienta lento. El usuario hace clic en un botón y no pasa nada – asume que está roto.

Causas comunes de un INP deficiente:

• Tareas largas de JavaScript que bloquean el hilo principal (> 50 ms).
• Manejadores de eventos pesados en cada interacción.
• Scripts de terceros (analytics, widgets de chat) que se ejecutan en la interacción.

3. CLS (Cumulative Layout Shift) – Estabilidad visual

Qué mide: La cantidad de cambio inesperado de diseño (movimiento) de los elementos visibles. Bueno: menos de 0,1. Deficiente: más de 0,25.

Por qué importa: El contenido que se mueve hace que los usuarios pierdan su lugar, hagan clic en anuncios accidentalmente o se frustren. Es un fracaso directo de la experiencia de usuario.

Causas comunes de un CLS deficiente:

• Imágenes o vídeos sin `width` y `height` explícitos.
• Fuentes que se cargan tarde y cambian o desplazan el texto.
• Contenido inyectado dinámicamente (anuncios, banners) que empuja hacia abajo el contenido existente.

Cómo medir las Core Web Vitals de tu sitio

• Datos de campo (usuarios reales, determinan el ranking): Google Search Console → informe de Core Web Vitals. También CrUX (Chrome User Experience Report).
• Datos de laboratorio (simulados, para depuración): PageSpeed Insights, Lighthouse en DevTools, WebPageTest.

Concéntrate en los datos de campo para el impacto en el ranking, pero utiliza los datos de laboratorio para encontrar y solucionar problemas.

Solucionar un LCP deficiente – Paso a paso

1. Optimiza las imágenes principales

Convierte a WebP, comprime con herramientas como Squoosh o ImageOptim. Usa `srcset` para servir imágenes de tamaño adecuado por dispositivo.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Principal"&gt;</code>

2. Precarga el elemento LCP

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Mejora el TTFB (Time to First Byte)

• Usa un VPS en lugar de hosting compartido.
• Activa PHP‑FPM con OPcache.
• Implementa indexación de bases de datos y caché (Redis o Memcached).
• Considera una CDN (Cloudflare, Bunny.net) para distribución global.

4. Elimina los recursos que bloquean el renderizado

Incluye CSS crítico en línea, aplaza el CSS no crítico y añade `defer` o `async` a los archivos JavaScript.

<code>&lt;style&gt; /* CSS crítico */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Solucionar un INP deficiente – Inmersión profunda en capacidad de respuesta

1. Divide las tareas largas de JavaScript

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Optimiza los manejadores de eventos

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Elimina o aplaza los scripts de terceros

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Solucionar un CLS deficiente – Eliminar los cambios de diseño

1. Añade ancho y alto explícitos a todos los medios

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Reserva espacio para las fuentes

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Evita insertar contenido por encima del contenido existente

Si debes mostrar un banner o una notificación, reserva espacio para él utilizando un div placeholder con una altura fija.

WordPress vs PHP personalizado para Core Web Vitals

Los sitios PHP personalizados obtienen puntuaciones consistentemente más altas porque no hay hinchazón de plugins, ni sobrecarga de temas, ni JavaScript forzado. Una instalación predeterminada de WordPress a menudo falla en CLS debido a que la barra de administración desplaza el contenido para los usuarios conectados (incluso si los visitantes no la ven). Con PHP personalizado, controlas cada byte. Puedes incluir CSS crítico en línea, precargar exactamente lo que se necesita y evitar cambios de diseño por completo.

Caso de estudio real: De suspenso a aprobado en 7 días

Una empresa de servicios para el hogar tenía un sitio WordPress con Core Web Vitals deficientes: LCP 4.2s, INP 540ms, CLS 0.29. Migramos el front‑end a un sitio estático PHP personalizado (manteniendo su backend existente para reservas).

Acciones realizadas:

• Convertimos la imagen principal a WebP y la precargamos.
• Incluimos CSS crítico en línea para la sección principal y la navegación.
• Movimos todo JavaScript a `defer` o lo cargamos después de la interacción del usuario.
• Establecimos dimensiones explícitas en todas las imágenes e iframes.

Resultados después de 1 semana (datos de campo de GSC):

• LCP: 4.2s → 1.1s (aprueba).
• INP: 540ms → 98ms (aprueba).
• CLS: 0.29 → 0.02 (aprueba).
• Tráfico orgánico: +34% después de 60 días (debido a mejoras en el ranking).

El cliente ahora no paga tarifas continuas por plugins y posee el código ligero y rápido.

Plan de acción paso a paso para arreglar tus Core Web Vitals

1. Mide el estado actual – Ejecuta PageSpeed Insights. Anota LCP, INP, CLS para móviles.
2. Arregla lo más fácil – Comprime imágenes, activa la caché, usa una CDN.
3. Si LCP > 2.5s: Precarga la imagen principal, incluye CSS crítico en línea, mejora la respuesta del servidor.
4. Si INP > 200ms: Divide las tareas largas de JS, aplaza los scripts de terceros, optimiza los manejadores de eventos.
5. Si CLS > 0.1: Añade dimensiones a todos los medios, usa `font-display: swap`, evita insertar contenido dinámico sobre el pliegue.
6. Vuelve a probar y monitoriza – Utiliza el informe de Core Web Vitals de Google Search Console para hacer un seguimiento de los datos reales de los usuarios a lo largo del tiempo.

Si estás en WordPress, considera cambiar a un tema ligero (GeneratePress, Kadence), eliminar plugins innecesarios y usar un plugin como Perfmatters o FlyingPress. Pero la solución definitiva es un sitio PHP personalizado construido para el rendimiento.

¿Listo para aprobar Core Web Vitals y mejorar tus rankings?

Construyo sitios web PHP personalizados que obtienen 100 en Lighthouse y aprueban todas las Core Web Vitals de fábrica. Pagas una tarifa única – sin suscripciones, sin costes ocultos. También puedo arreglar las Core Web Vitals de tu sitio existente si no estás listo para migrar.

Hablemos sobre tu sitio – te proporcionaré una auditoría gratuita de Core Web Vitals.

Datos obtenidos de proyectos reales de clientes y de casos de estudio publicados por Google. Los resultados individuales pueden variar.