Core Web Vitals para E-commerce: Checklist y Optimización 2026

Introducción: Por Qué Core Web Vitals Es Tu Prioridad #1

Google no negocia sobre velocidad. Desde 2021, Core Web Vitals es un factor de ranking directo, y en 2026, la competencia es implacable. Si tu tienda online carga lentamente, pierdes dinero en dos formas: primero, directamente en ventas perdidas (cada segundo lento = -7% conversiones), y segundo, indirectamente en tráfico orgánico que Google nunca te envía.

Aquí está el dato que debería asustarte: Amazon pierde $1.6 mil millones anuales por cada segundo adicional de carga. Para tu e-commerce, esto se traduce en cifras concretas: un segundo más lento = clientes yéndose a competencia.

Este artículo es un checklist técnico y accionable. Si lo implementas completamente, esperamos que mejores tu Core Web Vitals en 2-4 semanas y veas incrementos medibles en conversiones dentro de 30-60 días.

Parte 1: Entendiendo Core Web Vitals (Las 3 Métricas Que Google Mide)

LCP (Largest Contentful Paint): La Métrica Más Importante

¿Qué mide? El tiempo que tarda el elemento más grande visible en la pantalla en cargar. En 90%+ de tiendas online, esto es tu imagen de producto principal o tu banner hero.

¿Por qué importa? Es la primera señal que recibe el usuario: «¿está cargando este sitio o se quedó congelado?» Si LCP es lento, el usuario siente que todo es lento, incluso si el resto del sitio es rápido.

Target: < 2.5 segundos

El impacto en conversiones es brutal:

• Páginas con LCP < 2.5s: Conversión máxima
• Páginas que cargan en 1-2 segundos: 3.05% conversion rate (promedio industria: 2%)
• Páginas que cargan en 2.4s vs 3.3s: -23% caída en conversiones
• Snapdeal: mejorando LCP en 0.4s = 360K órdenes adicionales/día

FID → INP: El Cambio Crítico de 2024

¿Qué cambió? Google reemplazó FID (First Input Delay) con INP (Interaction to Next Paint) en marzo 2024. La razón: FID solo medía el primer click. INP mide todas las interacciones: clicks, typing, scrolling.

¿Por qué? Los usuarios no solo hacen un click. Hacen click → escriben → scrollean → hacen click de nuevo. INP mide cómo responde tu sitio a la suma de todas esas interacciones.

Target: < 200 ms

El riesgo: Muchos sitios pasan FID pero fracasan en INP porque tienen JavaScript pesado que corre después de la carga inicial.

CLS (Cumulative Layout Shift): El Invisible Killer

¿Qué mide? Cuánto se «mueve» visualmente el contenido de tu página mientras carga. Imagina esto: ves un botón «Comprar», haces click, pero justo cuando das click, el botón desaparece porque una imagen se carga debajo y lo empuja. Click accidental. Cliente furioso. Eso es CLS alto.

Target: < 0.1 (idealmente 75%+ de page views con CLS ≤ 0.1)

El costo real:

• CLS > 0.25 = 50%+ bounce rate aumentado
• Accidental clicks: cliente compra producto equivocado, devuelve, mala reseña
• E-commerce que redujo CLS by 20% = 15% menos refunds

Parte 2: Identificar Dónde Estás Ahora (Diagnóstico en 5 Minutos)

Step 1: Google PageSpeed Insights (El Punto de Partida)

Ve a https://pagespeed.web.dev y pega tu URL.

Qué buscar:

• «Core Web Vitals Status» – Si está rojo, tienes problema
• LCP – Si > 2.5s, es prioridad #1
• INP – Si > 200ms, tienes JavaScript pesado
• CLS – Si > 0.1, busca imágenes sin dimensions o ads sin espacio reservado

Screenshot recomendado: Guarda en carpeta «Before Optimization» para comparar después.

Step 2: Chrome DevTools – Performance Tab (Ir Más Profundo)

1. Abre tu product page en Chrome
2. Press F12 → Performance tab
3. Click el círculo rojo (Record)
4. Refresh la página
5. Espera a que cargue completamente (~3-5 segundos)
6. Click el círculo rojo de nuevo (Stop)

Qué observar:

• Timeline: ¿Dónde está el salto en verde (LCP)?
• Si LCP está en 5+ segundos, tu imagen de producto es el culpable

Step 3: Google Search Console – Core Web Vitals Report

1. Google Search Console → Core Web Vitals
2. Busca «Poor» (rojo)
3. Haz click en «Poor URLs» → ve a producto específico

Por qué esto importa: PageSpeed Insights te muestra un laboratorio, pero Search Console te muestra datos reales de usuarios. Si difieren, confía en Search Console. Lee la guía completa para optimizar el SEO de tu e-commerce

Parte 3: Optimización de LCP (El 80/20 de Core Web Vitals)

El Quick Win: 30 Minutos Para Mejorar 0.5-1.0 Segundos

Si solo tienes 30 minutos, haz estos 4 cambios:

1. Añade loading="eager" + fetchpriority="high" a Tu Imagen LCP

Busca: Tu main product image en el HTML (usualmente en product.liquid en Shopify, product template en WooCommerce)

Cambio:

xml<!-- ANTES (malo) -->
<img src="{{ product.image }}" alt="{{ product.title }}">

<!-- DESPUÉS (bueno) -->
<img src="{{ product.image }}" 
     alt="{{ product.title }}" 
     loading="eager" 
     fetchpriority="high"
     width="800"
     height="800">

Por qué funciona: loading="eager" le dice al navegador «no esperes, descarga esta imagen AHORA». fetchpriority="high" le da prioridad sobre otras descargas. width/height = evita CLS.

Impacto esperado: -0.3 a -0.8 segundos en LCP

2. Comprime Imágenes a WebP (Reducción 30-50%)

Shopify: Ya lo hace automáticamente. Solo verifica que estés usando imágenes bien optimizadas.

WooCommerce:

• Instala plugin Smush o ShortPixel (ambos free)
• En configuración: Enable «Convert to WebP»
• Ejecuta «Bulk Optimization» en todas tus imágenes

Impacto esperado: -0.2 a -0.5 segundos

Tamaño típico:

• JPEG original: 500KB
• WebP comprimido: 150-200KB
• Ahorros de ancho de banda: 60-70%

3. Preload Critical Fonts

Si usas custom fonts (ej: Montserrat, Open Sans), el navegador tiene que:

1. Descargar CSS
2. Ver que hay una font custom
3. Descargar la font
4. Renderizar text

Eso son 3-4 requests. Preloading las acelera.

En <head> de tu sitio:

xml<link rel="preload" as="font" href="/fonts/montserrat.woff2" type="font/woff2" crossorigin>

Impacto esperado: -0.1 a -0.3 segundos

4. Lazy Load TODO Excepto LCP

xml<!-- LCP image - EAGER -->
<img src="product-main.jpg" loading="eager" fetchpriority="high">

<!-- Below-the-fold images - LAZY -->
<img src="product-alternate.jpg" loading="lazy">
<img src="product-reviews.jpg" loading="lazy">

Por qué: Lazy loading retrasa LCP si lo aplicas al hero. Solo lazy load imágenes debajo del fold.

Impacto esperado: -0.2 a -0.4 segundos (al cargar página secundarias)

Optimizaciones Intermedias (45-90 Minutos)

5. Implementa CDN Global (Shopify ✅ Ya lo Tiene, WooCommerce ⚠️ Revisa)

Para Shopify: Cloudflare free siempre ayuda, pero Shopify ya usa Fastly + Cloudflare. Check: PageSpeed debería mostrar «Serve images in modern formats» → WEbP conversion.

Para WooCommerce:

• Integra Cloudflare (free tier): Reduce latencia 30-50%
• O BunnyCDN (pago, pero barato): $0.01-0.03 per GB
• CDN = sirve imágenes desde servidor cercano a usuario

Impacto esperado: -0.3 a -0.8 segundos (especialmente para usuarios lejanos)

6. Optimiza CSS Rendering-Blocking

El problema: Navegador descarga CSS, renderiza, renderiza, renderiza… mientras usuario ve pantalla blanca.

La solución: Inline critical CSS (CSS needed for above-the-fold)

Herramientas:

• Shopify: Usa app Crush ($5/mes)
• WooCommerce: Plugin WP Rocket (automático con Pro)
• DIY: https://criticalcss.com

Impacto esperado: -0.15 a -0.4 segundos

7. Remove Unused Apps/Plugins

Cada app = JavaScript adicional = lentitud

Tipicamente:

• Cada app agrega 50-200KB de JavaScript
• 5 apps = 250KB-1MB adicional
• En mobile 4G lento, eso es 2-4 segundos de descarga

Auditoría:

1. Shopify: Settings → Apps → Ordena por «Apps» alfabético, desinstala los no usados
2. WooCommerce: Plugins → Desactiva plugins que no usas (O desinstala)

Apps a cuestionable:

• Múltiples «loyalty programs» (usa 1)
• Multiple «review apps» (usa 1)
• Live chat que NO está optimizado
• Pop-up builders que son pesados

Impacto esperado: -0.2 a -1.0 segundos (si removés 3-5 apps lentos)

Parte 4: Optimización de CLS (Cumulative Layout Shift)

El Mayor Error: Imágenes Sin Dimensions

Problema: Navegador no sabe cuánto espacio va a ocupar una imagen, entonces renderiza texto primero, luego la imagen llega, y TODO se mueve.

Solución: Especifica width + height en TODAS las imágenes

xml<!-- MAL -->
<img src="product.jpg" alt="Zapato">

<!-- BIEN -->
<img src="product.jpg" alt="Zapato" width="800" height="600">

<!-- MEJOR (con aspect-ratio CSS) -->
<img src="product.jpg" alt="Zapato" width="800" height="600" 
     style="aspect-ratio: 4/3;">

Impacto: -0.05 a -0.15 CLS

Custom Fonts: Font-Display Strategy

Problema: Browser descarga custom font → user ve espacio en blanco (FOIT = Flash Of Invisible Text) → text aparece → layout shift

Solución: font-display: swap;

En tu CSS:

css@font-face {
  font-family: 'Montserrat';
  src: url('montserrat.woff2') format('woff2');
  font-display: swap; /* Muestra fallback font, luego swap a custom */
}

Opciones:

• auto – Navegador decide (riesgoso)
• swap – Muestra fallback, luego custom (RECOMENDADO)
• block – Bloquea rendering hasta que carga (MAL)
• fallback – Espera 100ms, si no carga, usa fallback, permite swap después (bueno)

Impacto: -0.05 a -0.10 CLS

Ads: Siempre Reserva Espacio

Problema: Ad network carga un ad de tamaño diferente → pushea todo el contenido

Solución: Declare un contenedor con fixed height

xml<!-- Reserve espacio ANTES que el ad cargue -->
<div id="ad-container" style="height: 250px; width: 300px; background: #f0f0f0;">
  <!-- Ad se inyecta aquí, dentro del espacio reservado -->
</div>

Impacto: -0.10 a -0.25 CLS (si antes tenías ads sin espacio)

Evita Inyectar Contenido Dinámico Arriba del Fold

Problema: JavaScript carga datos y los inyecta en la parte superior de la página → todo se mueve

Solución: Inyecta DESPUÉS que el usuario interactúe, O en un lugar que no desplace contenido visible

javascript// MAL - inyecta arriba del fold
document.querySelector('header').innerHTML += `<div>Nuevas ofertas</div>`;

// BIEN - inyecta en popup o área reservada
document.querySelector('#offers-container').innerHTML = offersHTML;

Parte 5: Optimización de INP (Interaction to Next Paint)

El Culpable: JavaScript Pesado

Problema: User hace click → JavaScript tarda 500ms en ejecutarse → button no responde

Solución: Haz que JavaScript sea más ligero y más rápido

Quick Win 1: Defer Non-Critical JavaScript

En <head> o antes de </body>:

xml<!-- CRÍTICO - carga normal -->
<script src="critical.js"></script>

<!-- NO CRÍTICO - deferred -->
<script src="analytics.js" defer></script>
<script src="chat.js" defer></script>
<script src="ads.js" defer></script>

defer = carga el script pero ejecuta DESPUÉS que el DOM se haya renderizado

Shopify:

• Theme settings → busca «Defer JavaScript execution» (si tu tema lo soporta)
• O instala app Crush que lo automátiza

WooCommerce:

• Plugin WP Rocket → Settings → File Optimization → Defer JavaScript
• Plugin Perfmatters → Defer Javascript por página

Impacto esperado: -100 a -300ms INP

Quick Win 2: Remove Unused Code Splits

El problema: Descargas TODO el JavaScript, incluso code que no usas en esa página

Solución: Code splitting – solo carga JavaScript necesario para esa página

Ejemplo: Página de HOME no necesita «Add to cart» logic. Page de PRODUCTO sí.

WooCommerce:

• Plugin Asset CleanUp → especifica qué scripts en qué páginas

Shopify:

• Revisa tu tema: tiene «conditional loading» para distintas page types?

Impacto esperado: -50 a -150ms INP

Quick Win 3: Eliminate Long Tasks

JavaScript tiene un límite: el navegador puede ejecutar máximo 50ms de JavaScript continuo antes que se bloqueen las interacciones.

Busca en DevTools:

1. Performance tab → Record
2. Interactúa con sitio (haz click, scrollea)
3. Busca barras rojas > 50ms
4. Esas son «Long tasks»

Si un task tarda 200ms, divídelo en 4 tasks de 50ms cada uno:

javascript// MAL - Long task de 200ms
function processLargeData() {
  for (let i = 0; i < 1000000; i++) {
    expensiveOperation(i);
  }
}

// BIEN - Chunked en 4 tasks
function processLargeData() {
  const chunkSize = 250000;
  for (let i = 0; i < 1000000; i += chunkSize) {
    setTimeout(() => {
      for (let j = i; j < i + chunkSize; j++) {
        expensiveOperation(j);
      }
    }, 0);
  }
}

Impacto esperado: -100 a -400ms INP

Parte 6: Plan de Acción por Plataforma

Para Shopify Stores

Semana 1:

1. PageSpeed Insights audit
2. Añade loading="eager" fetchpriority="high" a hero image
3. Verifica que WebP está habilitado (automático en Shopify)
4. Desinstala 2-3 apps lentos

Semana 2:

1. Instala Crush app ($5/mes) → automáticamente optimiza
2. O manualmente: inline critical CSS
3. Test con PageSpeed
4. Google Search Console report → verifica cambios

Impacto esperado: 60-75% de mejora en Core Web Vitals score

Para WooCommerce Stores

Semana 1:

1. PageSpeed Insights audit
2. Instala plugin WP Rocket ($59/año)
3. Activa: Defer JavaScript, Remove Unused CSS, Image Optimization
4. En settings: Enable «LazyLoad all images»

Semana 2:

1. Instala Cloudflare (free CDN)
2. Images → respons ive images + WebP conversion
3. Compress images con ShortPixel bulk tool
4. Test con PageSpeed

Impacto esperado: 55-65% de mejora

Para Custom E-commerce (Headless, Next.js, etc.)

Implementación Técnica:

xml<!-- Preload LCP image -->
<link rel="preload" as="image" href="/product-hero.jpg" fetchpriority="high">

<!-- Inline critical CSS -->
<style>
  .hero { ... } /* CSS needed for above-the-fold */
</style>

<!-- Defer non-critical JavaScript -->
<script defer src="/analytics.js"></script>
<script defer src="/chat.js"></script>

Testing:

bashnpm install -g lighthouse
lighthouse https://your-store.com --view

Parte 7: Monitoring – Cómo Saber Que Está Funcionando

Setup Google Search Console Alerts

Por qué: PageSpeed Insights es «lab data» (controlado). Search Console es «field data» (real users)

1. Google Search Console → Core Web Vitals
2. Si ves cambios a «Good» → está funcionando
3. If «Poor» aparece nuevamente → regresión (probablemente nuevo app/plugin)

Create Performance Baseline

Crea spreadsheet con estos datos AHORA (antes de optimizar):

Revisa CADA SEMANA los primeros 30 días, luego mensualmente.

GA4 Tracking

Configura GA4 para rastrear conversiones por rango de velocidad:

1. GA4 → Custom Events
2. Create event: «Web Vitals»
3. Dimensions: LCP, INP, CLS values
4. Explore: Conversión by Web Vitals score

Resultado: Sabrás exactamente: «Los usuarios con INP > 300ms convierten 40% menos»

Parte 8: Checklist Final (Imprime Esto)

Pre-Launch Checklist

•  LCP image tiene loading="eager" fetchpriority="high" width height
•  TODAS las imágenes tienen width y height
•  WebP conversion habilitado (Shopify auto, WooCommerce: plugin)
•  Lazy loading en imágenes below-the-fold
•  Critical CSS inlined (WP Rocket, Crush, o manual)
•  Custom fonts con font-display: swap
•  Ad containers tienen espacio reservado (height declarado)
•  Removed 3+ apps/plugins no usados
•  JavaScript defer setup completo
•  CDN activo (Shopify: ya, WooCommerce: Cloudflare/BunnyCDN)

Monitoring Checklist (Weekly)

•  PageSpeed Insights score: desktop ≥80, mobile ≥60
•  Google Search Console: «Good» en Core Web Vitals report
•  No nuevas regresiones en rankings
•  Conversion rate trending +
•  Bounce rate trending –

Parte 9: Errores Comunes (NO Hagas Esto)

❌ Lazy load la imagen LCP
→ La hace MÁS lenta, no más rápida. Solo lazy load images below-the-fold.

❌ Preload TODAS las imágenes
→ Desperdicia ancho de banda. Solo preload LCP + critical fonts.

❌ Instalar 10 speed optimization apps
→ Cada app agrega código. 1-2 es máximo. Más = slower.

❌ Optimizar desktop ignorando mobile
→ 73%+ del tráfico es móvil. Mobile debe ser PRIORIDAD.

❌ Cambiar hosting sin migrar bien
→ Muchos cambian hosting, pero olvidan: cacheing, CDN, SSL renewal. Resultado: página más lenta.

Conclusión: El ROI de Optimizar Core Web Vitals

Inversión: 2-4 horas tu tiempo (O $0 si auto, O $5-$59/mes en apps)

ROI:

• +30-50% tráfico orgánico (mejor rankings)
• +8-15% conversiones (velocidad = más ventas)
• -15-30% bounce rate (usuarios se quedan)
• +2-4% repeat customer rate (experiencia rápida = loyalty)

Caso real: Sneaker store en Miami

• LCP: 5.8s → 1.9s
• Conversion: 1.2% → 3.4% (+183%)
• Monthly revenue: +$180,000

Tu Core Web Vitals no son «nice to have». Son dinero directo. Empieza hoy.