Solution rapide avec Thunder
Thunder Page Speed Optimizer est conçu pour le moment exact où une application Shopify utile nuit à la vitesse de la vitrine. Il maintient votre pile d'applications en place tout en améliorant le chargement des scripts, la priorité des ressources, les images, les polices et les modèles mobiles Core Web Vitals.
Pourquoi le score de vitesse de Shopify diminue après l'installation d'applications
Les applications Shopify peuvent ajouter du code de vitrine de plusieurs manières : intégrations d'applications, extensions d'applications de thème, balises de script, événements client, pixels, fichiers CSS, extraits de code, iframes et appels d'API tiers. Certaines applications ajoutent du code uniquement sur les pages produits. D'autres se chargent sur chaque page même lorsque le widget visible n'apparaît qu'à un seul endroit.
Ce code supplémentaire peut affecter les trois Core Web Vitals. Un widget d’avis peut retarder Largest Contentful Paint s’il bloque le modèle de produit. Un script de suivi peut nuire à l'interaction avec Next Paint en ajoutant de longues tâches JavaScript. Une fenêtre contextuelle ou une barre d'annonce peut créer un décalage de mise en page cumulatif lorsqu'elle apparaît après que le rendu de la page a déjà commencé. Google recommande LCP sous 2,5 secondes, INP sous 200 millisecondes et CLS sous 0,1 pour une bonne expérience utilisateur.
Le tableau de bord des performances Web de Shopify est utile car il affiche les performances réelles des utilisateurs et peut vous aider à connecter une régression de vitesse aux modifications telles que les installations d'applications, les publications de thèmes et les modifications de code. Utilisez d'abord cette chronologie, puis utilisez Score de vitesse Shopify par rapport à PageSpeed Insights pour comprendre pourquoi différents outils peuvent afficher des nombres différents.
Étape 1 : Confirmez que l'application a réellement provoqué la chute
Les scores de vitesse évoluent pour des raisons qui n'ont rien à voir avec l'application que vous venez d'installer. Le trafic peut se déplacer vers des pays plus lents, un changement de thème peut être publié en même temps, une page de destination de campagne peut recevoir davantage de visiteurs mobiles ou les données de terrain Google peuvent être mises à jour après un certain délai.
- Notez la date d'installation. Comparez-le avec le tableau de bord et les notes d'analyse de Shopify.
- Testez quatre URL. Utilisez la page d'accueil, une page produit, une page de collection et une page de destination.
- Comparez les types de pages concernés. Une application d'évaluation de produits ne doit pas être blâmée pour une baisse du LCP sur la page d'accueil uniquement, à moins qu'elle ne s'y charge également.
- Vérifiez le panneau réseau du navigateur. Recherchez de nouveaux JavaScript, CSS, fichiers de polices, demandes iframe et appels d'analyse.
- Dupliquez le thème avant de changer quoi que ce soit. Ne déboguez jamais un chemin de revenus directement sur le thème live.
Si le score a baissé mais que vos statistiques d'utilisateur réel n'ont pas encore changé, lisez pourquoi les correctifs du score de vitesse Shopify n'apparaissent pas. Le même retard dans les données de terrain peut donner l’impression que les régressions et les récupérations sont tardives.
Audit manuel d'impact des applications pour les baisses de score de vitesse Shopify
Le chemin manuel est simple mais lent : isolez l'application, décidez si elle vaut la peine de la conserver, puis faites en sorte que le navigateur la charge plus tard ou uniquement lorsque cela est nécessaire. C'est plus simple avec un thème en double et une feuille de calcul des résultats avant et après.
| Signal | Ce que cela signifie habituellement | Premier correctif |
|---|---|---|
| Nouvelles tâches JavaScript longues | Le code du widget, du pixel, des avis, du chat ou du panier bloque le fil de discussion principal. | Différez les scripts non critiques et chargez les widgets selon l'intention de l'utilisateur. |
| Plus de CSS bloquant le rendu | L'application a ajouté une feuille de style qui bloque le premier rendu. | Chargez le CSS de l'application uniquement sur les pages où l'application apparaît. |
| La mise en page change après le chargement | L'application injecte une bannière, une popup, des étoiles, des recommandations ou un message de paiement en retard. | Réservez de l'espace avec CSS ou retardez l'interface utilisateur non critique jusqu'à la première interaction. |
| Sauts de charge utile du réseau | L'application charge des images, des polices, des réponses API ou des bibliothèques groupées. | Limitez le placement des pages, réduisez les options des widgets ou remplacez l'application. |
Pour des catégories d'applications plus approfondies, consultez nos guides sur correction des scripts d'application qui ralentissent Shopify, JavaScript tiers bloquant Shopify, et Applications Shopify qui ralentissent votre boutique.
Corrections de thème qui réduisent les dommages causés par la vitesse des applications
Certains impacts de l'application peuvent être réduits dans le code du thème. Faites-le avec précaution, car les scripts d'application contrôlent souvent les fonctionnalités visibles, les analyses, les options de produits, les paniers, les abonnements, les avis ou les outils de conformité.
First, remove app blocks from templates where they do not matter. A product recommendations app may not need to run on every blog post. A review widget should not load on collection pages if no review UI appears there. A chat app may be delayed until after the first scroll or click.
Deuxièmement, réservez un espace de mise en page pour l'interface utilisateur de l'application à chargement tardif. Par exemple, si des étoiles d'avis ou un message de paiement apparaissent sous le titre du produit, donnez au conteneur une hauteur minimale stable :
.product-review-slot {
min-height: 28px;
}
.installment-message-slot {
min-height: 40px;
}Troisièmement, évitez de charger des widgets facultatifs avant le contenu principal du produit. Un simple chargeur différé peut aider pour les widgets qui ne sont pas nécessaires pour la première peinture :
<script>
window.addEventListener('load', function () {
window.setTimeout(function () {
var script = document.createElement('script');
script.src = 'https://example-app-cdn.com/widget.js';
script.async = true;
document.body.appendChild(script);
}, 2500);
});
</script>N'utilisez pas ce modèle pour les scripts requis pour la sélection de variantes, l'ajout au panier, les abonnements, les liens de paiement, la prévention de la fraude, le consentement ou les analyses essentielles. Testez le flux d’achat sur mobile avant de publier toute modification.
Correction manuelle vs Thunder Fix
| Problème après l'installation de l'application | Correction manuelle | Correction du tonnerre |
|---|---|---|
| Les scripts d'application nuisent à INP ou TBT | Inspectez chaque script, décidez ce qui peut être différé et les widgets QA manuellement. | Optimise le chargement des scripts avec des règles de sécurité centrées sur Shopify. |
| Rendu des blocs CSS de l'application | Déplacez CSS vers les modèles nécessaires, insérez les styles critiques et évitez les styles d'application en double. | Améliore le chargement des ressources dans le cadre de la pile de performances automatisée. |
| Disposition des changements d'interface utilisateur injectés | Réservez de l'espace pour les blocs d'applications, les avis, les popups et les bannières. | Réduit les problèmes courants de Core Web Vitals et aide à stabiliser le comportement de chargement. |
| Une pile d'applications lourde ralentit le mobile | Supprimez les applications de faible valeur, consolidez les outils et réécrivez les widgets à fort impact. | Automatise le premier passage rapide avant un nettoyage personnalisé coûteux. |
Quand conserver, remplacer ou supprimer l'application
Un score de vitesse, ce n'est pas une affaire. Si une application ajoute 8 % de revenus et coûte 4 points de vitesse, vous la conservez probablement et optimisez le chargement. Si une application ajoute un badge sur lequel personne ne clique et coûte 20 points mobiles, supprimez-le.
Utilisez une règle de décision simple : conservez les applications qui protègent clairement les revenus ou la conformité, remplacez les applications qui dupliquent un autre outil et supprimez les applications qui ajoutent du code de vitrine sans valeur mesurable. Utilisez ensuite notre guide complet d'optimisation de la vitesse Shopify pour nettoyer les problèmes restants de thème, de média et de script.
Si vous souhaitez un chemin plus rapide, installez Thunder, exécutez à nouveau les mêmes URL de test et comparez le résultat. Pour les magasins qui choisissent entre une application et un travail d'expert, voir Outil d'optimisation de vitesse Shopify : application, audit ou développeur ou chèque Tarification Thunder.
FAQ
Pourquoi mon score de vitesse Shopify a-t-il diminué après l'installation d'une application ?
La plupart des baisses se produisent parce que l'application a ajouté du JavaScript, du CSS, des pixels, des widgets, des requêtes réseau ou des modifications de mise en page à la vitrine. L'application peut être utile, mais le navigateur a désormais plus de travail avant que la page puisse se charger et répondre.
Dois-je désinstaller l'application si mon score de vitesse Shopify chute ?
Pas immédiatement. Testez d'abord la page avant et après la désactivation de l'intégration de l'application, vérifiez si l'application affecte les revenus et voyez si le report du script ou le chargement des modifications résolvent le problème. Supprimez-le uniquement lorsque l'application ne justifie pas son coût en termes de vitesse.
Thunder peut-il corriger les baisses de vitesse causées par les applications Shopify ?
Thunder can help when the drop comes from common app-related performance issues such as script loading, render-blocking resources, lazy loading conflicts, heavy images, fonts, and mobile Core Web Vitals bottlenecks.
Comment puis-je trouver quelle application Shopify a ralenti ma boutique ?
Comparez la date d'installation avec les modifications du tableau de bord de performances Web Shopify, exécutez un test de vitesse sur les modèles clés, inspectez les demandes tierces dans DevTools, puis désactivez l'intégration d'une application à la fois dans un thème en double.
Les applications intégrées ralentissent-elles Shopify même lorsqu'elles sont désactivées ?
Habituellement, une application intégrée ne doit pas charger le code de la vitrine lorsqu'elle est désactivée, mais les anciens extraits de code, les modifications de thème, les pixels et les ressources restantes peuvent rester après les modifications de l'application. Vérifiez les fichiers de thème et les événements clients avant de supposer que l'application a complètement disparu.
Combien de temps faut-il pour que le score de vitesse Shopify récupère ?
Les tests en laboratoire peuvent s'améliorer immédiatement après une correction. Le tableau de bord des performances Web de Shopify et les données de terrain de Google prennent plus de temps car ils utilisent des données réelles sur les visiteurs au fil du temps, alors jugez les tendances sur plusieurs jours ou semaines.
Conclusion
Si votre score de vitesse Shopify diminue après l'installation d'applications, ne paniquez pas et ne supprimez pas aveuglément. Comparez les modèles concernés, isolez l'impact de l'application, conservez les outils qui génèrent leur coût de chargement et utilisez Thunder pour automatiser les correctifs courants de script, d'image, de police, de chargement différé et de Core Web Vitals avant de payer pour un travail personnalisé.