Contenido del artículo
- Los 3 Core Web Vitals que importan en 2026 (y cuál suele estar en rojo)
- Las 4 causas más comunes de mal performance en Shopify (y cómo arreglarlas)
- Causa 1 — Theme antiguo no basado en Online Store 2.0
- Causa 2 — Apps que cargan JavaScript en todas las páginas
- Causa 3 — Imágenes sin optimizar
- Causa 4 — Fonts mal cargadas
- El checklist completo de optimización Shopify (en orden de impacto)
- Cómo medir bien (sin engañarte)
- Tres herramientas para medir bien
- Cuándo SÍ migrar a Hydrogen (headless)
- Preguntas frecuentes
- ¿Se puede tener Core Web Vitals verdes en Shopify sin migrar a headless?
- ¿Qué Core Web Vitals importan más para Shopify en 2026?
- ¿El theme Dawn de Shopify es bueno para performance?
- ¿Las apps de Shopify están sangrando mi performance?
- ¿Cómo optimizar imágenes en Shopify sin apps?
- ¿Cuándo SÍ vale la pena migrar a Hydrogen (headless) en Shopify?
- ¿Cómo medir el performance real de mi Shopify?
TL;DR: Core Web Vitals verdes en Shopify (LCP <2.5s, CLS <0.1, INP <200ms) son alcanzables sin migrar a headless. Las cuatro causas más comunes del problema: theme antiguo no basado en Online Store 2.0, apps que cargan JavaScript en todas las páginas, imágenes sin optimizar, y fonts mal cargadas. 80% de las tiendas mejoran 30+ puntos en Lighthouse mobile al arreglar estos cuatro frentes. Migrar a Hydrogen (headless) solo se justifica cuando ya optimizaste todo lo demás y necesitas LCP <1.5s consistente.
#Los 3 Core Web Vitals que importan en 2026 (y cuál suele estar en rojo)
Google evalúa el performance con Core Web Vitals, métricas reales de Chrome User Experience Report (CrUX) basadas en visitas de usuarios reales en los últimos 28 días. En 2026 son tres:
#Las 4 causas más comunes de mal performance en Shopify (y cómo arreglarlas)
#Causa 1 — Theme antiguo no basado en Online Store 2.0
Shopify lanzó Online Store 2.0 en 2021 con arquitectura completamente nueva: secciones modulares JSON, JavaScript modular, CSS crítico inline. Themes pre-2.0 cargan CSS y JS monolíticos en cada página. Si tu theme tiene 3+ años y nunca migró a OS 2.0, tu LCP típicamente está en 4-6s, casi imposible de bajar a 2.5s sin cambiar de theme.
La solución: migrar a Dawn (theme oficial de Shopify, gratis y basado en OS 2.0) o a uno premium reciente que use OS 2.0. Esto solo ya puede subir 25-35 puntos en Lighthouse mobile.
#Causa 2 — Apps que cargan JavaScript en todas las páginas
Cada app que instalas en Shopify típicamente inyecta JavaScript en el `<head>` o `<body>` que se descarga, parsea y ejecuta en CADA página. Aun si la app solo se usa en checkout (ej. upsell), su JS se carga en la home, en categorías, en producto. Esto agrega 100-500KB de JS bloqueante.
Audita las apps con esta receta:
- • Abre Chrome DevTools → Network → filtra por "JS"
- • Recarga la página de producto
- • Ordena por tamaño descendente
- • Identifica scripts de terceros (NO son de Shopify ni de tu theme)
- • Por cada uno, evalúa: ¿la app justifica el costo en KB?
#Causa 3 — Imágenes sin optimizar
Es lo más común y lo más fácil de arreglar. Shopify CDN redimensiona automáticamente las imágenes — pero solo si lo pides explícitamente en Liquid con el filtro image_url.
Antes (mal — carga imagen original de 3MP):
Después (bien — redimensiona vía CDN):
Esto solo ya baja el peso de imágenes entre 60-80%. No necesitas apps como TinyIMG, Crush.pics o similar — el CDN de Shopify ya hace el trabajo.
Adicional para imágenes: atributo `loading="lazy"` en todo lo below-the-fold. Atributos `width` y `height` explícitos para evitar layout shift (mejora CLS).
#Causa 4 — Fonts mal cargadas
Las fonts custom son el segundo culpable mayor de LCP malo. Por default Shopify carga Google Fonts via `<link>` que bloquea render. Si tu theme tiene 4-5 fonts (regular, medium, bold, italic), eso son 5 requests bloqueantes antes del LCP.
La solución:
- • Limita a 2 fonts máximo (idealmente 1 sans-serif + 1 serif si es necesario)
- • Carga solo los pesos que realmente usas (regular + bold, no 8 weights)
- • Usa `font-display: swap` en el CSS (Dawn lo hace por default)
- • Si usas Google Fonts, prefetch con `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` antes del `<link>` de fonts
#El checklist completo de optimización Shopify (en orden de impacto)
Esta es la secuencia de cambios ordenada por impacto real en métricas. Ejecuta en orden, mide después de cada uno, no saltes:
#Cómo medir bien (sin engañarte)
Los números de Lighthouse local pueden engañar. Hay dos tipos de data: lab data (sintética, Lighthouse local) y field data (real, Chrome User Experience Report). Google usa field data para ranking, no lab.
#Tres herramientas para medir bien
- 1. PageSpeed Insights (pagespeed.web.dev): te da AMBOS — field data (real) si tu URL tiene suficiente tráfico, y lab data (sintética). Es la verdad oficial de Google.
- 2. Google Search Console → Core Web Vitals: muestra qué URLs específicas de tu sitio están en verde/amarillo/rojo, agrupadas por similitud. Útil para identificar templates problemáticos (ej. todas las páginas de producto en rojo).
- 3. Lighthouse en Chrome DevTools (modo móvil): sirve para diagnosticar bottlenecks específicos en tu máquina. NO uses solo el score numérico — revisa las recomendaciones detalladas para encontrar issues concretos.
#Cuándo SÍ migrar a Hydrogen (headless)
Hydrogen + Oxygen (React + Remix sobre hosting de Shopify) puede llevar tu LCP a <1.5s consistente. Pero migrar tiene costo significativo: necesitas developers React, separación del theme editor visual, integración manual con apps Shopify, mayor complejidad de mantenimiento.
Migra a Hydrogen solo si:
- • Ya hiciste los pasos 1-9 del checklist arriba y aún no logras Core Web Vitals verdes consistentes
- • Tu negocio depende de performance extrema (PWA, app-like experience)
- • Tienes equipo de developers React de planta o agencia técnica de soporte continuo
- • Estás en Shopify Plus (Hydrogen funciona mejor con Plus)
NO migres a Hydrogen si:
- • No has optimizado el theme regular primero
- • Tu equipo no incluye developers React
- • Dependes mucho del theme editor visual para cambios rápidos
- • Tu performance actual está en 2.5-3.5s LCP — optimiza el theme primero, te ahorras el proyecto
#Preguntas frecuentes
#¿Se puede tener Core Web Vitals verdes en Shopify sin migrar a headless?
Sí, en la mayoría de los casos. Para lograr LCP <2.5s, CLS <0.1 e INP <200ms sin pasar a headless (Hydrogen), enfócate en: usar Dawn o un theme nuevo basado en Online Store 2.0, auditar apps que carguen JavaScript en todas las páginas, optimizar imágenes con el CDN nativo de Shopify, y lazy load todo lo below-the-fold. 80% de las tiendas logran 30+ puntos de mejora en Lighthouse mobile solo con estos pasos.
#¿Qué Core Web Vitals importan más para Shopify en 2026?
Los tres oficiales: Largest Contentful Paint (LCP, objetivo <2.5s), Cumulative Layout Shift (CLS, objetivo <0.1) e Interaction to Next Paint (INP, objetivo <200ms, reemplazó a FID en marzo 2024). Google los usa como factor de ranking. En Shopify, el LCP suele ser el peor por imágenes hero pesadas, mientras que CLS es problema cuando apps inyectan banners después del primer render.
#¿El theme Dawn de Shopify es bueno para performance?
Dawn es el theme baseline oficial de Shopify y está bien optimizado por default: CSS inline crítico, JavaScript modular, lazy load nativo, imágenes responsivas con srcset. Una tienda Shopify con Dawn sin modificaciones logra Lighthouse 80-90 mobile relativamente fácil. El problema empieza cuando agregas apps que inyectan JavaScript, fonts custom mal cargadas o customizas Dawn sin entender su arquitectura.
#¿Las apps de Shopify están sangrando mi performance?
Casi siempre sí. Cada app que instalas tiende a inyectar JavaScript en TODAS las páginas, no solo donde se usa. Apps comunes que pesan mucho: pop-ups (Privy, Justuno), reviews (Loox, Judge.me), chat (Tidio, JivoChat), upsells (Bold, ReConvert). Audita con Lighthouse + Chrome DevTools Network: si una sola app suma >50KB de JS bloqueante o agrega +500ms al LCP, evalúa si vale el costo en velocidad.
#¿Cómo optimizar imágenes en Shopify sin apps?
Shopify CDN nativo redimensiona y comprime imágenes automáticamente. En Liquid, usa el filtro image_url con dimensiones específicas: {{ product.featured_image | image_url: width: 800 }} en lugar de cargar la imagen original de 3MP. También aplica loading="lazy" en todas las imágenes below-the-fold y srcset para múltiples densidades de pantalla. No necesitas TinyIMG ni Crush.pics si haces esto bien.
#¿Cuándo SÍ vale la pena migrar a Hydrogen (headless) en Shopify?
Solo cuando ya optimizaste todo lo demás y aún necesitas mejor performance, o cuando tu equipo de developers necesita full control del frontend. Hydrogen (React + Remix sobre Oxygen hosting) puede llegar a LCP <1.5s consistente, pero el costo: requiere developers React, complica integración con apps Shopify, y se separa de la flexibilidad del theme editor. Para 95% de las tiendas, optimizar el theme regular es suficiente.
#¿Cómo medir el performance real de mi Shopify?
Combina tres herramientas: (1) Google PageSpeed Insights — da Core Web Vitals reales de Chrome User Experience Report (CrUX) basados en visitas reales. (2) Google Search Console > Core Web Vitals — muestra qué URLs están en rojo. (3) Lighthouse en Chrome DevTools modo móvil — diagnóstico técnico para encontrar bottlenecks específicos. La data de campo (PSI y GSC) es la que Google usa para ranking; el Lighthouse local es para debuggear.
Hablamos contigo hoy mismo sobre tu proyecto ecommerce.
Del otro lado hay un humano senior — no un formulario automatizado. Teléfono, videollamada o presencial (Guadalajara, CDMX, Monterrey).
