Core Web Vitals: guía práctica para acelerar tu web

Una web lenta pierde visitas antes de mostrar el primer titular. Google lo sabe, y por eso los Core Web Vitals forman parte de su sistema de posicionamiento: si tu sitio carga rápido y responde bien, compites mejor. La buena noticia es que no necesitas rehacer tu web para mejorar estas métricas; necesitas saber qué medir y por dónde empezar.

Qué son los Core Web Vitals

Son tres métricas con las que Google resume la experiencia real de carga de una página:

LCP (Largest Contentful Paint): cuánto tarda en pintarse el elemento más grande visible, normalmente la imagen o el titular principal. Objetivo: menos de 2,5 segundos.
INP (Interaction to Next Paint): cuánto tarda la página en reaccionar cuando el usuario toca, hace clic o escribe. Objetivo: menos de 200 milisegundos.
CLS (Cumulative Layout Shift): cuánto “salta” el diseño mientras carga. Objetivo: menos de 0,1.

Lo importante: Google evalúa datos de usuarios reales (el informe CrUX), no solo pruebas de laboratorio. Por eso una web puede “aprobar” en tu computadora y fallar en un teléfono de gama media con conexión móvil.

Cómo medirlos sin pagar nada

Tres herramientas gratuitas cubren casi todo el flujo de diagnóstico:

PageSpeed Insights muestra datos reales de campo y una auditoría de laboratorio por URL.
Search Console (informe “Métricas web principales”) agrupa las URLs con problemas en todo el sitio.
Lighthouse en Chrome DevTools permite repetir pruebas mientras aplicas cambios.

También puedes lanzar una auditoría desde la terminal:

npx lighthouse https://tu-sitio.com --view

Tres mejoras con impacto inmediato

Optimiza la imagen principal

El LCP casi siempre depende de una imagen. Sírvela en formato moderno (AVIF o WebP), con dimensiones definidas, y márcala con fetchpriority="high". Todo lo que no se ve al inicio debería llevar loading="lazy".

Reduce el JavaScript que bloquea

Cada kilobyte de JavaScript se descarga, se interpreta y se ejecuta antes de que la página responda con fluidez. Elimina librerías que ya no usas, divide el código por rutas y retrasa los scripts de terceros que no sean esenciales para el primer render.

Reserva espacio para lo que carga tarde

El CLS aparece cuando anuncios, imágenes o fuentes empujan el contenido. Define siempre width y height en imágenes, reserva contenedores con altura fija para los anuncios y usa font-display: swap con una fuente de respaldo similar.

Conclusión

No intentes perseguir una puntuación perfecta de 100: es un indicador de laboratorio, no el objetivo. Concéntrate en que las tres métricas de campo estén en verde para usuarios reales. Mide primero, corrige la imagen principal, recorta JavaScript y estabiliza el diseño; en la mayoría de sitios, ese orden resuelve la mayor parte del problema.