Comment optimiser la vitesse de votre site Shopify en ciblant les apps qui ralentissent la page

Quand j'accompagne des petites boutiques en ligne ou que je fais des audits pour des créateurs, la vitesse de chargement revient systématiquement dans la conversation. Sur Shopify, les apps sont un vrai atout pour ajouter des fonctionnalités rapidement, mais elles sont aussi souvent responsables de ralentissements visibles. Ici, je vous partage ma méthode pour identifier les apps coupables, mesurer leur impact et les corriger — sans sacrifier les fonctionnalités essentielles de votre boutique.

Pourquoi les apps peuvent ralentir votre boutique

Avant tout, il faut comprendre comment une app peut impacter la vitesse : la plupart injectent des scripts JavaScript, des feuilles de style (CSS), ou chargent des ressources depuis des serveurs externes. Certains scripts bloquent le rendu (render-blocking), d'autres ajoutent des requêtes réseau multiples ou des images/vidéos non optimisées. Parfois, une app installe aussi des snippets dans votre thème qui restent même après désinstallation — ce qui peut maintenir une dette technique.

Étape 1 : mesurer la performance globale

Je commence toujours par des outils fiables pour établir une base de référence :

• Google PageSpeed Insights — pour la note globale et les recommandations (mobilité et desktop).
• WebPageTest — pour visualiser le waterfall et repérer les scripts les plus longs.
• GTmetrix — pour une autre vue du waterfall et des timings.
• Shopify Online Store Speed report (si disponible sur votre plan) — utile pour suivre l'évolution dans le temps.

Ces rapports indiquent souvent que des tiers ou des scripts externes augmentent le TTFB, le Largest Contentful Paint (LCP) ou le Total Blocking Time (TBT). Mais ils ne disent pas toujours quelle app est derrière chaque requête, il faut creuser.

Étape 2 : détecter l'app responsable

Voici ma méthode de detective, simple et efficace :

• Analyse du waterfall : dans WebPageTest ou GTmetrix, repérez les domaines externes (ex : cdn.appname.com, scripts.widget.io). Notez les scripts qui prennent le plus de temps ou qui bloquent.
• Mode incognito / désactivation par étapes : je recommande d'abord cloner le thème (thème de développement) pour tester sans impacter la boutique live. Puis, désactivez une app à la fois et rafraîchissez l'analyse. Si la performance s'améliore sensiblement, vous avez la coupable.
• Utiliser l'App Performance API de Shopify : si vous avez accès, cette API liste les apps et leur impact sur les performances selon Shopify. Très pratique pour prioriser.
• Recherche dans le thème : certains snippets injectés portent le nom de l'app dans le fichier (ex: customer-reviews.liquid). Recherchez des commentaires, noms d'assets ou handles qui font référence à l'app.

Étape 3 : comprendre l'impact réel (table de comparaison)

Étape 4 : corriger sans tout supprimer

Supprimer une app n'est pas toujours souhaitable car vous perdez une fonctionnalité importante. Voici des tactiques que j'applique selon les cas :

• Delay / defer : pour les scripts non essentiels (popups, trackers), je les déclenche après le load ou avec un délai afin qu'ils n'affectent pas le LCP.
• Chargement conditionnel : ne charger un script que sur les pages où il est nécessaire (ex : fiche produit pour les avis, page panier pour un upsell).
• Utiliser des versions « inline » légères : certaines apps proposent un widget minimal. Préférez-les quand c'est possible.
• Nettoyage après désinstallation : recherchez et supprimez les snippets, assets, ou tags laissés par l'app dans votre thème et dans le code (souvent dans layout/theme.liquid ou dans sections/ ou snippets/).
• Remplacement par des solutions natives : Shopify ajoute régulièrement des fonctionnalités (notifications, sections, avis). Si une fonctionnalité est disponible nativement, passez à la version Shopify.

Étape 5 : optimiser les assets et la livraison

En complément des corrections d'apps, ces optimisations réduisent l'impact global :

• Images : webp, responsive srcset, lazy-loading nativement dans Shopify (loading="lazy").
• Fonts : héberger ou précharger uniquement les variantes nécessaires; utiliser font-display: swap.
• Minification et bundling : combiner les scripts CSS/JS quand c'est possible (attention à ne pas casser le chargement des apps).
• CDN : vérifier que les ressources lourdes (images, vidéos) passent par un CDN performant.

Outils et habitudes que j'utilise systématiquement

• Script blocker (plugin navigateur) pour voir l'impact des scripts tiers individuellement.
• Copie du thème pour expérimenter sans risque.
• Checklist avant installation d'une app : lire les avis sur performance, chercher "performance" dans la doc, tester la version gratuite sur un thème test.
• Documenter chaque app installée (fonction, pages affectées, date d'installation) pour faciliter les audits futurs.

Cas concret : comment j'ai optimisé une boutique récemment

Sur une boutique de bijouterie, le temps de chargement du produit était trop long. Analyse WebPageTest : plusieurs scripts de widgets (chat + avis + recommandations) chargeaient avant le rendu. J'ai suivi ces étapes :

• Cloné le thème et testé les désactivations : le script du chat réduisait le LCP de 1,8s quand il était différé.
• Modifié le code pour charger le chat au premier clic sur l'icône. Résultat : chat disponible, mais n'impacte plus le LCP.
• Pour les avis (Loox), j'ai activé le lazy loading des images et déplacé l'init de widget après le listening de l'événement DOMContentLoaded.
• Après nettoyage des snippets orphelins et un peu de minification, la page produit est passée sous les 2s sur mobile pour la majorité des utilisateurs.

Si vous voulez, je peux auditer votre boutique (même rapidement) et vous dire quelles apps semblent poser problème et quelles actions concrètes je mettrais en place. En attendant, commencez par cloner votre thème et à tester le waterfall : on voit toujours plus clair après une première mesure.