Solution rapide avec Thunder
Network payload is partly content and partly loading strategy. Thunder cannot decide which lifestyle photo or video you should keep, but it can stop non-critical scripts from competing with your first viewport and reduce the JavaScript burden that app-heavy stores download early.
Utilisez Thunder pour nettoyer le côté application et script, puis utilisez les étapes manuelles ci-dessous pour le poids du média. Si PageSpeed signale également des problèmes de format d'image ou de chargement paresseux, lisez notre Guide d'optimisation des images Shopify et Guide WebP et AVIF.
Installer ThunderQu'est-ce qui compte comme une énorme charge utile ?
Le poids de la page correspond au nombre total d'octets téléchargés par le navigateur : HTML, CSS, JavaScript, images, polices, vidéos, JSON, pixels de suivi et ressources d'application. Lighthouse signale des charges utiles très volumineuses, car chaque mégaoctet supplémentaire nuit aux utilisateurs mobiles, en particulier sur les connexions lentes et les téléphones de milieu de gamme.
Une page de produit Shopify allégée peut initialement charger environ 1 à 2 Mo. Une page d'accueil lourde avec un diaporama, un arrière-plan vidéo, un générateur de pages, cinq applications, trois familles de polices et de grandes sections de collection peut facilement télécharger 6 à 12 Mo. Le client ne se soucie pas de la beauté des actifs si la page est toujours en cours de chargement alors qu'il essaie de faire ses achats.
La taille de la charge utile n'est pas le seul facteur de vitesse. Une page de 2 Mo avec un JavaScript épouvantable peut sembler pire qu'une page de 3 Mo avec un chargement propre. Mais lorsque PageSpeed affirme que la charge utile est énorme, les octets sont le premier endroit où chercher.
Étape 1 : Trier l'onglet Réseau par taille de transfert
Open Chrome DevTools -> Réseau, désactivez le cache, rechargez la page et triez par taille transférée. Ignorez les petits fichiers pour le moment. Les principaux contrevenants habituels sont les images de héros, les photos de produits, les vidéos intégrées, les packages d'applications, les grands thèmes JavaScript, CSS et les fichiers de polices.
Utilisez PageSpeed pour le score, mais utilisez l'onglet Réseau pour les décisions. Si le fichier le plus volumineux est une image de héros de 2,4 Mo, ne commencez pas par réduire un fichier CSS de 12 Ko. Si les dix premiers fichiers sont des scripts d’application, ne passez pas la matinée à compresser les miniatures des produits.
Pour un audit reproductible, suivez notre guide des résultats des tests de vitesse et le complet Guide d'optimisation de la vitesse Shopify.
Étape 2 : demander des images Shopify plus petites
Le CDN de Shopify peut servir des images redimensionnées, mais votre Liquid décide des largeurs demander. Si le héros rendu a une largeur de 1 200 px et que le thème télécharge un original de 4 000 px, le navigateur gaspille de la bande passante avant de pouvoir peindre LCP.
{{ section.settings.image
| image_url: width: 1600
| image_tag:
widths: '600, 900, 1200, 1600',
sizes: '(min-width: 990px) 100vw, 100vw',
loading: 'eager',
fetchpriority: 'high',
alt: section.settings.heading
}}Pour les grilles de produits situées sous la ligne de flottaison, utilisez des largeurs plus petites et un chargement paresseux. Une fiche produit a rarement besoin d’une image de 2000 px. Notre Guide rapide de la page de collecte et couvre les choix spécifiques au modèle.
Étape 3 : chargement paresseux de tout ce qui se trouve sous la première fenêtre
La première fenêtre devrait se charger immédiatement. Les médias en dessous de la ligne de flottaison devraient attendre. Cela inclut les fiches produits plus bas sur la page, les vignettes de la galerie, les sections de lookbook, les carrousels de critiques, les flux Instagram et les vidéos.
{{ product.featured_image
| image_url: width: 700
| image_tag:
widths: '300, 500, 700',
sizes: '(min-width: 990px) 25vw, 50vw',
loading: 'lazy',
alt: product.title
}}Ne chargez pas paresseux l'image du héros. C'est une erreur différente et cela nuit généralement au LCP. Utilisez le guide de préchargement des images de héros pour les images au-dessus de la ligne de flottaison et le guide de chargement paresseux pour tout le reste.
Étape 4 : Remplacer les charges utiles vidéo et curseur lourdes
La vidéo est le moyen le plus rapide de rendre une page Shopify énorme. Une vidéo d'arrière-plan peut ajouter plusieurs mégaoctets avant que le client ne voie un produit. Les intégrations YouTube et Vimeo peuvent également intégrer de gros ensembles JavaScript avant l'interaction.
Utilisez une image d'affiche et chargez la vidéo après avoir cliqué. Pour les sections de héros, une image statique l’emporte souvent. Pour la formation sur le produit, placez la vidéo plus bas sur la page et chargez paresseux l'intégration. Pour les curseurs, affichez un héros fort au lieu de précharger plusieurs diapositives.
Si la vidéo est importante pour la conversion, conservez-la. N'obligez pas chaque visiteur mobile à le télécharger avant de pouvoir naviguer. Notre Guide d'optimisation vidéo Shopify a des modèles spécifiques à l'intégration.
Étape 5 : Réduire le poids de l'application, de la police et du thème
Les applications ajoutent de la charge utile de manière moins évidente : fichiers JavaScript, fichiers CSS, polices Web, images de révision, pixels de suivi et réponses API. Parcourez les intégrations d'applications et supprimez tout ce qui n'est pas nécessaire sur chaque page. Recherchez ensuite dans les fichiers de thème les anciens extraits d'application laissés après la désinstallation des applications.
Les polices sont la prochaine victoire facile. Utilisez une ou deux familles, limitez les poids, préchargez uniquement le fichier de police le plus important et utilisez des polices système pour une interface utilisateur de faible valeur lorsque cela est possible. Si PageSpeed affiche un délai de chargement des polices, utilisez notre Guide d'optimisation des polices Shopify.
Pour le poids du code, nettoyer CSS et JavaScript inutilisés. Les constructeurs de pages et les anciennes sections de thème proposent souvent des ressources qui ne prennent plus en charge le contenu visible.
Correction manuelle vs Thunder Fix
| Problème de charge utile | Correction manuelle | Correction du tonnerre |
|---|---|---|
| Images surdimensionnées | Demander les largeurs Shopify CDN correctes et compresser le média | Fonctionne parallèlement aux meilleures pratiques en matière d'image ; ne choisit pas les images du produit |
| Charge utile JavaScript de l'application | Supprimer des applications, charger des extraits de code de manière conditionnelle, différer les scripts | Diffère automatiquement les scripts d'application non critiques |
| Vidéo et intégrations | Utilisez des affiches et chargez-les en cliquant ou en faisant défiler | Keeps scripts from competing with initial render |
| Code de thème inutilisé | Supprimez les anciens extraits et divisez CSS/JS | Réduit la pression de rendu autour des actifs restants |
Retest par modèle, pas seulement par page d'accueil
Les problèmes de charge utile varient selon le modèle. Votre page d'accueil peut contenir beaucoup d'images, les pages de produits peuvent contenir beaucoup d'applications et les pages de collection peuvent contenir beaucoup de cartes. Testez au moins une page d'accueil, une page produit et une page de collection.
Si vous souhaitez le chemin automatisé le plus rapide, installez Thunder, puis nettoyez les fichiers multimédias les plus volumineux. Pour une aide pratique, consultez notre Service d'optimisation de vitesse Shopify. Pour plus de détails sur le plan, voir Tarification Thunder.
Références et Validation
Chrome Guidage de la charge utile du réseau Lighthouse recommande de différer les demandes inutiles et de réduire au maximum les ressources. Cela correspond directement à Shopify : redimensionnez le média, chargez paresseusement les sections non critiques, coupez les scripts d'application et gardez la page initiale légère.
Les fils de discussion de la communauté Shopify concernant cet avertissement incluent généralement les mêmes conseils car les causes sont cohérentes : les images sont trop volumineuses, les applications se chargent partout, les vidéos sont intégrées trop tôt et le code inutilisé est toujours expédié. Corrigez d'abord les fichiers les plus volumineux. Les petites optimisations comptent plus tard ; les charges utiles géantes nécessitent des réductions directes.
Done For You
Core Web Vitals guarantee · 2-week delivery · 6 months Thunder free
Get Expert Optimization →Starting from €1,500
FAQ
Que signifient les énormes charges utiles du réseau sur Shopify ?
Cela signifie que la page télécharge trop d'octets lors du chargement initial. Sur Shopify, les principales causes sont les images surdimensionnées, les vidéos, les bundles JavaScript, les scripts d'application, les polices, les ressources de création de pages et le trop grand nombre de fiches produits sur les pages de collection.
Quel poids de page est bon pour Shopify ?
Il n'y a pas de limite universelle, mais les pages Shopify importantes doivent généralement rester inférieures à 2-3 Mo lors du chargement mobile initial. Si une page d'accueil ou une page produit télécharge 5 à 10 Mo avant l'interaction, les visiteurs mobiles le ressentiront.
Shopify compresse-t-il automatiquement les images ?
Shopify propose des images via son CDN et peut générer des versions redimensionnées et des formats modernes, mais votre thème contrôle toujours les dimensions demandées, le chargement paresseux, la priorité des images de héros et si les médias surdimensionnés sont intégrés au-dessus de la ligne de flottaison.
Thunder peut-il réduire automatiquement les charges utiles du réseau ?
Thunder reduces script pressure and optimizes loading behavior for app and theme assets. It can help prevent non-critical resources from loading too early, but manual media cleanup is still needed when the payload is mostly oversized images or video.
Les applications Shopify augmentent-elles la taille de la charge utile du réseau ?
Oui. Les applications chargent souvent du JavaScript, du CSS, des polices, des pixels de suivi, des images et des appels API. Les widgets d'avis, les outils de discussion, les fenêtres contextuelles, les générateurs de pages, les abonnements, les offres groupées et les applications de personnalisation sont des contributeurs courants à la charge utile.
Dois-je supprimer des images pour corriger cet avertissement ?
Pas aveuglément. Conservez les images qui facilitent la conversion, mais redimensionnez-les correctement, utilisez les largeurs d'url d'image Shopify, chargez paresseusement les médias sous la ligne de flottaison, remplacez les curseurs par un héros puissant et supprimez les images en double ou masquées.