Core Web Vitals en Shopify: cómo mejorarlos en 2026

Core Web Vitals son las tres métricas de rendimiento que Google mide en cada página y que pesan en su algoritmo desde 2021. En Shopify, las tres son arreglables, pero la mayoría de tiendas las dejan en rojo porque buscan la app mágica antes de revisar lo que el theme está cargando. Esta guía explica las palancas que funcionan en cuentas reales.

Voy a centrarme en LCP, INP y CLS por separado, qué causa cada problema en Shopify específicamente, y qué intervenciones tienen el mejor retorno por hora invertida.

En 30 segundos:

• Las 3 métricas Core Web Vitals: LCP (<2,5 s), INP (<200 ms), CLS (<0,1) según web.dev/vitals
• INP reemplazó a FID en marzo de 2024 — INP mide latencia de interacción real, no solo el primer click
• Google usa datos de campo (CrUX), no de laboratorio: PageSpeed Insights muestra ambos
• En Shopify, las 3 grandes causas son hero image sin optimizar (LCP), apps que inyectan JS (INP) y fuentes sin font-display: swap (CLS)
• El theme.liquid y las apps instaladas tienen más peso que cualquier “speed optimizer” del App Store

¿Qué son los Core Web Vitals y por qué importan en Shopify?

Core Web Vitals son tres métricas que Google mide en visitas reales a través de Chrome (CrUX dataset) y usa como señal de ranking desde la actualización Page Experience de 2021. En 2024, Google reemplazó FID por INP, que es una métrica más estricta porque mide la latencia de cada interacción, no solo la primera (Google Search Central, 2024).

Para Shopify específicamente, el problema es que Google evalúa el rendimiento en producción (con apps instaladas, scripts de tracking, popups), no en una preview limpia. Una tienda puede tener un theme rápido en local y un PageSpeed Insights en rojo en producción porque las apps añaden 1-2 MB de JavaScript después del deploy.

Cuando audito una tienda Shopify, lo primero que hago no es abrir PageSpeed Insights — abro web.dev/measure sobre la página de producto más visitada y miro el desglose por origen de cada recurso. Apps de terceros suelen aportar el 40-70% del JavaScript total. Para entender qué partes del theme controlan estas métricas en el código, escribí una guía sobre Shopify Liquid para SEO que cubre los snippets relevantes en theme.liquid.

¿Cómo mejorar LCP en Shopify?

LCP (Largest Contentful Paint) captura el momento en que se pinta el elemento más grande visible al cargar la página — normalmente la imagen hero del producto o el banner principal de la home. El target: por debajo de 2,5 segundos en el percentil 75 de visitas móvil.

En Shopify, las dos palancas más rentables son: cómo se sirve la imagen LCP y cuánto JavaScript bloquea el render antes de pintarla.

Optimización del hero image. Casi todos los themes de Shopify cargan el hero image sin loading="eager" y sin fetchpriority="high". Resultado: el navegador la descarga después de scripts no críticos. Cambiarlo en el snippet del hero del theme suele bajar LCP en 0,5-1,5 segundos.

<img
  src="{{ section.settings.hero_image | image_url: width: 1200 }}"
  srcset="{{ section.settings.hero_image | image_url: width: 480 }} 480w,
          {{ section.settings.hero_image | image_url: width: 768 }} 768w,
          {{ section.settings.hero_image | image_url: width: 1200 }} 1200w"
  sizes="100vw"
  width="{{ section.settings.hero_image.width }}"
  height="{{ section.settings.hero_image.height }}"
  loading="eager"
  fetchpriority="high"
  alt="{{ section.settings.hero_alt }}">

Carga de fuentes. Si tu theme carga Google Fonts vía <link> sin preconnect, el navegador espera al hover de DNS antes de descargar. Añadir <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> en el head ahorra 100-300 ms de LCP.

Apps que bloquean render. Apps como Klaviyo, Privy o popups gratuitos suelen cargar su JS de forma síncrona. Ver con Chrome DevTools Coverage qué % del JS de cada app realmente se usa antes del LCP. Si el uso es <5%, defer es seguro. Para más sobre optimización de imágenes en Shopify, escribí una guía dedicada: optimización de imágenes en Shopify.

¿Cómo reducir INP (la métrica que sustituyó a FID)?

INP (Interaction to Next Paint) mide la latencia entre la acción del usuario (click, tap, keystroke) y la siguiente pintura del navegador. Target: por debajo de 200 ms en el percentil 75. INP es más estricta que FID porque mide todas las interacciones a lo largo de la sesión, no solo la primera (web.dev INP, 2024).

¿Qué hace que un Shopify tenga mal INP? El problema casi nunca es el theme — es lo que cargan las apps en background mientras el usuario navega. Tres patrones que veo en cada auditoría:

• Apps de chat (Tidio, Gorgias, Shopify Inbox). Cargan scripts pesados que ejecutan listeners de scroll, mutation observers y procesan eventos en main thread. Cuando el usuario toca “añadir al carrito”, el navegador no puede responder hasta que la app termine.
• Tracking pixels duplicados. Cuentas que tienen GA4, Meta Pixel, TikTok Pixel y un pixel custom en GTM. Cada uno añade 50-150 ms a la cola de tareas del navegador.
• Apps de reviews y galerías. Loox, Judge.me, Yotpo. Construyen DOM dinámicamente con cientos de elementos, lo que crea long tasks de 200-400 ms cada vez que el usuario interactúa con la página.

La solución concreta: auditar las apps con DevTools Performance → grabar 30 segundos de navegación normal → ordenar long tasks por origen. Las apps con >300 ms de blocking time por sesión son candidatas claras a desinstalación o configuración diferida.

¿Cómo eliminar CLS en Shopify?

CLS (Cumulative Layout Shift) cuenta cada salto del contenido visible durante la carga. Target: por debajo de 0,1. Un CLS alto pasa cuando una imagen, fuente o banner se inserta sin que el navegador haya reservado espacio.

Las causas más frecuentes en Shopify son tres, y cada una tiene una corrección directa:

Imágenes sin width y height. Si añades imágenes sin esos atributos, el navegador no sabe cuánto espacio reservar y reflowuea cuando llega el archivo. La solución: usar siempre los atributos vía Liquid, como en el snippet de la sección LCP arriba. Con Shopify, los objetos image.width y image.height son nativos, así que no hay excusa para omitirlos.

Fuentes sin font-display: swap. Si tu theme carga Google Fonts sin esta propiedad, el texto inicialmente no se renderiza y luego salta cuando llega la fuente. Verificar el CSS de fonts:

@font-face {
  font-family: 'TuFuente';
  src: url('{{ "tu-fuente.woff2" | asset_url }}') format('woff2');
  font-display: swap;
}

Banners y popups que aparecen tarde. Apps de cookies, popups de descuento o banners de envío gratis que se inyectan después del render del contenido principal generan shifts visibles. Las dos opciones: reservar espacio con CSS (un contenedor con min-height aunque esté vacío) o cargar la app antes del contenido principal (peor para LCP, mejor para CLS — hay que elegir).

¿Qué apps de Shopify suelen romper Core Web Vitals?

He auditado decenas de tiendas Shopify y hay un grupo de apps que aparecen una y otra vez como las principales causantes de CWV malos. No es que las apps sean malas; es que su impacto en CWV se acumula.

Las apps de chat (Shopify Inbox, Tidio, Gorgias, Re:amaze) aportan 100-300 KB de JS cada una y el widget se carga incluso si el usuario no lo abre. Mitigación: usar un disparador retardado para mostrarlo solo después de 5 s o scroll del 50%. Luego están las apps de reviews (Loox, Judge.me, Yotpo), que cargan widgets pesados de galería y carrusel y suelen bloquear INP cuando el usuario hace scroll por reseñas.

• Page builders (PageFly, Shogun). Generan markup denso con muchos elementos anidados y scripts inline. Pueden añadir 500 KB-1 MB de HTML solo en la home.
• Apps de upsell y popups (Privy, Bold, ReConvert). Su JS se ejecuta en main thread durante eventos críticos (añadir al carrito, checkout). Suelen ser los principales causantes de mal INP.
• Y la trampa silenciosa: apps de tracking adicional (Triple Whale, Northbeam, Lifesight). Cada una añade un pixel propio sobre los nativos. Plantilla típica que veo a diario: tienda con 8-12 pixels diferentes ejecutándose en cada pageview, sin que el dueño sepa que tiene la mitad activos.

La regla práctica: si una app no genera más de 1.500 €/mes en valor directo (ventas atribuibles, leads cualificados o ahorro de tiempo cuantificable), no compensa el coste de rendimiento que añade. Audita una vez al trimestre — siempre encuentras 2-3 apps olvidadas que se quedan ejecutando sin usarse.

¿Cómo medir Core Web Vitals en Shopify de forma fiable?

PageSpeed Insights muestra dos tipos de datos: laboratorio (test sintético) y campo (CrUX, datos reales de usuarios Chrome). Google usa CrUX para ranking, no Lighthouse. La diferencia importa: una tienda puede tener 95/100 en Lighthouse y rojo en CrUX si los usuarios reales tienen móviles lentos o conexiones malas.

¿Cómo distinguir los dos? En PageSpeed Insights:

• CrUX data aparece arriba como “Discover what your real users are experiencing” — eso es lo que Google ve.
• Lighthouse score aparece abajo — útil para diagnosticar problemas, no para evaluar ranking.

Para acceder al CrUX dataset directamente, Search Console tiene un informe Core Web Vitals que agrupa URLs por estado (Bueno/Necesita mejora/Pobre). Es el mismo dato que Google usa, agregado por grupo de URLs similares.

Tres herramientas que combino en una auditoría inicial:

Si tu tienda tiene >5.000 visitas/mes, el dato de campo (CrUX) será fiable. Por debajo, PageSpeed Insights puede no tener suficientes muestras y el indicador queda como “Insufficient data”. CWV es una parte del SEO técnico — para el cuadro completo, Shopify SEO para ecommerce 2026 cubre el resto del checklist.

Preguntas frecuentes

¿Los themes de pago de Shopify mejoran automáticamente Core Web Vitals?

No automáticamente. Themes premium como Impulse, Symmetry o Prestige están bien construidos, pero el rendimiento real depende de las apps instaladas y la configuración. He visto tiendas con themes de 300 € en peor estado que tiendas con Dawn (gratis). El theme establece la base; las apps determinan el resultado final.

¿Vale la pena pagar por una “speed optimizer app” del Shopify App Store?

Casi nunca. La mayoría hacen tres cosas: lazy loading de imágenes (que ya puedes hacer con loading="lazy" en Liquid), preconnect a dominios externos (1 línea en theme.liquid) y minificación que Shopify ya aplica. Solo recomiendo apps cuando hay un problema específico fuera de tu control (ej. apps de terceros que no respetan defer).

¿Cómo afecta Shopify Markets a Core Web Vitals?

Shopify Markets añade overhead mínimo (geolocalización, currency switcher) pero suele introducir un pequeño impacto en INP si el currency switcher se ejecuta antes del paint. La regla: revisar después de activar Markets — los CWV pueden bajar 5-10 puntos si la implementación es agresiva.

¿Cuánto tiempo tarda Google en actualizar los Core Web Vitals tras hacer cambios?

CrUX se actualiza con datos de 28 días, así que el efecto completo de un cambio se ve a los 28-30 días. Search Console suele reflejarlo a las 4-6 semanas. PageSpeed Insights muestra los datos más recientes pero todavía con la ventana de 28 días, así que los cambios se ven gradualmente.

¿Qué pasa si tengo poco tráfico y no hay datos CrUX?

Si la tienda tiene <5.000 visitas/mes, Google usa señales de proxy y el ranking puede no penalizarte por CWV “no medibles”. En ese caso, optimiza para Lighthouse score y el resto vendrá con el tráfico. Para una revisión sistemática de todo el theme antes de escalar, una auditoría SEO técnica Shopify cubre CWV junto al resto de elementos.

¿INP afecta a desktop o solo a móvil?

INP afecta a ambos, pero Google evalúa móvil con mayor peso desde 2021 (mobile-first indexing). En la práctica, optimizar INP para móvil suele resolver desktop también.

Fuentes

1. web.dev. Core Web Vitals. https://web.dev/articles/vitals. 2024.
2. web.dev. Interaction to Next Paint (INP). https://web.dev/articles/inp. 2024.
3. web.dev. Interaction to Next Paint becomes a Core Web Vital on March 12. https://web.dev/blog/inp-cwv-march-12. 2024.
4. Google Search Central. Page experience in Google Search results. https://developers.google.com/search/docs/appearance/page-experience. 2025.
5. Shopify Dev. Improve theme performance. https://shopify.dev/docs/themes/best-practices/performance. 2025.

¿Tu Shopify tiene Core Web Vitals en rojo y no sabes qué app es la culpable? Ofrezco auditorías SEO técnicas para Shopify — diagnóstico completo de CWV con identificación de la app o snippet exacto que causa cada problema. 30 minutos iniciales sin compromiso para ver si tiene sentido.