Ce que Shopify fait nativement pour le chargement paresseux
Shopify n'a pas une seule bascule de « chargement paresseux » dans votre panneau d'administration. Il n'y a pas de case à cocher sous Paramètres → Performances qui l'active dans tout le magasin. Au lieu de cela, Shopify fournit outils pour les développeurs de thèmes pour implémenter le chargement différé – et l'utilisation ou non de ces outils dépend entièrement de votre thème.
Voici ce que Shopify propose au niveau de la plateforme :
Le image_tag
Le filtre Filtre à liquide — Lorsque les thèmes utilisent ce filtre pour restituer des images, Shopify peut automatiquement définir chargement="paresseux" sur les images dans les sections qui apparaissent plus bas sur la page.
Propriété
Le section.index — Indique aux développeurs de thèmes la position d'une section sur la page, permettant une logique conditionnelle : chargez avec impatience les 2 premières sections, chargez paresseusement tout ce qui se trouve en dessous.
Conversion automatique WebP/AVIF — Le CDN de Shopify diffuse automatiquement les images dans des formats modernes lorsque le navigateur les prend en charge, réduisant ainsi la taille des fichiers de 25 à 50 %.
Srcset d'image réactif — Le
Le filtre image_tag
Le filtre génère plusieurs tailles d'image afin que les navigateurs téléchargent la bonne taille pour chaque écran.
Ce sont des éléments de base solides. Mais ce ne sont que des éléments de base, et non une solution complète. L'écart entre les « outils disponibles » et les « outils réellement utilisés dans votre magasin » est l'endroit où se situent la plupart des problèmes de performances.
Curieux de savoir où se situe votre magasin ? Exécutez un test de vitesse gratuit pour voir si le chargement paresseux aide ou nuit à vos performances.
Comment Shopify image_tag
Le filtre et section.index Travail
Le image_tag
Le filtre Le filtre liquide est le moyen recommandé par Shopify pour restituer des images dans des thèmes. Lorsqu'un développeur de thème l'utilise correctement, il gère le dimensionnement réactif, la conversion de format et le chargement paresseux sur une seule ligne :
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}
But the real power comes from combining it with section.index. Cette propriété indique au thème la position qu'occupe une section sur la page. L'équipe de performance de Shopify recommande en l'utilisant comme ceci :
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Ce code charge avec impatience les images dans les deux premières sections (généralement le héros et la collection en vedette) et charge paresseusement tout ce qui se trouve en dessous. C'est une approche intelligente qui évite le #1 lazy loading mistake — chargement paresseux de votre image LCP. La propriété
Détail clé : Le section.index n'a été introduite qu'à la fin de 2022. Les thèmes construits avant cette date ne l'utilisent pas, ce qui signifie qu'ils chargent tout paresseusement (mauvais pour LCP) ou rien (mauvais pour les performances inférieures à la ligne de flottaison).
Le filtre
Le image_tag
Le filtre génère également un srcset
Attributs attribute with multiple image widths, letting the browser pick the optimal size. This works with lazy loading — when the browser decides to load a lazy image, it picks the right size from the srcset based on the viewport width.
Quels thèmes Shopify ont un chargement paresseux natif ?
Tous les thèmes ne sont pas égaux en matière d'implémentation du chargement paresseux. Voici la répartition :
Thèmes avec un bon chargement paresseux natif
Aube (et thèmes basés sur Dawn) — Utilisations image_tag
Le filtre + section.index correctement. Ajoute également fetchpriority="haut" sur les images LCP. Il s'agit de l'implémentation de référence de Shopify et de la référence en matière de performances de thème.
Sens, Artisanat, Goût, Colorblock — Les thèmes gratuits de Shopify, tous construits sur l'architecture Dawn. Ils héritent de la même logique de chargement paresseux.
La plupart des thèmes premium mis à jour après 2023 — Des développeurs de thèmes réputés comme Out of the Sandbox, Archetype et Prestige ont mis à jour leurs thèmes pour les utiliser section.index et image_tag
Le filtre.
Thèmes avec un chargement paresseux natif faible ou inexistant
Thèmes construits avant 2022 — Ceux-ci sont antérieurs section.index et utilisent souvent des bibliothèques de chargement paresseux JavaScript comme lazysizes, ou pas de chargement paresseux du tout.
Thèmes fortement personnalisés — Même si le thème de base avait un chargement paresseux, les modifications personnalisées le cassent souvent. Les développeurs qui ajoutent des sections personnalisées ignorent fréquemment le
Logique section.index .
Thèmes utilisant le chargement paresseux uniquement JS — Certains thèmes utilisent des lazysizes ou des bibliothèques similaires qui ajoutent une surcharge JavaScript et peuvent entrer en conflit avec le chargement différé du navigateur natif.
Vous ne savez pas à quelle catégorie appartient votre thème ? Le moyen le plus simple de le savoir est d'inspecter votre site - ce que nous aborderons dans le Section de test ci-dessous. Pour un aperçu plus approfondi des performances du thème, consultez notre guide sur le thèmes Shopify les plus rapides Guide.
5 choses que le chargement paresseux natif de Shopify ne couvre pas
Même avec un thème moderne utilisant image_tag
Le filtre correctement, le chargement paresseux natif de Shopify présente des angles morts importants :
1. Images et scripts injectés par l'application
Chaque application Shopify qui ajoute des éléments visuels (widgets d'avis, badges de confiance, popups de vente incitative, widgets de discussion) injecte ses propres images et scripts directement dans le DOM. Ceux-ci contournent entièrement le chargement paresseux de votre thème car ils ne sont pas rendus via Liquid. image_tag
Le filtre.
La boutique Shopify moyenne a 6 à 8 applications installées. Chacun ajoute des scripts qui se chargent immédiatement, quel que soit leur emplacement sur la page. C'est le le plus gros tueur de vitesse sur la plupart des magasins — et cela sort complètement du cadre du chargement paresseux natif.
2. Images d'arrière-plan CSS Éléments
Le chargement="paresseux" ne fonctionne que sur
Étiquette