Qué es LCP y por qué 4s es el límite
El Largest Contentful Paint (LCP) mide el tiempo hasta que el elemento más grande visible en el viewport es renderizado por el navegador. En e-commerce, ese elemento casi siempre es la imagen hero del producto o el banner principal.
Google clasifica LCP en tres rangos:
| LCP | Clasificación | Impacto |
|---|---|---|
| ≤ 2,5s | Bueno | Sin penalización en el ranking |
| 2,5s – 4s | Necesita mejorar | Riesgo creciente de pérdida de posición |
| > 4s | Malo | Impacto directo en ranking y conversión |
Estudios de Google y Cloudflare muestran que cada segundo adicional de carga reduce la tasa de conversión hasta un 7%. Para una tienda que factura $50.000/mes, un LCP malo puede costar $3.500 por segundo extra.
Caso real: Una tienda de moda con LCP de 5,8s en mobile que se redujo a 2,1s tras eliminar 4 apps de marketing y optimizar la imagen hero. Resultado: +22% en la tasa de conversión en 30 días.
Antes de la optimización
Después de la optimización
Ganancia principal: eliminación de 4 apps de marketing + hero image WebP + fetchpriority="high" en imagen hero
Cómo medir el LCP de tu tienda Shopify
Antes de corregir, necesitas saber dónde está el problema. Hay dos formas de medir: datos de campo (usuarios reales) y datos de laboratorio (simulación).
PageSpeed Insights (recomendado para empezar)
Ve a pagespeed.web.dev y pega la URL de tu página principal y de tu página de producto. El informe muestra el LCP medido en campo (CrUX data) y en laboratorio (Lighthouse). Siempre prueba en mobile — ahí está la mayoría de tus clientes.
Chrome DevTools — Performance Tab
Abre DevTools (F12), ve a Performance, presiona Ctrl+Shift+R para grabar y recargar. Tras la grabación, haz clic en "Timings" y localiza el marcador LCP. Esto muestra exactamente qué elemento fue el LCP y en qué timestamp apareció.
Web Vitals Chrome Extension
Instala la extensión Web Vitals de Google. Muestra LCP, CLS e INP en tiempo real mientras navegas por la tienda. Útil para probar diferentes páginas rápidamente.
Las 4 causas más comunes de LCP alto en Shopify
1. Imagen hero sin optimización
Es la causa número uno. Las tiendas Shopify frecuentemente cargan imágenes hero de 2MB+ sin compresión, sin WebP y sin el atributo fetchpriority="high". El navegador no sabe que esa es la imagen más importante de la página.
Cómo identificar: En PageSpeed Insights, haz clic en "Oportunidades" y busca "Properly size images" y "Serve images in next-gen formats". Si la imagen hero aparece ahí, ese es el problema.
Comprimir la imagen
Usa Squoosh.app o TinyPNG para reducir el tamaño sin pérdida visual perceptible. Meta: imagen hero por debajo de 150KB en WebP.
Agregar fetchpriority en el tema
En tu tema Shopify, localiza el código de la imagen hero y agrega fetchpriority="high" loading="eager". Esto le indica al navegador que priorice la descarga.
Usar el CDN de Shopify correctamente
Shopify sirve imágenes vía CDN automáticamente, pero debes usar los parámetros correctos: image_url | image_tag: width: 1200, format: 'webp' en Liquid.
2. Apps que inyectan scripts de renderizado bloqueante
Cada app instalada en Shopify puede inyectar JavaScript en el <head> de la página. Si esos scripts son síncronos (sin async o defer), bloquean el renderizado hasta cargarse completamente — antes de que aparezca cualquier elemento visual en pantalla.
Apps comunes que causan este problema: chat en vivo (Tidio, Gorgias), programas de fidelización (Smile.io), reviews (Yotpo, Okendo) y FOMO popups.
Diagnóstico rápido: En Chrome DevTools → pestaña Network → filtra por "JS" → recarga la página. Identifica scripts externos de dominios de terceros que cargan antes que la imagen hero. Esos son los candidatos a eliminar o diferir.
3. Tema con JavaScript bloqueante en <head>
Temas de calidad inferior — o temas personalizados sin revisión de performance — frecuentemente incluyen scripts en el <head> sin los atributos correctos. Esto retrasa el momento en que el navegador puede empezar a renderizar cualquier cosa.
En Shopify, revisa tu archivo theme.liquid. Todo script que no sea crítico para el above-the-fold debe tener defer o ser movido antes del </body>.
// Malo — bloquea el renderizado
<script src="{{ 'app.js' | asset_url }}"></script>
// Correcto — carga sin bloquear
<script src="{{ 'app.js' | asset_url }}" defer></script>4. Respuesta lenta del servidor (TTFB alto)
Si el TTFB (Time to First Byte) está por encima de 800ms, el navegador espera al servidor antes de iniciar cualquier renderizado. En Shopify, esto raramente es problema del servidor en sí, pero puede ser causado por apps que agregan middleware pesado (como apps de personalización basadas en cookies o geo-location).
Cómo verificar: En PageSpeed Insights, busca "Reduce server response times (TTFB)". Un TTFB por encima de 600ms en Shopify casi siempre indica una app mal configurada o una integración externa lenta.
Plan de corrección paso a paso
Aborda los problemas en este orden — del mayor al menor impacto:
Mide el LCP actual y anota el elemento LCP
Usa PageSpeed Insights en tu homepage y página de producto. Anota el LCP en ms y qué elemento fue identificado.
Desactiva apps una por una y vuelve a medir
Crea una página de prueba o usa el modo de desarrollo. Desactiva apps de terceros temporalmente y mide el LCP en cada iteración para identificar al culpable.
Optimiza la imagen hero
Comprime, convierte a WebP, agrega fetchpriority="high" y loading="eager". Vuelve a medir.
Audita los scripts en <head>
Revisa theme.liquid y agrega defer/async a todos los scripts no críticos. Verifica el Network tab para scripts de terceros bloqueantes.
Monitorea continuamente
Configura una alerta en PageSpeed Insights o usa Shopify Analytics para seguir la velocidad tras cada cambio nuevo.
Resultados esperados tras las correcciones
Con las optimizaciones aplicadas correctamente, es razonable esperar:
- Reducción de LCP de 5s+ a 2s–2,5s en tiendas con imágenes mal optimizadas
- Reducción de 1s–1,5s solo con la eliminación o aplazamiento de scripts de apps
- Mejora visible en el Shopify Speed Score (de 20–40 a 60–80+)
- Aumento de conversión de 10%–25% en casos documentados
Importante: Los resultados varían por tienda, nicho y perfil de tráfico. El impacto en conversión es más visible en tiendas con tráfico predominantemente mobile y en categorías de precio medio-alto, donde el usuario investiga más antes de comprar.
Cuándo llamar a un especialista
Si tras las optimizaciones básicas el LCP sigue por encima de 3s, el problema probablemente es estructural: scripts de apps que no se pueden eliminar fácilmente, tema legacy con arquitectura de performance deficiente, o integraciones externas mal implementadas.
En estos casos, un diagnóstico técnico profundo — que analiza el waterfall completo, hilo principal, scripts síncronos, critical rendering path y configuración de imagen en Liquid — suele revelar el problema en menos de 2 horas de análisis.
¿Tu tienda Shopify sigue lenta después de intentar estas correcciones?
Hago diagnóstico técnico completo de LCP, INP y CLS con análisis de waterfall, identificación de scripts bloqueantes y mapa de corrección priorizado. Resultado entregado en hasta 48h, sin compromiso de contratación.