Precarga de imagen de héroe de Shopify: Reparar LCP con fetchpriority y Liquid (2026)

Solución rápida con Thunder

Cuando la precarga de la imagen Hero realmente ayuda

La pintura con contenido más grande mide cuándo termina de renderizarse el elemento de imagen o texto visible más grande. El buen umbral de Google es 2,5 segundos o menos para al menos el 75% de los usuarios reales. En las páginas de inicio, páginas de destino y páginas de colección de Shopify, el elemento LCP suele ser la imagen del banner principal.

La precarga ayuda cuando, de otro modo, el navegador descubriría tarde la imagen principal. Esto sucede cuando la URL de la imagen está oculta dentro de un fragmento de sección, cargada a través de JavaScript, oculta detrás de una lógica responsiva o referenciada después de muchas etiquetas CSS y script. La precarga le dice al navegador: busque esta imagen importante con anticipación.

La precarga no corrige una imagen de 900 KB, un control deslizante que espera JavaScript o recursos de bloqueo de renderizado que retrasan toda la página. Es una parte de la cadena LCP. Úselo con compresión de imágenes, dimensiones correctas y limpieza de scripts.

Paso 1: Confirmar el elemento LCP

Ejecute PageSpeed Insights o Chrome DevTools Performance. En Lighthouse, expanda el diagnóstico LCP y verifique qué elemento se informa. Si es la imagen del héroe, continúa. Si se trata de un título o una imagen de producto, cargue previamente ese recurso.

No adivines. Los temas de Shopify a menudo muestran diferentes activos de héroe en computadoras de escritorio y dispositivos móviles, y los controles deslizantes pueden hacer que un elemento diferente gane LCP en dispositivos móviles. Nuestro guía de resultados de la prueba de velocidad explica cómo leer el informe sin buscar la métrica incorrecta.

Paso 2: Precarga la URL exacta de la imagen de Shopify

Agregue el enlace de precarga en tema.liquido dentro de la cabeza, antes de guiones pesados. Usa el mismo objeto de imagen y ancho que usa tu héroe.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="
      {{ settings.hero_image | image_url: width: 800 }} 800w,
      {{ settings.hero_image | image_url: width: 1200 }} 1200w,
      {{ settings.hero_image | image_url: width: 1600 }} 1600w
    "
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

El nombre exacto del objeto variará según el tema. puede ser sección.configuración.imagen, configuración.hero_image, o una imagen de bloque. Si la URL de precarga no coincide lo suficiente con la URL de la imagen renderizada, el navegador puede descargar dos imágenes.

Paso 3: marcar la imagen del héroe como entusiasta y de alta prioridad

La etiqueta de imagen en sí no debe cargarse de forma diferida. Utilice carga rápida y prioridad de recuperación alta para la primera imagen destacada de la mitad superior de la página.

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

La carga diferida del héroe es uno de los errores más comunes de Shopify LCP. La carga diferida es correcta para galerías e imágenes de productos en la mitad inferior de la página; es incorrecto para la única imagen que el navegador necesita inmediatamente. Para el resto de tu tienda, utiliza nuestro Guía de optimización de imágenes de Shopify.

Paso 4: Evite la doble descarga de imágenes responsivas

Si su precarga apunta a una imagen de escritorio pero el dispositivo móvil muestra un recorte móvil separado, los visitantes móviles pueden descargar el archivo precargado incorrecto y luego descargar la imagen móvil real. Eso empeora el LCP.

{%- assign hero = section.settings.mobile_image | default: section.settings.image -%}

<link
  rel="preload"
  as="image"
  href="{{ hero | image_url: width: 1200 }}"
  imagesrcset="{{ hero | image_url: width: 600 }} 600w, {{ hero | image_url: width: 1200 }} 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

Para temas con imágenes principales de escritorio y móviles realmente diferentes, utilice con cuidado los enlaces de precarga específicos de medios. Pruebe ambos tamaños de ventana gráfica y verifique la pestaña Red para ver si hay descargas duplicadas.

Paso 5: tenga cuidado con los controles deslizantes

Los hilos de Shopify Community LCP a menudo señalan las presentaciones de diapositivas destacadas como el problema oculto. Incluso con una diapositiva visible, un control deslizante puede esperar a JavaScript, inicializar el diseño, ocultar imágenes hasta que esté listo o precargar varias diapositivas. La precarga de una imagen no puede arreglar completamente a un héroe controlado por un script de carrusel pesado.

Para la primera ventana gráfica, un héroe estático generalmente supera a una presentación de diapositivas. Si mantiene el control deslizante, cargue previamente solo la primera diapositiva visible, configúrelo con prioridad alta/activa, cargue las diapositivas posteriores de forma diferida y elimine JavaScript de reproducción automática en dispositivos móviles si crea tareas largas.

Aquí también es donde minimizando el trabajo del hilo principal importa. Un guión de carrusel puede retrasar la imagen incluso cuando la imagen se solicita con anticipación.

Solución manual frente a solución Thunder

Vuelva a realizar la prueba sin engañarse

Después de agregar la precarga, abra DevTools Network con el caché deshabilitado. Confirme que la imagen principal comience temprano, confirme que la imagen renderizada no se descargue dos veces y compare las ejecuciones móviles de Lighthouse. Luego, observe el LCP del usuario real en el panel de rendimiento web de Shopify o en Search Console Core Web Vitals.

Si la solicitud de héroe comienza temprano pero LCP aún es lento, el cuello de botella probablemente sea el peso de la imagen, CSS que bloquea el procesamiento o JavaScript. Utilice el guía completa de optimización de velocidad de Shopify, luego verifique si PageSpeed también marca Shopify cadenas de solicitudes críticas, enormes cargas útiles de red, o Tiempo total de bloqueo. Comparar Funciones de optimización de Thundery verifique planes actuales si desea la ruta automatizada.

Referencias y Validación

Para el objetivo de métrica, utilice La guía de pintura con contenido más grande de web.dev: un buen LCP es 2,5 segundos o más rápido en el percentil 75. Para obtener sugerencias de prioridad, consulte Guía de prioridad de búsqueda de web.dev; preload y fetchpriority resuelven diferentes partes del problema de descubrimiento y priorización.

Los hilos de Shopify Community LCP a menudo muestran el mismo modo de falla: un comerciante precarga una imagen principal y ve poco movimiento porque el tema todavía la carga de forma diferida, el script del carrusel retrasa el procesamiento o los recursos que bloquean el procesamiento tienen prioridad. Valide la cascada de la red, la URL de la imagen renderizada y el elemento LCP antes de declarar la precarga ineficaz. La solución es una prioridad precisa de los recursos, no más etiquetas de precarga.