Shopify Aplazar imágenes fuera de la pantalla: corrige la advertencia de PageSpeed

Por qué PageSpeed marca imágenes fuera de pantalla en Shopify

PageSpeed marca imágenes fuera de pantalla cuando se descargan imágenes fuera de la ventana gráfica inicial antes de que sean necesarias. En Shopify, eso sucede a menudo en las secciones de la página de inicio, cuadrículas de colecciones, mega menús, bloques de recomendaciones, miniaturas de blogs, medios de reseñas, feeds de Instagram y galerías de medios de productos.

El costo no es solo el ancho de banda. Las primeras descargas de imágenes compiten con CSS, fuentes, JavaScript y la imagen que realmente define la primera vista. La guía LCP de Google recomienda hacer visible rápidamente el elemento probable de pintura con contenido más grande. Un buen LCP es 2,5 segundos o más rápido para al menos el 75% de las visitas, y desperdiciar la prioridad inicial de la red en imágenes de la página inferior lo hace más difícil.

Si su advertencia aparece junto con cargas útiles grandes o advertencias de entrega de imágenes, lea Optimización de imágenes de Shopify, mejorar la entrega de imágenes, y enormes cargas útiles de red. El aplazamiento de imágenes fuera de la pantalla es una parte del conjunto más amplio de velocidad de imagen.

La regla: perezoso en la parte inferior, ansioso en la parte superior

La regla simple es útil: las imágenes en la mitad inferior de la página generalmente deben usar cargando="perezoso", mientras que las imágenes probablemente visibles en la primera ventana gráfica deberían usar carga inmediata. La parte complicada es que las secciones de Shopify son reutilizables. Una sección de banner puede estar primero en la página de inicio, tercero en una página de destino y dentro de una plantilla de página de producto. El mismo fragmento puede necesitar una prioridad diferente según la ubicación.

La guía de rendimiento de Google advierte contra la carga diferida de la imagen LCP. Para Shopify, eso generalmente significa la imagen principal de la página de inicio, la imagen principal del producto o el banner de la colección principal. Si carga esos recursos de forma diferida, el navegador puede descubrirlos tarde y LCP empeora incluso si mejora la advertencia de imagen fuera de pantalla.

Manual paso a paso: arreglar aplazar imágenes fuera de pantalla en Shopify

1. Identificar la imagen que no se debe postergar

En PageSpeed Insights, busque el elemento LCP. Si se trata de un banner destacado, una imagen de producto o una imagen de colección en la mitad superior de la página, no lo cargues de forma diferida. Dale dimensiones claras y alta prioridad.

<!-- Above-the-fold hero image -->
&lbrace;&lbrace; section.settings.hero_image
  | image_url: width: 1600
  | image_tag:
    widths: '750, 1100, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.hero_image.alt
&rbrace;&rbrace;

Para más detalles, utilice el Guía de precarga de imágenes de héroe de Shopify y Guía de optimización de LCP.

2. Cargue de forma diferida tarjetas de productos repetidos debajo de la primera fila

Las cuadrículas de colección pueden descargar docenas de imágenes de productos a la vez. Mantenga la primera fila visible activa o predeterminada, luego cargue las filas inferiores de forma diferida. Si su cuadrícula se representa con un índice de bucle, utilícelo para decidir la prioridad.

{% assign image_loading = 'lazy' %}
{% assign image_priority = 'auto' %}

{% if forloop.index <= 4 %}
  {% assign image_loading = 'eager' %}
  {% assign image_priority = 'high' %}
{% endif %}

&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    loading: image_loading,
    fetchpriority: image_priority,
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Agregue dimensiones para que las imágenes diferidas no cambien el diseño

La carga diferida puede crear CLS si el navegador no sabe cuánto espacio reservar. El asistente de etiquetas de imagen de Shopify puede generar el ancho y el alto, pero el marcado personalizado a menudo los olvida. Utilice la relación de aspecto CSS para las tarjetas y reserve ranuras estables para los medios.

.product-card__media {
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Si el cambio de diseño ya está fallando, verifique el Guía de reparación de Shopify CLS antes de cambiar el comportamiento de carga de imágenes en todo el tema.

4. Retrasar los medios incrustados y la alimentación en la parte inferior de la página

Los feeds de Instagram, los muros de fotografías de reseñas, los lookbooks y las miniaturas de vídeos son infractores comunes de las imágenes fuera de pantalla. Cargue sus imágenes de forma diferida y considere cargar todo el widget después del desplazamiento o inactivo si no es necesario para la primera decisión de compra.

<img
  src="&lbrace;&lbrace; block.settings.image | image_url: width: 800 &rbrace;&rbrace;"
  loading="lazy"
  decoding="async"
  width="800"
  height="800"
  alt="&lbrace;&lbrace; block.settings.image.alt | escape &rbrace;&rbrace;"
>

5. Vuelva a probar LCP y la auditoría de imágenes fuera de pantalla juntos

No celebre la advertencia de imagen fuera de pantalla si LCP empeoró. El resultado correcto es menos descargas tempranas innecesarias de imágenes y un LCP estable o mejorado. Pruebe primero el dispositivo móvil porque las redes y CPU más lentas hacen que los problemas de prioridad de imagen sean más visibles.

Solución manual frente a solución Thunder

Plantillas comunes de Shopify para comprobar

Primero revisa la página de inicio si utiliza secciones de imágenes apiladas, banners de héroes, colecciones destacadas, lookbooks, testimonios y cuadrículas de blogs. Consulte las páginas de productos si utilizan grandes galerías multimedia, reseñas de fotografías, bloques de recomendaciones o UGC. Consulte las páginas de la colección si la primera carga incluye demasiadas tarjetas de productos.

El contenido de la aplicación también importa. Las aplicaciones de revisión, las aplicaciones de feeds de Instagram, los creadores de páginas y las aplicaciones de recomendación a menudo inyectan imágenes fuera de los fragmentos de Liquid normales de su tema. Thunder puede mejorar la línea base del escaparate, pero algunos widgets de terceros aún necesitan configuración o eliminación a nivel de aplicación. la guía para Aplicaciones de Shopify que ralentizan las tiendas te ayuda a decidir qué vale la pena conservar.

Cómo confirmar que la solución funcionó

Ejecute las mismas URL a través de PageSpeed Insights y el Prueba de velocidad de Shopify. Observe la auditoría de imágenes fuera de pantalla, el tamaño total de la transferencia, el tiempo de los recursos LCP y CLS. de google Guía de optimización de LCP divide LCP en respuesta del servidor, retraso en la carga de recursos, duración de la carga de recursos y retraso en la representación, lo cual es útil cuando los cambios de prioridad de la imagen no mueven la métrica como se esperaba.

If the warning remains after lazy loading lower-page images, the remaining offenders may come from an app embed or a section that renders hidden images for sliders, tabs, or variant media. Hidden does not always mean free. Browsers may still discover images in markup, CSS backgrounds, or app-generated DOM.

FAQ