Vitesse des pages de collection Shopify : corrigez la lenteur et les images eager

Pourquoi les pages de collection sont les plus lentes de Shopify

Si vous avez déjà testé votre boutique Shopify dans Google PageSpeed Insights, vous avez probablement remarqué un schéma : votre page d'accueil s'en sort correctement, les pages produit sont convenables, mais les pages de collection obtiennent des scores catastrophiques.

Ce n'est pas un bug — c'est la nature des pages de collection. Alors qu'une page produit affiche 1-5 images et du texte, une page de collection doit afficher :

Le calcul est simple : une page produit avec 3 images totalise peut-être 300KB de données d'images. Une page de collection affichant 24 produits avec des images non optimisées peut facilement atteindre 3-5MB rien qu'en images. Ajoutez le JavaScript, le CSS, les polices et les scripts de tracking, et vous arrivez à 5-8MB de poids total de page.

Sur un téléphone mobile en 4G, cela se traduit par un temps de chargement de 6-12 secondes. Google considère tout ce qui dépasse 2.5 secondes comme une mauvaise expérience Largest Contentful Paint (LCP).

Les 6 plus grands tueurs de vitesse des pages de collection

Tous les problèmes de performance ne se valent pas. Voici les problèmes spécifiques qui pénalisent le plus les pages de collection, classés par impact :

1. Images produit non optimisées (plus gros impact)

C'est le tueur de vitesse n°1 des pages de collection, responsable de 60-80 % du poids total de la page dans la plupart des boutiques. Problèmes courants :

• • Images surdimensionnées — téléverser des photos produit de 4000×4000px affichées à 300×300px sur les cartes de collection
• • Pas de lazy loading — les 24+ images se téléchargent immédiatement, même celles sous la ligne de flottaison que le visiteur n'a pas atteintes
• • Mauvais format — servir du JPEG/PNG quand le WebP ou l'AVIF serait 30-50 % plus léger
• • Pas de srcset — servir la même grande image au mobile et au desktop au lieu de tailles adaptées à l'appareil

2. JavaScript de filtre bloquant le rendu

Les fonctionnalités de filtre et de tri des collections — qu'il s'agisse des filtres natifs Shopify OS 2.0 ou d'applications tierces comme Boost Product Filter — chargent souvent 50-200KB de JavaScript qui bloquent le rendu de la page. Le visiteur ne peut pas voir les produits tant que ce JavaScript n'a pas fini de se télécharger et de s'exécuter.

Les applications de filtre populaires ajoutent leurs propres bundles CSS et JS en plus des ressources de votre thème. Certaines injectent des scripts inline dans le <head> qui doivent s'exécuter avant tout affichage de contenu. Pour en savoir plus, consultez notre guide pour corriger les ressources bloquant le rendu sur Shopify.

3. Trop de produits par page

Certains propriétaires de boutiques configurent leurs collections pour afficher 48, 72, voire 100 produits par page en pensant améliorer l'expérience d'achat. En réalité, cela multiplie chaque problème de performance — plus d'images, plus d'éléments DOM, plus de mémoire consommée, plus de calculs de mise en page.

4. Images de bannière de collection

Beaucoup de thèmes affichent une grande image héro/bannière en haut des pages de collection. Cette image est souvent l'élément LCP — le plus grand contenu visible au chargement de la page. Si elle n'est pas correctement dimensionnée et préchargée, elle retarde tout le temps de chargement perçu.

5. Scripts d'applications tierces

Les scripts tiers des applications d'avis, programmes de fidélité, widgets de chat et outils d'analytics se chargent sur chaque page — y compris les pages de collection. Sur une page produit, 500ms de surcharge de scripts tiers se remarquent. Sur une page de collection déjà lourde, cela vous fait basculer au-delà du point de rupture.

6. Effets de survol et permutations d'images

Un pattern de design populaire consiste à montrer une seconde image produit au survol. Cela signifie charger deux images par carte produit au lieu d'une — doublant le poids des images pour une fonctionnalité que la plupart des utilisateurs mobiles ne voient jamais (pas de survol sur écran tactile).

Correctif : chargement eager de l'image de bannière dans theme.liquid

L'un des problèmes de vitesse les plus courants des pages de collection Shopify concerne le chargement de l'image de bannière héro. Beaucoup de thèmes — y compris Dawn, Refresh et d'autres thèmes OS 2.0 — mettent la bannière de collection en loading="lazy" par défaut. C'est une erreur pour la bannière héro, car c'est généralement l'élément Largest Contentful Paint (LCP) — le plus grand contenu visible au premier chargement de la page.

Quand la bannière héro est en lazy loading, le navigateur retarde délibérément son téléchargement jusqu'à ce que l'utilisateur s'en approche en défilant. Mais la bannière est déjà visible dans le viewport — le navigateur attend donc inutilement, plombant votre score LCP.

Le correctif : passez les bannières héro en chargement eager

Trouvez la section héro/bannière de collection dans vos fichiers de thème. Dans la plupart des thèmes OS 2.0, elle se trouve dans sections/main-collection-banner.liquid ou similaire. Repérez la balise <img> qui affiche la bannière de collection et modifiez (ou ajoutez) ces attributs :

<!-- ❌ Wrong: lazy loading the hero banner -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="lazy"
  alt="{{ section.settings.image.alt }}">

<!-- ✅ Correct: eager loading with high fetch priority -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="eager"
  fetchpriority="high"
  width="{{ section.settings.image.width }}"
  height="{{ section.settings.image.height }}"
  alt="{{ section.settings.image.alt }}">

Pour les thèmes Dawn/OS 2.0 en particulier

Dans les thèmes basés sur Dawn, la bannière de collection est souvent rendue via le filtre image_tag ou image_url dans sections/main-collection-banner.liquid. Vous devrez peut-être aussi ajouter une balise <link rel="preload"> dans le head de votre theme.liquid pour indiquer au navigateur de commencer à télécharger l'image de bannière avant même de rencontrer la balise <img> :

<!-- Add to theme.liquid <head> for collection pages -->
{% if template.name == 'collection' and collection.image %}
  <link rel="preload" as="image"
    href="{{ collection.image | image_url: width: 1600 }}"
    fetchpriority="high">
{% endif %}

Correctif manuel n°1 : optimiser les images de collection

Le changement le plus impactant que vous puissiez faire est de corriger le chargement des images produit sur les pages de collection.

Ajoutez le lazy loading natif

Trouvez le template de carte produit de votre collection (généralement snippets/card-product.liquid ou similaire) et ajoutez loading="lazy" aux images produit. Mais attention — vous ne devez PAS appliquer le lazy loading à la première rangée de produits visibles, car cela retarde le LCP.

{% for product in collection.products %}
  {% if forloop.index <= 4 %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="eager"
         fetchpriority="{% if forloop.first %}high{% else %}auto{% endif %}"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% else %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="lazy"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% endif %}
{% endfor %}

Utilisez des tailles d'images responsives

Au lieu de servir une seule grande image à tous les appareils, utilisez l'attribut srcset avec le filtre image_url de Shopify :

<img
  src="{{ product.featured_image | image_url: width: 400 }}"
  srcset="
    {{ product.featured_image | image_url: width: 200 }} 200w,
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 600 }} 600w"
  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
  loading="lazy"
  width="400" height="400"
  alt="{{ product.featured_image.alt | escape }}">

Définissez des dimensions explicites

Incluez toujours les attributs width et height sur vos images. Sans eux, le navigateur ne peut pas calculer la mise en page avant le chargement de l'image, causant du Cumulative Layout Shift (CLS) — vos produits sautent dans tous les sens pendant que les images se chargent. Consultez notre guide des Core Web Vitals pour en savoir plus sur le CLS.

Correctif manuel n°2 : réduire les produits par page

C'est le correctif manuel le plus simple mais souvent négligé. Dans les paramètres de votre thème (ou dans le template de collection), ajustez le nombre de produits affichés par page.

Dans les thèmes Shopify Online Store 2.0, vous pouvez généralement changer cela dans Personnaliser → Page de collection → Grille de produits → Produits par page. Pour les thèmes vintage, vous devrez modifier la balise Liquid paginate du template de collection :

{% paginate collection.products by 20 %}
  <!-- product grid -->
{% endpaginate %}

Gardez en tête : réduire les produits par page signifie plus de pagination. Assurez-vous que votre pagination est accessible et conviviale, avec des numéros de page clairs et des boutons suivant/précédent.

Correctif manuel n°3 : optimiser les filtres et le tri

Les fonctionnalités de filtre et de tri sont essentielles à l'utilisabilité des collections — mais elles sont aussi une source majeure de surcharge JavaScript. Voici comment les optimiser :

Utilisez le filtrage natif de la vitrine Shopify

Si vous utilisez un thème Shopify Online Store 2.0, utilisez le filtrage natif intégré de Shopify plutôt que des applications de filtre tierces. Le filtrage natif est côté serveur, ce qui signifie qu'il ne nécessite pas de JavaScript client lourd. La page se recharge avec les résultats filtrés au lieu de filtrer côté client.

Pour l'activer : allez dans Admin Shopify → Boutique en ligne → Navigation → Filtres de collection et de recherche. Ajoutez les filtres souhaités (prix, disponibilité, type de produit, fournisseur, etc.).

Différez le JavaScript des filtres

Si vous devez utiliser une application de filtre tierce pour des fonctionnalités avancées, assurez-vous que ses scripts sont différés. Cherchez la balise <script> de votre thème qui charge le JS de l'application de filtre et ajoutez l'attribut defer :

<!-- Before (render-blocking) -->
<script src="https://filter-app.com/bundle.js"></script>

<!-- After (deferred) -->
<script src="https://filter-app.com/bundle.js" defer></script>

Correctif manuel n°4 : mettre en place une pagination intelligente

Votre façon de gérer la pagination affecte à la fois la vitesse et l'expérience utilisateur. Voici les trois approches, classées par performance :

Si vous utilisez le défilement infini ou « Voir plus », assurez-vous que votre implémentation utilise l'API Intersection Observer (pas des écouteurs d'événements de scroll, qui plombent la performance) et inclut une pagination de repli <noscript> correcte pour les robots SEO.

Correctif manuel n°5 : CSS critique pour les collections

Le navigateur ne peut rien afficher tant qu'il n'a pas téléchargé et parsé votre fichier CSS complet. Sur Shopify, les fichiers CSS de thème font typiquement 100-300KB. L'inlining du CSS critique résout cela en plaçant le CSS nécessaire au contenu au-dessus de la ligne de flottaison directement dans le HTML.

Pour les pages de collection, le CSS critique inclut les styles de :

• • L'en-tête/la navigation
• • L'image de bannière de collection (si présente)
• • La première rangée de cartes produit (grille, dimensionnement des images, styles de texte)
• • La mise en page de la barre latérale de filtres (si visible au-dessus de la ligne de flottaison)

Générer le CSS critique manuellement est fastidieux — il faut identifier quelles règles CSS s'appliquent aux éléments au-dessus de la ligne de flottaison, les extraire, les inliner dans une balise <style> dans le <head>, puis charger la feuille de style complète de manière asynchrone. Des outils comme Critical d'Addy Osmani peuvent aider à automatiser cela, mais les intégrer dans un processus de build de thème Shopify est loin d'être trivial.

Comment mesurer la vitesse des pages de collection

Ne devinez pas — mesurez. Vous pouvez tester la vitesse de votre page de collection en quelques secondes avec notre outil gratuit, ou utiliser les options ci-dessous. Mais testez les bonnes URLs. La plupart des gens testent leur page d'accueil et s'arrêtent là. Pour la vitesse des pages de collection, vous devez tester :

Utilisez ces outils pour vos tests (plus de détails dans notre guide de surveillance de la performance) :

• • Google PageSpeed Insights — teste mobile et desktop, affiche les Core Web Vitals
• • GTmetrix — graphiques en cascade détaillés montrant exactement ce qui est lent
• • Chrome DevTools (onglet Network) — filtrez par images pour voir le poids total des images
• • WebPageTest — vue filmstrip pour voir quand les produits deviennent visibles

Thunder vs optimisation manuelle des pages de collection

Questions fréquentes

Ressources associées