Solution rapide avec Thunder
Si votre tableau de bord affiche un mauvais LCP, INP ou CLS après l'installation d'applications, des changements de thème ou des mises à jour de pages riches en médias, Thunder vous offre un premier passage rapide avant de payer pour un développement personnalisé. Il optimise automatiquement les scripts tiers, le chargement des ressources, les images, les polices et les modèles de performances de la vitrine.
Ce que mesure le tableau de bord des performances Web de Shopify
Le tableau de bord de Shopify mesure les performances de la vitrine sur les trois éléments essentiels du Web : la plus grande peinture de contenu, l'interaction avec la peinture suivante et le changement de mise en page cumulatif. La propre documentation d'aide de Shopify les décrit comme la vitesse de chargement, l'interactivité et la stabilité visuelle, et indique que les rapports montrent les expériences sur ordinateur et mobile ainsi que la manière dont les installations d'applications, les mises à jour de thème et les modifications de code affectent la vitrine.
That matters because most store owners test only the homepage in PageSpeed Insights. Real shoppers do not use your store that way. They land on product pages from ads, open collections from search, interact with filters, scroll product media, click sticky carts, and trigger review widgets. The Shopify Web Performance Dashboard helps you see those real paths.
Traitez le tableau de bord comme votre boussole de données de terrain. Traiter Google PageSpeed Insights pour Shopify, Chrome DevTools et le test de vitesse de Thunder comme outils de diagnostic. Le tableau de bord vous indique où se situe le problème commercial ; le test vous indique quelle requête, script, image ou bloc de mise en page en est la cause.
Comment lire LCP, INP et CLS dans Shopify
Commencez avec le mobile. La plupart du trafic Shopify est fortement mobile, et les appareils mobiles exposent les problèmes de thèmes et d'applications plus rapidement que les ordinateurs de bureau. Une page qui semble instantanée sur votre MacBook peut toujours échouer sur un téléphone de milieu de gamme doté d'un processeur plus lent et d'un réseau instable.
| Métrique | Bonne cible | Cause Shopify courante | Première action |
|---|---|---|---|
| LCP | 2,5 s ou plus rapide | Image de héros tardive, CSS bloquant le rendu, scripts d'application, sections de thème lentes | Vérifiez le plus grand élément au-dessus de la ligne de flottaison de la page |
| INP | 200 ms ou plus rapide | Widgets de révision lourds, pixels d'analyse, filtres, code de tiroir de panier | Rechercher des tâches longues et des scripts tiers |
| CLS | 0,1 ou inférieur | Dimensions d'image manquantes, bannières, popups, avis, blocs d'application injectés | Réservez de l'espace avant le chargement des actifs et des applications |
Si le LCP est médiocre sur les pages produits, lisez notre Guide d'optimisation Shopify LCP. Si INP est le problème, commencez par les scripts et les gestionnaires d'événements couverts dans notre Guide Shopify INP. Si la page saute, utilisez notre Guide de réparation Shopify CLS.
Build a Practical Action Plan from the Dashboard
N'ouvrez pas le tableau de bord et essayez de tout réparer en même temps. Créez une courte file d’attente de performances. Choisissez une métrique défaillante, un type d'appareil et un type de page de grande valeur. Un problème LCP de page produit avec des milliers de sessions mobiles bat un problème CLS de page de blog avec presque aucun trafic.
- Trouvez la métrique la plus faible. Mauvais bat Modéré, et le mobile bat généralement le bureau.
- Filtrer par type de page. Séparez les pages d'accueil, de produit, de collection, de blog et de destination.
- Adaptez le timing aux changements. Recherchez les installations d'applications, les publications de thèmes, les nouvelles sections multimédias ou les versions de code.
- Reproduire une page. Testez une URL avec Test de vitesse de Thunder et PageSpeed Insights.
- Corrigez la cause, puis attendez les données du champ. Les données de laboratoire peuvent s'améliorer aujourd'hui ; Les tendances du rapport Shopify peuvent prendre plus de temps.
Ce processus vous permet de rester honnête. Le tableau de bord de Shopify peut indiquer que quelque chose est lent, mais il ne peut pas toujours décider si le bon correctif est la compression d'image, le nettoyage de code, le report de script ou la suppression d'une application. C'est pourquoi le meilleur flux de travail combine les données de terrain, les diagnostics de laboratoire et un processus de déploiement sécurisé.
Correctifs manuels et correctifs Thunder
Vous pouvez résoudre manuellement les problèmes du tableau de bord si vous êtes à l'aise avec la modification de thèmes, le test du comportement des applications et la lecture des traces de performances du navigateur. Pour de nombreux magasins, un passage automatisé avec Thunder supprime d'abord les bloqueurs courants, puis un développeur peut se concentrer uniquement sur le travail inhabituel spécifique à un thème.
| Problème | Correction manuelle | Correction du tonnerre |
|---|---|---|
| Les scripts d'application nuisent à INP | Auditez chaque script tiers, différez les scripts sécurisés, testez les paniers et les widgets. | Optimise automatiquement le chargement des scripts avec les règles de sécurité compatibles avec l'application Shopify. |
| L'image du héros fait mal au LCP | Redimensionnez, préchargez, définissez la priorité, évitez le chargement paresseux de l'image LCP. | Applique des optimisations de chargement d'images et de ressources sans modifier manuellement chaque modèle. |
| Rendu des blocs de polices | Polices auto-hébergées, préchargez les poids critiques, réduisez les familles de polices. | Améliore le chargement des polices dans le cadre d'une pile de performances plus large. |
| Layout shifts from apps | Réservez de l'espace CSS pour les bannières, les critiques, les popups et les intégrations. | Réduit les déclencheurs de changement courants et aide à identifier l'impact lié à l'application. |
Flux de travail manuel sécurisé pour les correctifs de thème
If you decide to fix the theme manually, duplicate the live theme first. Work against the duplicate, test the exact URL from the dashboard, then publish only after you confirm product media, variants, cart drawer, search, filters, reviews, popups, checkout links, and tracking still work.
Un simple correctif LCP pour l'image de héros pourrait ressembler à ceci : préchargez l'image au-dessus de la ligne de flottaison, assurez-vous qu'elle n'est pas chargée paresseusement et donnez au navigateur suffisamment d'informations sur la taille pour réserver la mise en page.
<!-- In theme.liquid or a section rendered above the fold -->
<link rel="preload" as="image" href="/cdn/shop/files/hero.jpg" fetchpriority="high">
<img
src="/cdn/shop/files/hero.jpg"
width="1600"
height="900"
loading="eager"
fetchpriority="high"
alt="Image du produit héros de la page d'accueil"
>Cela peut aider, mais ne préchargez pas aveuglément chaque image. Précharger trop d’actifs oblige le navigateur à se battre. Pour un processus manuel plus approfondi, utilisez notre guide complet d'optimisation de la vitesse Shopify.
Quand utiliser un développeur
Faites appel à un développeur lorsque le tableau de bord pointe vers une architecture Liquid personnalisée, du code d'application dupliqué, des sections de thème cassées ou du JavaScript qui contrôle le comportement critique pour les revenus. Une application rapide peut automatiser les optimisations courantes, mais elle ne doit pas se frayer un chemin à travers un configurateur personnalisé, un widget d'abonnement ou un panier fortement modifié.
L'ordre efficace est le suivant : testez le magasin, installez Thunder pour les correctifs automatisés sûrs, puis engagez de l'aide uniquement pour les goulots d'étranglement restants. Cela permet aux développeurs de se concentrer sur le travail qui nécessite réellement un humain. Si vous avez besoin de ce chemin, consultez notre Service professionnel d'optimisation de la vitesse Shopify.
FAQ
Qu'est-ce que le tableau de bord des performances Web Shopify ?
Le tableau de bord des performances Web de Shopify est un ensemble de rapports dans l'administrateur Shopify qui montre les éléments essentiels du Web des utilisateurs réels pour votre vitrine. Il se concentre sur la vitesse de chargement, l'interactivité et la stabilité visuelle via LCP, INP et CLS.
Pourquoi Shopify affiche-t-il des chiffres différents de ceux de PageSpeed Insights ?
Shopify reports real user data from your store visitors, while PageSpeed Insights can show both lab data and Chrome field data. The numbers differ when traffic mix, devices, countries, or page samples differ.
Quelle métrique dois-je corriger en premier dans le tableau de bord des performances Web de Shopify ?
Corrigez d'abord les mauvaises métriques, puis commencez par le type de page qui obtient le plus de sessions mobiles. Pour de nombreuses boutiques Shopify, cela signifie des pages de produits avec un LCP médiocre, des pages de collection avec un INP médiocre ou des pages avec un CLS lié aux applications.
Une application rapide Shopify peut-elle améliorer le tableau de bord des performances Web ?
Oui, si l'application cible les goulots d'étranglement affichés dans le tableau de bord. Thunder facilite le chargement des scripts, la livraison des images, l'impact des applications, le chargement paresseux, le chargement des polices et d'autres causes courantes derrière les mauvais LCP, INP et CLS.
Combien de temps faut-il pour mettre à jour les données du tableau de bord de performances Web Shopify ?
Shopify indique que les données des rapports peuvent être retardées jusqu'à 36 heures et que les données de performances Web couvrent les 90 derniers jours. Traitez-le comme un rapport de tendances et non comme un outil de confirmation instantanée.
Ai-je toujours besoin d'un test de vitesse si Shopify dispose du tableau de bord ?
Oui. Le tableau de bord vous indique ce que vivent les utilisateurs réels au fil du temps. Un test de vitesse vous aide à reproduire une page spécifique, à inspecter les diagnostics de laboratoire et à confirmer quel code ou actif est à l'origine du problème.
Conclusion
Le tableau de bord des performances Web de Shopify est plus utile lorsque vous le transformez en une courte file d'attente de correctifs : métrique, type de page, cause, action, nouveau test. Utilisez-le avec notre guide Core Web Vitals pour Shopify, validez les URL dans un test de vitesse et laissez Thunder gérer les correctifs de performances reproductibles avant de consacrer du temps au développement personnalisé.