Core Web Vitals y velocidad web: guía práctica
La velocidad pasó de ser un detalle técnico a una parte de la experiencia que Google mide y que los usuarios notan en segundos. Esta guía explica qué se mide, qué umbrales se consideran buenos y qué acciones tienen más impacto.
Resumen rápido
- Google usa tres métricas para evaluar la experiencia de carga, interactividad y estabilidad visual: LCP, INP y CLS.
- Son una señal de ranking ligera: un contenido excelente seguirá por delante de uno rápido pero mediocre. Pero, con calidad similar, la experiencia desempata, y además mejora conversiones.
- Las mejoras con más retorno suelen ser imágenes, fuentes, JavaScript de terceros y alojamiento.
Un poco de historia
En 2010 Google ya declaraba la velocidad de carga como factor de ranking en escritorio. En julio de 2018 lo extendió a las búsquedas móviles (la “Speed Update”). En mayo de 2020 presentó los Core Web Vitals y entre junio y agosto de 2021 los integró en la señal de “experiencia de página”. En marzo de 2024 la métrica INP sustituyó a FID.
Las tres métricas
| Métrica | Mide | Bueno | Deficiente |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Cuándo se pinta el elemento principal | ≤ 2,5 s | > 4 s |
| INP (Interaction to Next Paint) | Lo rápido que responde la página a clics, toques y teclas | ≤ 200 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Cuánto “salta” el contenido al cargar | ≤ 0,1 | > 0,25 |
Google las evalúa con datos reales de usuarios de Chrome (percentil 75), no con una sola prueba en laboratorio.
Cómo mejorar el LCP
- Comprime y redimensiona las imágenes. Usa WebP o AVIF y
srcset. - No pongas
loading="lazy"en la imagen principal; sí en las demás. - Precarga la imagen o fuente crítica con
<link rel="preload">. - Mejora el tiempo de respuesta del servidor (TTFB): caché, CDN, hosting adecuado.
- Elimina CSS y JavaScript que bloquean el renderizado en la parte superior de la página.
Cómo mejorar el INP
- Reduce y divide el JavaScript: lo que no se necesita al cargar, se carga después.
- Revisa scripts de terceros (chats, mapas, widgets, píxeles de seguimiento). Suelen ser la causa principal.
- Evita tareas largas en el hilo principal; fragmenta el trabajo.
- Si tu web no necesita ser una aplicación, sirve HTML y añade JavaScript solo donde haga falta.
Cómo mejorar el CLS
- Declara siempre
widthyheight(oaspect-ratio) en imágenes y vídeos. - Reserva espacio para anuncios, banners de cookies e iframes.
- Usa
font-display: swapy fuentes con tamaños de respaldo parecidos para evitar saltos. - No insertes contenido por encima de lo que el usuario ya está leyendo.
Herramientas
- PageSpeed Insights: combina datos reales y de laboratorio.
- Search Console → Core Web Vitals: agrupa URL con problemas.
- Lighthouse y el panel Performance de Chrome DevTools para depurar.
- WebPageTest: pruebas con conexiones y dispositivos concretos.
Rendimiento y sostenibilidad
Una web más ligera consume menos datos y energía. Reducir peso no solo ayuda a posicionar: también ayuda a quien navega con una cobertura mala o un plan de datos limitado.
Plan de 30 minutos para una web pequeña
- Pasa tu portada por PageSpeed Insights (móvil).
- Anota el LCP, el INP y el CLS.
- Comprime las tres imágenes más pesadas.
- Elimina un script de terceros que no uses.
- Fija dimensiones a las imágenes.
- Vuelve a medir.
Preguntas frecuentes
¿Una puntuación de 100 en Lighthouse es necesaria? No. Importan los datos de usuarios reales y que las tres métricas estén en “bueno”.
¿Cuánto tarda en notarse una mejora en Search Console? Los datos de campo se acumulan en una ventana de unos 28 días.
¿Afecta al ecommerce? Mucho. En tiendas online, cada segundo de espera pesa en el abandono; por eso conviene cuidar sobre todo fichas de producto y proceso de pago.
Siguiente paso
Si tu web va despacio por culpa de la plataforma, consulta Webs ligeras: HTML estático, Astro y WordPress headless.
Fuentes oficiales: Web Vitals (web.dev).
