Si tu web tarda en cargar o "salta" mientras se arma, pierdes visitantes antes de que vean lo que ofreces. Google lo sabe, y por eso mide la experiencia con los Core Web Vitals.
Las tres métricas que importan
- LCP (Largest Contentful Paint): cuánto tarda en aparecer el contenido principal. Objetivo: menos de 2,5 segundos. La imagen del hero o el título principal suelen ser el LCP.
- INP (Interaction to Next Paint): qué tan rápido responde tu sitio cuando el usuario hace clic o escribe. Objetivo: menos de 200 ms. Un mal INP se siente como un sitio "trabado".
- CLS (Cumulative Layout Shift): cuánto se mueve el contenido inesperadamente. Objetivo: menos de 0,1. Es lo que pasa cuando un elemento aparece de repente y empuja todo hacia abajo.
Por qué son dinero
No es solo SEO. Cada décima de segundo de demora reduce conversiones. Un sitio que carga en 1,5 s vende más que uno que carga en 4 s, aunque vendan exactamente lo mismo.
- Amazon calculó que cada 100 ms de demora le costaban 1% en ventas.
- Google descubrió que pasar de 1 s a 3 s de carga aumenta el rebote un 32%.
La velocidad no es un detalle técnico: es parte de la experiencia de compra.
Cómo mejorar el LCP
El LCP suele ser una imagen grande o un texto. Para mejorarlo:
- Precarga la imagen del hero: usa
fetchPriority="high"y una etiqueta<link rel="preload">. - Sirve imágenes en WebP o AVIF: son 30-50% más livianas que JPEG sin perder calidad.
- Optimiza el servidor: usa un CDN y compresión Brotli.
- Reduce CSS bloqueante: el CSS crítico debería cargarse inline y el resto de forma diferida.
Cómo mejorar el INP
El INP mide qué tan rápido responde tu sitio a los clics y toques. Las causas más comunes:
- JavaScript pesado en el hilo principal: divide el código en fragmentos más pequeños y
usa
requestIdleCallbackpara tareas no urgentes. - Animaciones complejas: prefiere CSS animations sobre JavaScript para movimientos simples.
- Tareas largas: si una función tarda más de 50 ms, busca dividirla.
Cómo evitar el CLS
El CLS ocurre cuando los elementos se mueven después de que el usuario ya los vio:
- Dimensiones explícitas: siempre define
widthyheighten imágenes y videos. - Espacio reservado: para fuentes, banners, embebidos y widgets de terceros.
- Evita inserts tardíos: no inyectes contenido arriba de lo que el usuario ya está viendo.
Herramientas para medir
Puedes monitorear tus Core Web Vitals con:
- PageSpeed Insights: te da el diagnóstico completo y las oportunidades de mejora.
- Search Console: el informe de Core Web Vitals te muestra qué páginas tienen problemas basado en datos de usuarios reales.
- CrUX (Chrome User Experience Report): datos reales de millones de usuarios Chrome.
- Lighthouse: integrado en Chrome DevTools para pruebas locales.