Optimización de Core Web Vitals: La Guía Completa 2026
Optimización de Core Web Vitals: La Guía Completa 2026
Respuesta Rápida Core Web Vitals son las tres métricas de experiencia de usuario de Google: LCP (mayor elemento visible, objetivo < 2,5s), INP (respuesta a interacciones, objetivo < 200ms) y CLS (estabilidad visual, objetivo < 0,1). Las tres afectan directamente las posiciones en buscadores y las tasas de conversión. Obtén una Auditoría de Velocidad Gratuita →
En más de 750 proyectos web vimos el mismo patrón: sitios perdiendo tráfico no por contenido pobre, sino por tiempos de carga lentos. Cuando redujimos el LCP de un bufete de abogados de 4,8s a 1,9s, el tráfico orgánico creció un 34% en seis semanas. La velocidad ya no es opcional — es una señal de posicionamiento oficial de Google y el detonante del abandono del usuario.
Esta guía comparte el mismo marco que aplicamos en nuestro servicio de optimización de rendimiento — no teoría, sino los pasos que funcionan en producción.
Tabla de Contenidos
- ¿Qué son los Core Web Vitals?
- Impacto en el Ranking de Google
- Optimización de LCP
- Optimización de INP
- Optimización de CLS
- Herramientas de Medición
- Puntuación 97 en Lighthouse: Caso de Éxito
- Errores Comunes
- Checklist de 20 Puntos
- Preguntas Frecuentes
- Conclusión
¿Qué son los Core Web Vitals? {#que-son-cwv}
Google introdujo Core Web Vitals como señal de posicionamiento oficial en 2021 y actualizó las métricas en 2024 reemplazando FID por INP. En 2026 las tres métricas son:
LCP — Largest Contentful Paint
Tiempo hasta que el mayor elemento visible (imagen o bloque de texto) termina de renderizarse. Es cuando los usuarios sienten que la página ha cargado.
| Puntuación | Valor | Experiencia |
|---|---|---|
| Buena | < 2,5s | Rápida, satisfactoria |
| Necesita Mejora | 2,5s – 4,0s | Retraso perceptible |
| Pobre | > 4,0s | Riesgo de abandono |
INP — Interaction to Next Paint
Reemplazó a FID en marzo de 2024. Mide la rapidez con la que la página responde a todas las interacciones del usuario durante la sesión y guarda la peor.
| Puntuación | Valor |
|---|---|
| Buena | < 200ms |
| Necesita Mejora | 200ms – 500ms |
| Pobre | > 500ms |
CLS — Cumulative Layout Shift
Mide la inestabilidad visual — elementos que se desplazan mientras carga la página. Texto que se mueve mientras lees, botones que cambian de posición. Todo causado por un CLS alto.
| Puntuación | Valor |
|---|---|
| Buena | < 0,1 |
| Necesita Mejora | 0,1 – 0,25 |
| Pobre | > 0,25 |
Impacto en el Ranking de Google {#impacto-ranking}
Google usa Core Web Vitals como parte de su señal de Page Experience. Cuando dos páginas son similares en calidad de contenido, la más rápida gana.
El impacto en conversión es aún más concreto:
- Cada segundo de retraso en LCP reduce las conversiones un 7% de media (investigación Google/Deloitte)
- Los sitios móviles con LCP inferior a 2,5s reciben un 15% más de clics orgánicos que los que superan los 4s
- Bajar el CLS por debajo de 0,1 aumentó la tasa de completado de formularios un 23% en un sitio retail
Como explicamos en nuestra guía de diseño web SEO: rendimiento técnico y SEO son inseparables.
Optimización de LCP {#optimizacion-lcp}
Los Cuatro Problemas de LCP Más Comunes
En la gran mayoría de proyectos, cuatro causas generan problemas de LCP:
1. Imagen hero sin optimizar — Un JPEG de 2MB nunca convertido a WebP/AVIF 2. Recursos que bloquean el renderizado — Archivos CSS o JS en <head> bloqueando el render 3. TTFB lento — Hosting deficiente o sin CDN 4. Lazy-load mal aplicado — Poner loading="lazy" en la imagen hero empeora directamente el LCP
Pasos para Mejorar el LCP
Paso 1: Precarga la imagen hero
``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``
Paso 2: Convierte las imágenes a WebP/AVIF
Generalmente un 30–50% más pequeñas que JPEG. El componente Image de Next.js lo hace automáticamente.
Paso 3: TTFB por debajo de 200ms
- Elige un datacenter cercano a tu audiencia
- Añade CDN de Cloudflare o Fastly
- Usa SSG/ISR para páginas estáticas
Paso 4: Inlinea el CSS crítico
Mueve los estilos above-the-fold al <head> como CSS inline para eliminar hojas de estilo que bloquean el render.
Optimización de INP {#optimizacion-inp}
Por Qué el INP Es Más Exigente que el FID
FID solo medía el retraso antes de que el navegador empezara a procesar la primera interacción. INP mide el ciclo completo de actualización visual para cada interacción, guardando el peor resultado.
Causas comunes de INP alto:
- Event listeners pesados en scroll/resize/input
- Lecturas síncronas de
localStoragedentro de handlers de eventos - Scripts de terceros que bloquean el renderizado (widgets de chat, analytics)
- Re-renders excesivos en React/Vue
Solución: Mueve el trabajo pesado a requestIdleCallback o Web Workers. Carga scripts de terceros con defer o async.
Optimización de CLS {#optimizacion-cls}
Por Qué Ocurren los Layout Shifts
El 80% de los problemas de CLS vienen de tres fuentes:
1. Imágenes sin dimensiones — Etiquetas <img> sin atributos width y height 2. Anuncios e iframes de carga tardía — Contenido que empuja elementos existentes hacia abajo 3. Fuentes web — Se muestra la fuente del sistema, luego carga la fuente web y el texto salta
Solución práctica — reservar espacio con aspect-ratio:
``css img { aspect-ratio: 16 / 9; width: 100%; height: auto; } ``
Para fuentes web:
``css @font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } ``
Herramientas de Medición {#herramientas-medicion}
Google Search Console — Informe de Datos de Campo
El informe Core Web Vitals en GSC muestra datos reales de usuarios (CrUX). Consulta nuestra guía de Google Search Console para la configuración.
La diferencia entre datos de laboratorio y de campo es crítica: una página con 95 en PageSpeed puede mostrar "Necesita Mejora" en GSC porque CrUX refleja dispositivos y conexiones reales.
PageSpeed Insights
Herramienta gratuita de Google. Pega una URL y obtén datos de laboratorio y campo. Siempre comprueba las puntuaciones móvil y escritorio por separado.
Lighthouse CI
Herramienta de línea de comandos que se integra en tu pipeline de despliegue:
``bash npx lhci autorun --collect.url=https://tuweb.com ``
Puntuación 97 en Lighthouse: Caso de Éxito {#caso-exito}
Cuando reconstruimos la web de un bufete de abogados desde cero:
| Métrica | Antes | Después |
|---|---|---|
| Lighthouse (Móvil) | 43 | 97 |
| LCP | 5,8s | 1,6s |
| INP | 480ms | 85ms |
| CLS | 0,38 | 0,02 |
| Tráfico orgánico (3 meses) | — | +41% |
Qué hicimos:
1. Convertimos todas las imágenes a WebP, precargamos la hero con fetchpriority="high" 2. Migramos a Next.js App Router + SSG para renderizado en servidor 3. Aplazamos scripts de terceros (chat, analytics) con defer 4. Reemplazamos Google Fonts por fuentes self-hosted + font-display: swap 5. Añadimos capa CDN con Cloudflare
Todas estas optimizaciones están incluidas en nuestro paquete de rendimiento.
Errores Comunes {#errores-comunes}
Error 1: Solo revisar puntuaciones de escritorio
Google evalúa Page Experience en móvil. Un sitio con 98 en escritorio pero 52 en móvil recibe la penalización móvil en rankings.
Error 2: Aplicar lazy-load a la imagen hero
loading="lazy" nunca debe ir en la imagen hero — retrasa directamente el LCP.
Error 3: "Ya lo optimizamos, listo"
Cada nuevo script o plugin puede erosionar las mejoras. Los controles mensuales con Lighthouse CI son imprescindibles.
Error 4: Confiar solo en datos de laboratorio
Una puntuación alta en PageSpeed Insights no garantiza buenos datos de campo en GSC.
Error 5: Ignorar el CLS
En sitios con anuncios o pop-ups, el CLS puede superar fácilmente 0,25 sin que nadie lo note hasta que GSC lo marca.
Checklist de 20 Puntos {#checklist}
Imágenes
- [ ] Imagen hero en formato WebP o AVIF
- [ ] Imagen hero precargada con
fetchpriority="high" - [ ] Imágenes below-the-fold con
loading="lazy" - [ ] Todos los
<img>tienen atributos explícitoswidthyheight - [ ] Archivos de imagen menores de 100KB (hero menor de 200KB)
Fuentes
- [ ] Fuentes web self-hosted o con
font-display: swap/optional - [ ] Variantes de fuente minimizadas
- [ ] Fuente crítica precargada
JavaScript
- [ ] Scripts de terceros cargados con
deferoasync - [ ] Long Tasks (50ms+) identificadas y resueltas
- [ ] JavaScript no utilizado eliminado (tree shaking)
- [ ] INP < 200ms verificado en dispositivo móvil
CSS y Renderizado
- [ ] CSS crítico inlineado en
<head> - [ ] Sin CSS que bloquee el renderizado
- [ ] CLS < 0,1 en todas las páginas clave
- [ ] Espacio reservado para contenido dinámico
Servidor y CDN
- [ ] TTFB < 200ms
- [ ] CDN activo (Cloudflare o equivalente)
- [ ] HTTP/2 o HTTP/3 activo
- [ ] Compresión Gzip o Brotli habilitada
Preguntas Frecuentes {#faq}
¿Cuánto afectan los Core Web Vitals al ranking de Google?
Google los usa como parte de la señal de Page Experience. Son más influyentes cuando dos páginas tienen calidad de contenido similar — CWV se convierte en el desempate.
¿Por qué PageSpeed Insights muestra una puntuación diferente a GSC?
PageSpeed Insights ejecuta una prueba de laboratorio en condiciones controladas. GSC usa datos CrUX — 28 días de mediciones reales de usuarios en navegadores Chrome reales. GSC suele mostrar puntuaciones más bajas porque las condiciones reales son más exigentes.
¿Cuál es la forma más rápida de mejorar el LCP?
Optimiza la imagen hero primero: convierte a WebP, comprime por debajo de 150KB y precarga con <link rel="preload">. Este único paso suele reducir el LCP en 1–2 segundos.
¿Puedo conseguir buenos CWV en un hosting compartido?
El TTFB es el principal cuello de botella en hosting compartido. Si no puedes migrar a VPS, añade al menos la CDN gratuita de Cloudflare para reducir el TTFB en el edge.
¿Qué relación hay entre Core Web Vitals y las tasas de conversión en e-commerce?
Una mejora de 0,1 segundos en la carga móvil aumenta las conversiones del retail un 8% y las de viajes un 10% (Google/Deloitte). Nuestros paquetes de e-commerce incluyen todas estas optimizaciones de serie.
Conclusión {#conclusion}
La optimización de Core Web Vitals no es un proyecto de una sola vez. Cada nuevo script, plugin o integración de terceros puede erosionar las mejoras. De 750+ proyectos sabemos: sin monitorización mensual, la mayoría de las ganancias desaparecen en seis meses.
Por dónde empezar: 1. Haz un test de PageSpeed Insights móvil en tu página de inicio 2. Abre el informe Core Web Vitals en GSC y lista las páginas con "Necesita Mejora" 3. Aplica el checklist de 20 puntos en orden
Si necesitas ayuda con la implementación técnica, contáctanos para una auditoría de velocidad gratuita. Analizaremos tu sitio y te mostraremos exactamente por dónde empezar.
--- Autor: İsmail Günaydın
