Accélérez les pages de produits Shopify en 60 secondes
Avant de plonger dans les optimisations manuelles, testez la vitesse de votre page produit pour voir votre score actuel. Saisissez l'URL d'une page produit (pas seulement votre page d'accueil) pour une image précise. Si votre score mobile est inférieur à 60, Thunder Page Speed Optimizer peut aider immédiatement :
- Diffère les scripts d'application de révision (Judge.me, Loox, Stamped) afin que les images de vos produits soient rendues en premier
- Retarde le JavaScript du widget de vente incitative et de vente croisée jusqu'après le chargement de la page
- Optimise l'ordre de chargement des scripts d'analyse et de chat sur les pages de produits
- Fonctionne avec tous les thèmes Shopify 2.0 — aucune modification de code n'est nécessaire
Pour les commerçants qui souhaitent comprendre ce qui ralentit leurs pages de produits et également les optimiser manuellement, continuez à lire.
Pourquoi les pages de produits Shopify sont plus lentes que les autres pages
Votre page d'accueil peut obtenir un score de 75 sur mobile tandis que vos pages de produits obtiennent un score de 45. Cet écart n'est pas aléatoire. Les pages de produits chargent beaucoup plus de ressources que tout autre type de page de votre boutique :
| Ressource | Taille typique | Pourquoi il est chargé |
|---|---|---|
| Images de produits (5-10) | 500KB-2MB | Galerie, zoom, variantes d'images |
| Vérifier les scripts de l'application | 150-500KB | Notes par étoiles, carrousel d'avis |
| Applications de vente incitative/croisée | 100-400KB | Widgets "Vous aimerez peut-être aussi" |
| Sélecteur de variantes JS | 20-80KB | Échantillons de couleurs, sélecteurs de tailles |
| Données JSON du produit | 10-150KB | Prix des variantes, inventaire, métachamps |
| Scripts d'analyse | 150-600KB | Suivi amélioré du commerce électronique |
| Widget de discussion | 300-800KB | Bulle de support sur chaque page |
Une page de produit typique avec des avis, des recommandations de vente incitative, des analyses et un widget de chat chargé 1,5 à 4 Mo de JavaScript seul — en haut des images de produits. Comparez cela à une page d'accueil avec une image de héros et quelques produits phares chargeant 500 Ko à 1 Mo de JavaScript.
L'ironie : les pages produits sont le lieu où se produit la conversion. Une page produit lente vous coûte directement des ventes. Notre données de vitesse et de conversions montre que chaque seconde supplémentaire de temps de chargement de la page produit réduit les taux de conversion de 7 à 12 %.
Optimisation des images de produits pour la vitesse
Les images de produits constituent généralement la ressource la plus importante sur les pages de produits – et la plus courante. Elément LCP. Obtenir une bonne optimisation de l’image est le changement manuel le plus impactant que vous puissiez apporter.
Dimensions et format de téléchargement
- Taille maximale de téléchargement : 2000x2000px. Le CDN de Shopify génère automatiquement des versions plus petites via
srcset Attributs. Le téléchargement d’originaux de 4 000 px fait perdre du temps de traitement et de stockage. - Utilisez JPEG pour les photos de produits — Une qualité de 80 à 85 % constitue le meilleur équilibre. PNG uniquement pour les produits avec transparence (verre, superpositions).
- Shopify se convertit automatiquement en WebP pour les navigateurs qui le prennent en charge, mais la qualité du fichier source compte toujours pour la solution de secours.
- Compresser avant de télécharger. Des outils comme TinyPNG ou Squoosh peuvent réduire la taille de l'image de 40 à 60 % sans perte de qualité visible. Notre guide d'optimisation des images couvre l'intégralité du flux de travail.
Nombre d'images de produits
Chaque image de produit ajoute du poids à la page, même avec un chargement paresseux. Les thèmes Shopify chargent généralement avec impatience les 1 à 2 premières images et chargent paresseusement le reste, mais le navigateur découvre et commence toujours à analyser toutes les URL d'image lors du chargement initial de la page.
| Images par produit | Impact du poids des pages | Recommandation |
|---|---|---|
| 1-3 images | 100-400KB | Idéal pour les produits simples |
| 4-6 images | 300-800KB | Idéal pour la plupart des produits |
| 7-10 images | 500KB-1.5MB | Mode/meubles — assurer des travaux de chargement paresseux |
| 10+ images | 1MB+ | Envisagez plutôt la vidéo pour des photos détaillées |
Précharger l'image principale du produit
La première image du produit est presque toujours l'élément LCP sur les pages produits. Le précharger indique au navigateur de le récupérer avant de le découvrir dans le HTML, réduisant ainsi le LCP de 300 à 800 ms :
{% comment %} Add to theme.liquid <head> {% endcomment %}
{'{% if template contains "product" %}'}{'
'}
{' {% assign featured_image = product.featured_image %}'}{'
'}
{' {% if featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}Pour plus de techniques de préchargement, consultez notre guide d'astuces sur les ressources pour Shopify.
Scripts d'application de la page produit : le tueur de vitesse caché
De nombreuses applications Shopify ciblent spécifiquement les pages de produits. Widgets d'évaluation, recommandations de vente incitative, tableaux de tailles, badges de confiance : ils injectent tous du JavaScript qui s'exécute sur chaque page de produit. Voici comment les applications de page produit les plus courantes affectent la vitesse :
Examiner les applications
Les applications d'évaluation sont essentielles pour la preuve sociale, mais comptent parmi les scripts les plus lourds sur les pages de produits. Ils chargent des widgets de classement par étoiles, des carrousels d'avis, des critiques de photos et des sections de questions-réponses, tous nécessitant un JavaScript important :
- Juge.me : 150-300 Ko JS — relativement léger parmi les applications d'évaluation
- Loox (revues photos) : 200-500 Ko JS — plus lourd en raison de la fonctionnalité de galerie d'images
- Stamped.io : 150-400 Ko JS — varie en fonction des widgets activés
- Yotpo : 300-600 Ko JS — l'un des plus lourds en raison des fonctionnalités de la suite complète
Les avis sont essentiels à la conversion, donc supprimer l'application n'est pas la solution. Au lieu de cela, différez le script d'évaluation afin que l'image du produit, le titre, le prix et le bouton Ajouter au panier s'affichent en premier. Thunder gère cela automatiquement.
Applications de vente incitative et croisée
"Frequently bought together" and "You may also like" widgets add 100-400KB of JavaScript plus additional product image requests. These widgets are valuable below the fold but shouldn't block the main product content from rendering.
Badge de confiance et applications de preuve sociale
Les applications de badges de confiance (badges de livraison gratuits, icônes de paiement sécurisé) semblent légères, mais beaucoup chargent 50 à 150 Ko de JavaScript pour de simples images statiques. Pensez à remplacer les badges de confiance basés sur les applications par du HTML/CSS statique directement dans votre thème : zéro JavaScript, même impact visuel. Notre guide sur applications qui ralentissent votre boutique répertorie les pires contrevenants et les alternatives les plus rapides.
Comment auditer les scripts de page produit
- Ouvrez une page produit dans Chrome → DevTools → onglet Réseau
- Filtrer par "JS" pour voir tous les fichiers JavaScript
- Trier par taille (le plus grand en premier)
- Recherchez des domaines tiers — chacun représente une application ou un script externe
- Notez quels scripts bloquent le rendu (vérifiez la colonne "Initiateur")
This audit often reveals surprises — scripts from apps you forgot you installed, or scripts tiers chargement sur les pages produits où ils ne servent à rien.
Vitesse de sélection de variantes sur les pages de produits Shopify
Les produits avec de nombreuses variantes (taille, couleur, matériau) créent des défis de performances. L'objet JSON du produit Shopify – intégré en ligne dans chaque page de produit – contient des données pour chaque variante, y compris le prix, l'état des stocks et les images.
Impact par nombre de variantes :
- Moins de 20 variantes : Impact négligeable (~5-20 Ko de JSON)
- 20-50 variantes : Impact modéré (~20-60 Ko de JSON)
- 50-100 variantes : Impact notable (~ 60-150 Ko de JSON, peut affecter INP)
- Plus de 100 variantes : Important – envisagez de le diviser en plusieurs produits
Au-delà du poids des données, les sélecteurs de variantes avec de nombreuses options peuvent provoquer Problèmes INP si le JavaScript qui gère le changement de variante n'est pas optimisé. Chaque changement de variante déclenche une mise à jour du DOM pour le prix, la disponibilité et potentiellement les images : plus il y a de variantes, plus chaque interaction est lourde.
Astuce d'optimisation : Si vous avez des images spécifiques à une variante, assurez-vous que seule l'image de la variante actuelle est chargée avec impatience. Laissez le chargement paresseux gérer le reste. Certains thèmes pré-récupèrent toutes les variantes d'images, ce qui augmente considérablement le poids de la page.
Structure de la page produit Shopify pour une vitesse maximale
L'ordre et la structure des sections de votre page produit sont importants à la fois pour la vitesse perçue et la vitesse mesurée. Voici la structure optimale pour des pages produits rapides :
Au-dessus du pli (charger immédiatement)
- Galerie d'images du produit — Première image préchargée, reste chargée paresseusement
- Titre et prix du produit — HTML simple, aucun JavaScript requis
- Sélecteur de variantes — JS minimal pour la liste déroulante/l'échantillon
- Bouton Ajouter au panier — Doit être fonctionnel immédiatement
- Brève description — 2-3 premières phrases de la description du produit
Sous le pli (charge paresseuse)
- Description complète du produit — Peut utiliser des onglets pliables
- Widget de révision — Différer le script, afficher après défilement
- Produits associés / "Vous aimerez peut-être aussi" — Chargement lors du défilement
- Produits récemment consultés — Chargement lors du défilement
- Badges de confiance et garanties — HTML statique, aucun JS nécessaire
The key principle: everything the customer needs to make a purchase decision (image, price, Add to Cart) should load first. Everything else can wait. This is what separates a product page that scores 40 on mobile from one that scores 70.
Pour une approche globale de l'optimisation à l'échelle du magasin, consultez notre guide complet d'optimisation de la vitesse.
Vitesse de la page produit mobile : le champ de bataille de la conversion
Over 70% of Shopify traffic comes from mobile devices, and product pages are where the speed gap between mobile and desktop is largest. A product page scoring 90 on desktop might score 45 on mobile because:
- Les processeurs mobiles sont plus lents — L'analyse JavaScript prend 3 à 5 fois plus de temps sur les appareils mobiles moyens que sur les ordinateurs de bureau
- Les réseaux mobiles sont moins fiables — Même en 4G, les pics de latence entraînent des retards de chargement des ressources
- Les galeries d'images de produits sont plus lourdes sur mobile — Les galeries balayables préchargent souvent les images adjacentes pour un balayage fluide
- Les fenêtres mobiles déclenchent différentes mises en page — Certains thèmes chargent des CSS et JS supplémentaires pour les mises en page de produits spécifiques aux mobiles
Vérifiez votre scores de vitesse sur mobile par rapport à ordinateur de bureau — si l'écart est supérieur à 30 points, il existe probablement une application lourde en JavaScript qui est particulièrement punitive sur mobile. Utilisez la limitation du processeur de Chrome DevTools (ralentissement 4x) pour simuler l'expérience mobile sur ordinateur.
Thunder cible spécifiquement les performances mobiles : son report de script a le plus grand impact sur les scores mobiles, car c'est là que l'analyse JavaScript constitue le goulot d'étranglement. Voir .
Vitesse de la page produit et référencement : ce que Google mesure
Google utilise Core Web Vitals comme facteur de classement, et vos pages produits sont mesurées individuellement. Une page produit lente peut être moins performante dans les résultats de recherche même si votre page d'accueil est rapide. Les métriques les plus importantes pour les pages produits :
- LCP (la plus grande peinture à contenu) : Généralement l'image principale du produit. Cible en moins de 2,5 secondes. Le préchargement de l'image est la solution n°1.
- INP (Interaction avec la peinture suivante) : Sélection de variantes, clics sur Ajouter au panier et interactions avec la galerie. Cible inférieure à 200 ms. Les scripts d'application lourds sont généralement responsables.
- CLS (Décalage Cumulatif de Mise en Page) : Galeries d'images sans dimensions explicites, révision des widgets se chargeant tardivement et poussant le contenu vers le bas, changements de prix lors de la sélection des variantes. Cible inférieure à 0,1.
Corrigez ces métriques avec nos guides dédiés : Optimisation LCP, Correctifs INP, et Correctifs CLS.
Vitesse de la page produit : correction manuelle vs Thunder
| Optimisation | Approche manuelle | Avec Thunder |
|---|---|---|
| Report du script de révision | Modifier le code du thème, affichage de l'avis de rupture de risque | Automatique — les avis se chargent toujours, juste après le rendu de la page |
| Optimisation du widget de vente incitative | Contacter le développeur de l'application, options limitées | Report automatique des widgets non critiques |
| Gestion des scripts Analytics | Stratégie de chargement personnalisée par script | Toutes les analyses différées sans perte de données |
| Préchargement d'images | Ajouter un indice de préchargement dans theme.liquid | Priorisation automatique des ressources |
| Amélioration typique du score mobile | 10-20 points (heures de travail) | 20-35 points (installation de 60 secondes) |
Meilleurs résultats : combinez l'optimisation manuelle de l'image avec Optimisation automatique des scripts de Thunder. Voir plans actuels.
Liste de contrôle de vitesse de la page produit
Work through this checklist from top to bottom — items are ordered by impact:
- Installer l'optimiseur de vitesse de page Thunder — Diffère tous les scripts non critiques sur les pages produits. Le plus grand impact, le moins d'effort. Installer maintenant
- Compresser toutes les images du produit — Utilisez TinyPNG ou Squoosh, ciblez moins de 200 Ko par image à 2 000 x 2 000 px max.
- Limiter les images à 4-6 par produit — Plus d'images = plus de poids. Utilisez la vidéo pour des angles supplémentaires si nécessaire.
- Précharger l'image principale du produit — Add the preload hint from the code snippet above.
- Auditer les applications de la page produit — Count JavaScript files from third-party domains. Remove apps you're not using.
- Remplacez les badges de confiance basés sur les applications par du HTML statique — Aucun JavaScript n'est nécessaire pour les images statiques.
- Réduire le nombre de variantes — Divisez les produits avec plus de 100 variantes en listes distinctes.
- Assurez-vous que le chargement paresseux fonctionne — Vérifiez que les images situées sous le pli ont
chargement="paresseux". - Test sur mobile — Exécuter notre test de vitesse avec une URL de page produit, pas seulement la page d'accueil.
Questions fréquemment posées sur la vitesse de la page produit Shopify
Qu'est-ce qu'un bon score de vitesse pour une page produit Shopify ?
A realistic target for Shopify product pages is 60-80 on mobile and 85-95 on desktop in PageSpeed Insights. Stock themes with no apps score 80-95 on mobile, but real stores with review apps, upsell widgets, and analytics rarely stay above 70. If your product pages score below 40 on mobile, there's a significant optimization opportunity — typically from app scripts and unoptimized product images.
Pourquoi mes pages de produits Shopify sont-elles plus lentes que ma page d'accueil ?
Les pages de produits chargent plus de ressources que la plupart des autres pages : images de produits haute résolution (souvent 5 à 10 par produit), sélecteur de variantes JavaScript, widgets d'évaluation, scripts d'application de vente incitative/croisée et balisage de données structurées. De nombreuses applications injectent également des scripts spécifiquement sur les pages de produits qui ne s'exécutent pas sur la page d'accueil. Une page d'accueil avec une seule image de héros et un minimum de sections a beaucoup moins à charger qu'une page de produit avec une galerie, des critiques et des produits recommandés.
Combien d'images de produits dois-je utiliser pour une vitesse optimale ?
Utilisez 4 à 6 images de produits pour le meilleur équilibre entre conversion et vitesse. Chaque image supplémentaire ajoute 50 à 200 Ko selon la résolution. Au-delà de 6 images, le coût de la vitesse dépasse le bénéfice de la conversion pour la plupart des produits. Si vous avez besoin de plus d'images (meubles, mode), utilisez le chargement paresseux de manière agressive afin que seules les 1 à 2 premières images se chargent immédiatement. Le chargement paresseux natif de Shopify gère cela dans la plupart des thèmes modernes.
Les avis sur les produits ralentissent-ils les pages produits Shopify ?
Oui — les applications d'évaluation sont l'un des plus gros contributeurs de scripts sur les pages de produits. Judge.me ajoute 150 à 300 Ko de JavaScript, Loox (avec critiques de photos) ajoute 200 à 500 Ko et Stamped ajoute 150 à 400 Ko. Les scripts se chargent sur chaque page de produit, que ce produit ait ou non des avis. Thunder diffère les scripts d'application de révision afin qu'ils se chargent après le rendu de la page, préservant ainsi la valeur SEO des avis sans pénalité de vitesse.
Le nombre de variantes de produits affecte-t-il la vitesse des pages ?
Somewhat. Each variant adds data to the product JSON object embedded in the page. A product with 100+ variants (e.g., size × color × material combinations) can add 50-150KB of inline JSON. The bigger impact comes from variant-specific images — if each variant has its own image set, the browser may preload more images than necessary. Keep variants under 50 when possible and use a consistent image set across similar variants.
Comment Thunder accélère-t-il spécifiquement les pages de produits Shopify ?
Thunder reporte tous les JavaScript non critiques sur les pages de produits, y compris les widgets d'évaluation, les applications de vente incitative, les scripts d'analyse et les widgets de discussion, afin qu'ils se chargent une fois que la page devient interactive. Cela signifie que la galerie d'images du produit, le titre, le prix et le bouton Ajouter au panier s'affichent plus rapidement. La plupart des pages de produits constatent une amélioration de 20 à 35 points du score PageSpeed mobile. Thunder est entièrement compatible avec tous les thèmes Shopify 2.0 et n'affecte pas la fonctionnalité de la page produit.
Créez rapidement vos pages de produits Shopify
Product pages are your most important pages and typically your slowest. The speed gap comes from product image galleries, review widgets, upsell apps, and analytics scripts — all fighting for bandwidth on the page where conversion happens.
L'optimisation de la vitesse des pages produits la plus efficace combine : la compression et la limitation des images de produits, le préchargement de l'image principale du produit, l'audit et la suppression des applications inutiles et l'utilisation Thunder Page Speed Optimizer pour différer tous les scripts non critiques afin que le contenu de votre produit soit rendu en premier.
Testez une page produit maintenant — pas votre page d'accueil — pour voir le score de vitesse réel de votre page produit. Ensuite, parcourez la liste de contrôle ci-dessus pour combler l’écart.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more