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

La imagen principal debe ocupar menos de 200 KB (idealmente menos de 100 KB para móviles). Utilice la CDN de Shopify con el filtro image_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"
>

La CDN de Shopify convierte automáticamente las imágenes a WebP para los navegadores compatibles cuando se utiliza el filtro image_url. El atributo srcset 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

Añada una etiqueta <link rel="preload"> al <head> de su tema para que el navegador comience a descargar la imagen principal inmediatamente, incluso antes de que encuentre la etiqueta <img> 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 el atributo fetchpriority="high"

El atributo fetchpriority="high" indica 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: Incluya siempre los atributos explícitos width y height. Estos permiten que el navegador reserve el espacio correcto antes de que se cargue la imagen, evitando Cambio de diseño acumulativo (CLS) y permitiendo 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

• Añada defer o async a las etiquetas <script> personalizadas que haya incorporado al tema
• Mueva los scripts en línea desde <head> hasta justo antes de </body> cuando no necesiten ejecutarse al principio
• 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
• Revise el archivo theme.liquid del tema para identificar scripts que se puedan aplazar

<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 su tema o sus aplicaciones utilizan @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. Sustituya @import por etiquetas <link> independientes 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. Muchos temas aplican loading="lazy" a todas las imágenes, incluida la imagen principal. 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

Haga clic derecho en la imagen principal → Inspeccionar → revise la etiqueta <img>. Si tiene loading="lazy", eso perjudica el 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 sections/image-banner.liquid o sections/slideshow.liquid. Localice dónde se renderiza la imagen y asegúrese de que la primera imagen del área visible inicial utilice loading: 'eager':

{{ 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 → loading="eager". Todo debajo del pliegue → loading="lazy". Para una inmersión profunda, consulte nuestro Guía de carga diferida de Shopify y comparación entre carga diferida e inmediata.

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

• Añada font-display: swap a todas las reglas @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 en lugar de cargar desde Google Fonts — elimina una búsqueda DNS y una conexión adicionales
• 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: font-display: swap puede provocar un pequeño Problema con CLS cuando la fuente personalizada se intercambia con diferentes métricas. Si esto le preocupa, utilice font-display: optional : 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:

• Simplifique las plantillas de Liquid: los bucles for con muchos niveles de anidamiento, el exceso de condiciones encadenadas if/elsif y los cálculos complejos de Liquid aumentan el tiempo de renderizado 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 */
}

Puede mantener las animaciones de aparición gradual en otras imágenes por motivos estéticos, pero elimínelas del elemento principal/LCP. Limite este cambio a la primera imagen mediante una clase como .hero-image--no-transition 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