Optimización de Shopify LCP: 7 soluciones para bajar de 2,5 s (2026)

¿Qué es LCP y por qué es importante para las tiendas Shopify?

Largest Contentful Paint (LCP) es uno de los tres de Google Core Web Vitals : las métricas que influyen directamente en su clasificación de búsqueda y cuantifican la experiencia del usuario. mientras CLS mide la estabilidad visual y El INP mide la interactividad, medidas LCP velocidad de carga percibida : específicamente, cuánto tiempo tarda el elemento visible más grande de la página en renderizarse por completo.

En una tienda Shopify, el elemento LCP casi siempre es una imagen:

• Página de inicio: Imagen de banner principal o la primera diapositiva de una presentación de diapositivas
• Páginas de productos: La imagen principal del producto (normalmente el elemento más grande en la mitad superior de la página)
• Páginas de colección: Banner de colección o la primera imagen de la tarjeta de producto
• Publicaciones de blog: Imagen destacada

Por qué LCP es importante para tu tienda Shopify:

• Clasificaciones SEO: Google utiliza LCP como señal de clasificación: las páginas que superan los tres Core Web Vitals obtienen un aumento de clasificación mensurable
• Conversiones: Deloitte descubrió que una mejora de 0,1 segundo en el LCP generó un aumento de conversión del 8 % en los sitios minoristas.
• Tasa de rebote: Los visitantes ven una página en blanco o parcialmente cargada mientras esperan LCP; cada segundo aumenta tasa de rebote en aproximadamente un 20%
• Impacto móvil: El LCP suele ser entre 2 y 3 veces peor en dispositivos móviles debido a CPU y redes más lentas, y Google mide la clasificación en dispositivos móviles

¿Quieres comprobar rápidamente tu situación? Realiza una prueba de velocidad gratuita en tu tienda para ver su puntuación LCP actual.

La solución fácil: optimización automática de LCP

Antes de sumergirse en las ediciones manuales de temas, existe un camino mucho más rápido. Thunder Page Speed Optimizer aborda automáticamente las principales causas del alto LCP en las tiendas Shopify, y a menudo reduce el LCP entre 0,5 y 2,0 segundos en cuestión de minutos.

Cómo medir y depurar el LCP de tu tienda Shopify

Antes de corregir el LCP, debe identificar su puntuación actual, qué elemento es el elemento LCP y qué lo está retrasando. Estas son las herramientas que importan:

Las 4 causas fundamentales del alto LCP en Shopify

Cada problema de LCP se remonta a uno de estos cuatro cuellos de botella. Identifique el suyo y vaya a la solución correspondiente:

Solución n.º 1: optimizar y precargar la imagen Hero/LCP

La solución más impactante para la mayoría de las tiendas Shopify: hacer que la imagen LCP se cargue más rápido y decirle al navegador que comience a cargarla inmediatamente. Esto implica tres pasos: comprimir, precargar y priorizar.

Paso 1: Comprimir y utilizar tamaños adaptables

Tu imagen de héroe debe ser menos de 200 KB (idealmente menos de 100 KB para dispositivos móviles). Usa el CDN de Shopify con el Filtro imagen_url para ofrecer imágenes WebP del tamaño adecuado:

<img 
  src="{{ section.settings.hero_image | image_url: width: 1200 }}"
  srcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w,
    {{ section.settings.hero_image | image_url: width: 1600 }} 1600w
  "
  sizes="100vw"
  width="1600"
  height="800"
  alt="Tu texto alternativo descriptivo"
  loading="eager"
  fetchpriority="high"
>

CDN de Shopify convierte automáticamente imágenes a WebP para navegadores compatibles cuando usas El atributo imagen_url. el conjunto de origen garantiza que los dispositivos móviles descarguen una imagen de 600 px en lugar de la versión completa de 1600 px, lo que ahorra cientos de KB en dispositivos móviles. Para obtener un tutorial completo sobre las estrategias de formato y compresión de imágenes, consulte nuestro Guía de optimización de imágenes de Shopify.

Paso 2: Precargar la imagen LCP

Agregar un en el <head> de su tema para que el navegador comience a descargar la imagen principal inmediatamente, incluso antes de que llegue a la Etiqueta en el cuerpo:

<!-- Add to <head> in theme.liquid -->
<link 
  rel="preload" 
  as="image"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w
  "
  imagesizes="100vw"
  fetchpriority="high"
>

Paso 3: Utilice fetchpriority="high" El atributo

El fetchpriority="alta" le dice al navegador que esta imagen es más importante que otros recursos que compiten por el ancho de banda. Sin él, Chrome inicialmente asigna a las imágenes una prioridad "baja" y solo actualiza las imágenes de la mitad superior de la página más tarde; para entonces, se pierde un tiempo precioso. Agregar esta sugerencia puede reducir entre 100 y 500 ms el LCP.

Importante: Incluir siempre comentarios explícitos ancho y altura atributos. Estos permiten que el navegador reserve el espacio correcto antes de que se cargue la imagen, evitando Cambio de diseño acumulativo (CLS) y permitir que los cálculos de diseño comiencen antes.

Solución n.º 2: eliminar JavaScript que bloquea el procesamiento

En la mayoría de las tiendas Shopify, los scripts que bloquean el renderizado son la causa principal del LCP alto : no la imagen en sí. Aquí está la secuencia que acaba con tu puntuación: el navegador comienza a cargar la página → encuentra scripts que bloquean el procesamiento en el <head> → detiene todo para descargarlos y ejecutarlos → solo entonces descubre y carga la imagen principal → finalmente la procesa. Esos scripts de bloqueo pueden agregar entre 1 y 3 segundos antes de que el navegador comienza trabajando en su elemento LCP.

Qué puedes hacer manualmente

• Agregar aplazar o asíncrono a medida Etiquetas etiquetas que has agregado a tu tema
• Mover scripts en línea desde <head> a antes cuando no necesitan correr temprano
• Eliminar aplicaciones no utilizadas: cada aplicación instalada normalmente agrega de 1 a 3 etiquetas de secuencia de comandos a cada carga de página
• Audita tu tema tema.liquido para guiones que podrían aplazarse

<script src="custom-feature.js"></script>

<script src="custom-feature.js" defer></script>

La parte complicada: los scripts de aplicaciones de terceros suelen tener interdependencias. Aplazar un script podría dañar otra aplicación que dependa de él. Es por eso que el aplazamiento manual de scripts en Shopify es riesgoso sin una prueba profunda. Para obtener un tutorial completo, consulte nuestro guía para arreglar recursos que bloquean el renderizado en Shopify.

Solución n.º 3: CSS crítico en línea para la primera pintura instantánea

CSS bloquea el procesamiento de forma predeterminada: el navegador no pintará nada hasta que todos los archivos CSS en el <head> se han descargado. En una tienda Shopify con múltiples archivos CSS (CSS de tema, CSS de aplicación, CSS personalizado), esto puede agregar entre 500 ms y 1,5 s antes cualquiera .

La solución: extraiga el CSS necesario para el contenido de la mitad superior de la página e inclúyalo directamente en un <style> en el <head>. Luego cargue el CSS completo de forma asincrónica:

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Only styles needed for above-the-fold content */
    .header { ... }
    .hero-section { ... }
    .hero-image { ... }
  </style>

  <!-- Load full CSS asynchronously -->
  <link rel="preload" href="theme.css" as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="theme.css"></noscript>
</head>

Identificar y extraer CSS crítico manualmente es tedioso y propenso a errores: debe determinar exactamente qué reglas CSS se aplican a la ventana gráfica visible en el momento de la carga, y esto difiere para cada tipo de página (página de inicio, producto, colección). Esta es un área donde la automatización marca una diferencia real: Thunder extrae e integra automáticamente CSS crítico por tipo de página, luego carga el resto de forma asincrónica.

También esté atento a CSS @import: Si tu tema o aplicaciones usan @import dentro de los archivos CSS, crea una cascada de carga: el navegador descarga CSS, descubre la importación y luego descarga más CSS. Reemplazar @import con separado Etiquetas Etiquetas para permitir descargas paralelas. Más información sobre recursos de bloqueo de renderizado y cascadas CSS.

Solución n.º 4: deje de cargar de forma diferida su elemento LCP

Este es uno de los errores de LCP más comunes en Shopify y uno de los más fáciles de solucionar. Se aplican muchos temas Imagen cargando="perezoso" a cada Página , incluido el banner del héroe. La carga diferida le dice al navegador que retrase la carga de la imagen hasta que el usuario se desplace cerca de ella. Para su imagen más importante en la mitad superior de la página, esto arruina el rendimiento.

Cómo comprobar

Haz clic derecho en tu imagen principal → Inspeccionar → mira el Etiqueta . si tiene cargando="perezoso", eso está dañando tu LCP. PageSpeed Insights también señala esto específicamente: busque "La imagen más grande de Contentful Paint se cargó de forma diferida" en el diagnóstico.

La solución

<img src="hero.jpg" loading="lazy" alt="...">

<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">

Solución específica del tema de Shopify (Dawn y similares)

En el tema Dawn de Shopify (y los temas basados en él), busque el archivo de la sección héroe, generalmente secciones/imagen-banner.liquid o secciones/presentación de diapositivas.liquid. Encuentre dónde se representa la imagen y asegúrese de que se utilice la primera imagen de la mitad superior de la página. cargando: 'ansioso':

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'eager', fetchpriority: 'high', sizes: '100vw' }}

Regla general: Las primeras 1 o 2 imágenes visibles al cargar la página inicial → cargando="ansioso". Todo debajo del pliegue → cargando="perezoso". Para una inmersión profunda, consulte nuestro Guía de carga diferida de Shopify y Comparación de carga perezosa vs ansiosa.

Solución n.º 5: Optimice la carga de fuentes para un LCP más rápido

Si su elemento LCP es texto (un título o párrafo), la carga de fuentes afecta directamente al LCP. El navegador no pintará el texto hasta que la fuente esté lista, a menos que usted le indique lo contrario. Incluso cuando el elemento LCP es una imagen, la carga lenta de la fuente aún puede retrasar la representación al bloquear los cálculos de diseño.

Lista de verificación de carga de fuentes Reglas

• Agregar visualización de fuente: intercambiar a todos @font-face : muestra el texto inmediatamente en una fuente alternativa mientras se cargan las fuentes personalizadas
• Precarga la fuente del cuerpo: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
• Fuentes autohospedadas instead of loading from Google Fonts — eliminates an extra DNS lookup and connection
• Limitar el peso de las fuentes: Cada peso (normal, negrita, etc.) es un archivo independiente. Limítese a 2 pesos si es posible
• Usar formato WOFF2 : 30% más pequeño que WOFF, compatible con todos los navegadores modernos

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

Nota: visualización de fuente: intercambiar puede presentar a un menor Problema con CLS cuando la fuente personalizada se intercambia con diferentes métricas. Si esto le preocupa, utilice visualización de fuente: opcional : solo usa la fuente personalizada si se carga dentro de ~100 ms; de lo contrario, se queda con la fuente alternativa. Intercambio cero significa CLS cero, aunque es posible que la fuente personalizada no se muestre en conexiones lentas.

Solución n.º 6: Reducir el tiempo de respuesta del servidor (TTFB)

El tiempo hasta el primer byte (TTFB) es el retraso entre que el navegador solicita su página y recibe el primer byte de HTML. Un TTFB alto retrasa todo el flujo descendente, incluido LCP, porque nada se puede procesar hasta que el HTML comienza a llegar. En Shopify, el TTFB suele ser de 200 a 800 ms.

No puedes cambiar el hardware del servidor de Shopify, pero puede reducir la cantidad de trabajo que realiza el servidor por solicitud:

• Simplificar plantillas de Liquid: Profundamente anidado para bucles, excesivos si/elsi Las cadenas y las complejas matemáticas de Liquid aumentan el tiempo de renderizado del lado del servidor
• Reducir las búsquedas de metacampos: Cada acceso a metacampo es una consulta a la base de datos. Minimizar el uso de metacampos en páginas de mucho tráfico (página de inicio, colecciones)
• Limitar productos de colección por página: Renderizar 48 tarjetas de productos requiere más procesamiento en el servidor que 24. Usar paginación
• Auditoría de líquido inyectado por aplicación: Algunas aplicaciones inyectan código Liquid que se ejecuta en el lado del servidor cada Página carga de páginas, incluso páginas donde no se utiliza la aplicación. Verifique los archivos de su tema en busca de fragmentos de Liquid relacionados con la aplicación
• Usar secciones y grupos de secciones: El renderizado de secciones más nuevo de Shopify puede almacenar en caché secciones individuales, lo que reduce el tiempo total de renderizado

Solución n.º 7: eliminar transiciones de imagen en el elemento LCP

Muchos temas de Shopify agregan una animación CSS gradual o deslizable a las imágenes a medida que se cargan. Si bien esto parece sencillo, perjudica directamente a LCP porque el navegador solo informa LCP después la animación se completa, no cuando aparece la imagen por primera vez. El propio equipo de rendimiento de Shopify documentó un caso en el que eliminar las transiciones de imagen en la imagen principal mejoró el LCP al 6 segundos en una tienda.

Verifique el CSS de su tema para ver si hay transiciones en la imagen principal o su contenedor:

.hero-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-image.loaded {
  opacity: 1;
}

.hero-image {
  opacity: 1; /* Visible immediately */
}

If you want to keep fade-in animations on other images for aesthetics, that's fine — just remove them from the hero/LCP element specifically. You can scope this with a class like .imagen-hero--sin-transición solo en la primera imagen.

Correcciones manuales de LCP frente a Thunder: comparación lado a lado

Así es como se compara el enfoque manual con permitir que Thunder maneje la optimización LCP automáticamente:

Las correcciones manuales brindan control total, pero requieren experiencia en Liquid/CSS y mantenimiento continuo. Thunder maneja el trabajo pesado automáticamente y se adapta a medida que cambia su tienda. Muchos comerciantes combinan ambos: instalan Thunder para aplazar scripts y CSS crítico, luego aplican correcciones manuales para problemas específicos de la tienda, como la precarga de imágenes destacadas. Ver planes de precios de Thunder o comparar con otros aplicaciones de optimización de velocidad.

Preguntas frecuentes sobre Shopify LCP