Core Web Vitals es el conjunto de tres métricas oficiales de Google que evalúan la experiencia de usuario de un sitio web: LCP (Largest Contentful Paint, qué tan rápido carga el contenido principal), INP (Interaction to Next Paint, qué tan rápido responde el sitio a interacciones) y CLS (Cumulative Layout Shift, qué tan estable es el layout durante la carga). Desde 2021, estas métricas son factor directo de ranking en Google, lo que significa que un sitio lento literalmente vende menos. Nebugrama es una agencia boutique de diseño web y marketing digital en Ciudad de México que construye sitios optimizados para Core Web Vitals desde el primer día. En esta guía traducimos las tres métricas a lenguaje práctico, explicamos los umbrales aceptables y damos los 6 cambios que más rápido mejoran el desempeño de un sitio de PyME mexicana.
Qué mide cada Core Web Vital y cuál es el umbral aceptable
LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento más grande visible en la pantalla — generalmente el héroe (imagen principal o título). Bueno: menos de 2.5 segundos. Necesita mejora: 2.5-4 segundos. Pobre: más de 4 segundos.
INP (Interaction to Next Paint) mide la latencia de las interacciones del usuario (clicks, taps, tecleo). Reemplazó a FID en marzo 2024. Bueno: menos de 200ms. Necesita mejora: 200-500ms. Pobre: más de 500ms.
CLS (Cumulative Layout Shift) mide qué tanto se mueven los elementos visuales mientras carga el sitio (banners que empujan contenido, imágenes sin dimensiones, anuncios). Bueno: menos de 0.1. Necesita mejora: 0.1-0.25. Pobre: más de 0.25. Para que Google considere tu sitio rápido, las tres métricas deben estar en "bueno" en el percentil 75 de tus visitas reales (no en lab data).
Cómo medir Core Web Vitals correctamente
Hay dos tipos de mediciones: lab data (entorno controlado, simulado) y field data (usuarios reales). Google usa field data para ranking, así que ese es el que importa. Las herramientas oficiales:
• PageSpeed Insights (pagespeed.web.dev): muestra ambos tipos. La pestaña inferior con datos del CrUX (Chrome User Experience Report) es field data real de tus visitantes. • Search Console > Core Web Vitals: muestra agregados de field data por URL y categoriza páginas con problemas. • Chrome DevTools > Lighthouse: lab data útil para diagnóstico. • Web Vitals Chrome Extension: medición en tiempo real mientras navegas.
Una trampa común: optimizar solo lab data y descuidar field data. Tu sitio puede tener 95 en Lighthouse y aun así fallar en field data si tus usuarios reales tienen redes lentas, dispositivos viejos o si hay scripts de terceros pesados.
Las 6 optimizaciones con mayor impacto en LCP
1) Comprimir y servir imágenes en formatos modernos (AVIF o WebP). Una imagen JPEG de 1.5MB suele convertirse a 200KB en AVIF sin pérdida visible. En Next.js, el componente <Image> hace esto automáticamente.
2) Definir width y height en imágenes. Sin dimensiones, el navegador no reserva espacio y el layout salta cuando carga (afecta CLS y LCP).
3) Usar priority en la imagen del héroe. Le dice al navegador que precargue ese asset antes que otros.
4) Eliminar render-blocking resources. CSS y JavaScript críticos deben ir inline; los no críticos, deferidos.
5) Usar un CDN. Si tu hosting está en EE.UU. y tus visitantes en México, agregar un CDN como Vercel o Cloudflare reduce latencia 50-200ms.
6) Quitar fonts pesadas o subset. Cargar 6 weights de Google Fonts pesa más que el HTML. Carga solo los que usas y considera font-display: swap.
Las 4 optimizaciones con mayor impacto en INP
1) Reducir JavaScript de terceros. Cada script externo (chat, analytics, píxeles, ads) compite por el thread principal. Audita cuáles son realmente esenciales y carga el resto en defer o cuando se necesiten.
2) Code splitting agresivo. No cargues todo el JS de tu sitio en cada página. En Next.js, el routing automático ya divide; en otros frameworks, usa imports dinámicos.
3) Mover trabajo pesado a Web Workers. Procesamiento intensivo (filtros, búsquedas, parsing de datos) bloquea el thread principal y degrada INP. Los workers lo paralelizan.
4) Evitar layout thrashing. Animaciones que cambian propiedades como width, height o margin obligan al navegador a recalcular layout. Usa transform y opacity, que se animan en GPU sin bloquear.
Las 3 optimizaciones con mayor impacto en CLS
1) Reservar espacio para ads, embeds y banners. Si vas a meter un anuncio de 728x90, define ese contenedor desde el HTML inicial — no esperes a que el script de ads inyecte el div.
2) Cargar fonts con font-display: swap y un fallback bien dimensionado. Con size-adjust en CSS puedes igualar la métrica de la fuente fallback con la principal y eliminar el salto.
3) No insertar contenido encima de contenido existente. Banners de cookies, notificaciones o avisos legales deben aparecer fijos al borde, no empujar el contenido hacia abajo. Si necesitan empujar, déjalo desde el HTML inicial — no inyectarlo dinámicamente con JS.
Conclusión
Core Web Vitals dejaron de ser un tema técnico para convertirse en una decisión de negocio. Un sitio con buenas Core Web Vitals tiene mayor tasa de conversión, menor tasa de rebote, mejor ranking en Google y mejor reputación de marca. Para una PyME mexicana en 2026, el costo de no optimizar es perder ventas frente a competidores que sí lo hicieron. La buena noticia es que las optimizaciones más impactantes son sencillas: imágenes modernas, menos scripts de terceros, espacio reservado para elementos dinámicos. Empezar por ahí ya te pone delante del 70% de los sitios mexicanos.
PREGUNTAS FRECUENTES
¿Necesito un desarrollador para optimizar Core Web Vitals?+
Para optimizaciones básicas (comprimir imágenes, quitar scripts innecesarios, ajustar plugins) muchas PyMEs pueden hacerlo solas si usan WordPress, Shopify o plataformas similares con plugins de performance. Para optimizaciones avanzadas (code splitting, server-side rendering, refactor de CSS) sí necesitas un desarrollador o una agencia. Sitios construidos en Next.js o frameworks modernos llegan a buenos Core Web Vitals casi por defecto si están bien implementados.
¿WordPress puede tener buenas Core Web Vitals?+
Sí, pero requiere disciplina: theme ligero, plugins mínimos (cada uno suma JS y CSS), un buen plugin de cache (WP Rocket, LiteSpeed), CDN, y compresión de imágenes. El problema típico no es WordPress en sí, sino la combinación de muchos plugins, un theme pesado y temas mal optimizados. Una PyME con un sitio sencillo puede llegar a verde en los tres Core Web Vitals con WordPress bien configurado.
¿Qué tanto afectan Core Web Vitals al SEO?+
Son factor de ranking pero no el único ni el más importante. Google los usa especialmente como desempate entre páginas con contenido similar y autoridad parecida. Una página con mejor contenido puede rankear sobre una página rápida con contenido pobre. La regla práctica: optimiza Core Web Vitals como hygiene factor (no quieres que sean tu cuello de botella), pero no esperes que arreglen un sitio con problemas de contenido o autoridad.
¿Qué impacto tienen Core Web Vitals en conversiones?+
El impacto es directo y medible. Google publicó datos de su retail group que muestran: cada 0.1s de mejora en LCP se traduce en 8% más conversiones en mobile e-commerce. Un estudio de Deloitte encontró que 0.1s de mejora en speed impacta hasta 10% el revenue. Para PyMEs con conversión digital, optimizar Core Web Vitals es una de las inversiones con mejor ROI.
Nebugrama · Laboratorio Creativo
Agencia creativa en CDMX especializada en branding estratégico, identidad visual y marketing digital para PYMEs mexicanas. Combinamos estrategia y diseño en un solo proceso riguroso.
nebugrama.com →