Core Web Vitals en E-commerce: Guía Práctica 2026

Por qué Core Web Vitals importa en e-commerce

En e-commerce, cada décima de segundo cuenta. Google confirmó que las Core Web Vitals son un factor de ranking en su documentación oficial sobre Page Experience, pero más allá del SEO, el impacto real está en conversión.

Un estudio interno que realizamos mostró que mejorar el LCP en 0.5s aumentó la conversión en un 3.2% en mobile. No es magia, es física: menos tiempo de espera, menos abandono.

LCP: El gran reto de las tiendas online

El Largest Contentful Paint suele ser la métrica más difícil de optimizar en e-commerce. Los culpables habituales:

• Imágenes de producto sin optimizar: WebP o AVIF son obligatorios en 2026
• Carruseles en homepage: El hero slider es un asesino de LCP
• Fonts blocking render: Usar font-display: swap siempre

Solución práctica

<!-- Preload de la imagen hero -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Fonts con swap -->
<style>
  @font-face {
    font-family: 'Plus Jakarta Sans';
    font-display: swap;
    src: url('/fonts/plus-jakarta.woff2') format('woff2');
  }
</style>

La clave está en priorizar. El navegador no puede cargar todo a la vez, así que hay que decirle qué es crítico. Google lo explica bien en su guía de optimización de LCP.

INP: La nueva métrica de interactividad

INP (Interaction to Next Paint) reemplazó a FID en marzo 2024. La diferencia fundamental: mide la latencia de TODAS las interacciones, no solo la primera.

En e-commerce, los problemas típicos de INP:

1. Filtros de producto pesados: Re-renders masivos en cada selección
2. Add to cart con mucho JavaScript: Tracking, analytics, popups
3. Mega menús complejos: Demasiados event listeners

Mi enfoque

Uso requestIdleCallback para tareas no críticas y debounce agresivo en filtros:

// Debounce de filtros - esperar que el usuario termine de seleccionar
let filterTimeout;
function handleFilterChange(filter) {
  clearTimeout(filterTimeout);
  filterTimeout = setTimeout(() => {
    applyFilters(filter);
  }, 150);
}

El objetivo es que cada interacción responda en menos de 200ms. Si un filtro tarda más, el usuario lo percibe como lento.

CLS: Evitar los saltos de layout

El Cumulative Layout Shift en e-commerce viene casi siempre de:

• Imágenes sin dimensiones definidas
• Banners promocionales que cargan tarde
• Reviews y ratings que aparecen después
• Botones de “Añadir al carrito” que cambian de tamaño

La regla de oro

Reservar espacio siempre. Usar aspect-ratio en CSS es la solución más limpia:

.product-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

Para banners dinámicos, definir una altura mínima aunque el contenido tarde en cargar.

Herramientas que uso a diario

• PageSpeed Insights: Para diagnóstico inicial y datos de campo
• Web Vitals extension: Monitoreo en tiempo real durante desarrollo
• CrUX Dashboard: Datos de usuarios reales, no de laboratorio
• Lighthouse CI: Integrado en el pipeline de deploy para detectar regresiones

Los datos de laboratorio (Lighthouse) son útiles para debuggear, pero las decisiones de negocio deben basarse en datos de campo (CrUX). Google usa datos de campo para el ranking, según su documentación de Page Experience.

Priorización en e-commerce

Si tuviera que elegir dónde invertir tiempo:

1. LCP de imágenes de producto: Es lo primero que ve el usuario
2. INP en filtros y add-to-cart: Son las interacciones críticas
3. CLS en listings y fichas: Evitar que el usuario haga clic donde no quería

El resto son optimizaciones secundarias. Mejor hacer bien estas tres que intentar optimizar todo a medias.