Shopify diffère les images hors écran : corrigez l'avertissement PageSpeed

Pourquoi PageSpeed signale les images hors écran sur Shopify

PageSpeed signale les images hors écran lorsque des images en dehors de la fenêtre d'affichage initiale sont téléchargées avant qu'elles ne soient nécessaires. Sur Shopify, cela se produit souvent dans les sections de la page d'accueil, les grilles de collection, les méga menus, les blocs de recommandations, les vignettes de blog, les médias d'avis, les flux Instagram et les galeries multimédias de produits.

Le ​​coût n'est pas seulement celui de la bande passante. Les premiers téléchargements d'images sont en concurrence avec CSS, les polices, JavaScript et l'image qui définit réellement la première vue. Les conseils LCP de Google recommandent d’afficher rapidement le plus grand élément Contentful Paint probable. Un bon LCP dure 2,5 secondes ou plus pour au moins 75 % des visites, et perdre la priorité réseau précoce sur les images des pages inférieures rend cela plus difficile.

Si votre avertissement apparaît à côté de charges utiles volumineuses ou d'avertissements de livraison d'images, lisez Optimisation des images Shopify, améliore la diffusion des images, et énormes charges utiles réseau. Le report d’image hors écran fait partie de la pile plus large de vitesse d’image.

La règle : paresseux en dessous du pli, impatient au-dessus du pli

La règle simple est utile : les images situées sous la ligne de flottaison doivent généralement utiliser chargement="paresseux", alors que les images probablement visibles dans la première fenêtre doivent utiliser un chargement rapide. Le problème est que les sections Shopify sont réutilisables. Une section de bannière peut figurer en premier sur la page d'accueil, en troisième sur une page de destination et à l'intérieur d'un modèle de page produit. Le même extrait peut nécessiter une priorité différente en fonction de son emplacement.

Les conseils de performances de Google mettent en garde contre le chargement paresseux de l'image LCP. Pour Shopify, cela signifie généralement l’image principale de la page d’accueil, l’image principale du produit ou la bannière supérieure de la collection. Si vous chargez ces ressources paresseusement, le navigateur peut les découvrir tardivement et le LCP s'aggrave même si l'avertissement d'image hors écran s'améliore.

Manuel étape par étape : correction du report des images hors écran sur Shopify

1. Identifiez l'image qui ne doit pas être différée

Dans PageSpeed Insights, recherchez l'élément LCP. S'il s'agit d'une bannière de héros, d'une image de produit ou d'une image de collection au-dessus de la ligne de flottaison, ne la chargez pas paresseusement. Donnez-lui des dimensions claires et une priorité élevée.

<!-- 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;

Pour plus de détails, utilisez le Guide de préchargement des images de héros Shopify et Guide d'optimisation du LCP.

2. Chargement paresseux des fiches produits répétées sous la première ligne

Les grilles de collection peuvent télécharger des dizaines d'images de produits à la fois. Conservez la première ligne visible par défaut ou par défaut, puis chargez paresseusement les lignes inférieures. Si votre grille s'affiche avec un index de boucle, utilisez-le pour décider de la priorité.

{% 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. Ajoutez des dimensions pour que les images paresseuses ne modifient pas la mise en page

Le chargement paresseux peut créer CLS si le navigateur ne sait pas combien d'espace réserver. L'assistant de balise d'image de Shopify peut afficher la largeur et la hauteur, mais le balisage personnalisé les oublie souvent. Utilisez le rapport hauteur/largeur CSS pour les cartes et réservez des emplacements stables pour les médias.

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

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

Si le changement de disposition échoue déjà, vérifiez le Guide de réparation Shopify CLS avant de modifier le comportement de chargement des images dans le thème.

4. Retarder les médias intégrés et les flux sous le pli

Les flux Instagram, les murs de photos d'avis, les lookbooks et les miniatures vidéo sont des contrevenants courants aux images hors écran. Chargez paresseusement leurs images et envisagez de charger l'intégralité du widget après le défilement ou l'inactivité si cela n'est pas nécessaire pour la première décision d'achat.

<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. Retestez ensemble le LCP et l'audit d'image hors écran

Ne célébrez pas l'avertissement d'image hors écran si le LCP s'est aggravé. Le résultat correct est moins de téléchargements d’images précoces inutiles et un LCP stable ou amélioré. Testez d'abord le mobile, car les réseaux et les processeurs plus lents rendent les problèmes de priorité des images plus visibles.

Correction manuelle vs Thunder Fix

Modèles Shopify courants à vérifier

Vérifiez d'abord la page d'accueil si elle utilise des sections d'images empilées, des bannières de héros, des collections en vedette, des lookbooks, des témoignages et des grilles de blog. Vérifiez les pages de produits si elles utilisent de grandes galeries multimédias, examinent des photos, des blocs de recommandations ou de l'UGC. Vérifiez les pages de collection si le premier chargement comprend trop de fiches produits.

Le contenu de l'application compte également. Les applications de révision, les applications de flux Instagram, les créateurs de pages et les applications de recommandation injectent souvent des images en dehors des extraits Liquid normaux de votre thème. Thunder peut améliorer la base de référence de la vitrine, mais certains widgets tiers nécessitent toujours des paramètres ou une suppression au niveau de l'application. Le guide de Applications Shopify qui ralentissent les magasins vous aide à décider ce qui vaut la peine d'être conservé.

Comment confirmer que le correctif a fonctionné

Exécutez les mêmes URL via PageSpeed Insights et le Test de vitesse Shopify. Regardez l'audit de l'image hors écran, la taille totale du transfert, la durée des ressources LCP et CLS. celui de Google Conseils d'optimisation du LCP divise LCP en réponse du serveur, délai de chargement des ressources, durée de chargement des ressources et délai de rendu, ce qui est utile lorsque les changements de priorité de l'image ne déplacent pas la métrique comme prévu.

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