Le mythe « supprimez des applications »
Cherchez « comment améliorer le score de vitesse Shopify » et vous trouverez le même conseil partout : supprimez des applications. C'est la réponse paresseuse à un problème nuancé — et elle coûte de l'argent réel aux marchands.
C'est un mauvais conseil : les applications génèrent du chiffre d'affaires. Les avis apportent preuve sociale et conversions, l'upsell augmente le panier moyen, la capture d'emails développe votre liste et l'analytics montre ce qui fonctionne. Les supprimer pour une métrique de vanité sacrifie ces gains.
Les marchands qui atteignent réellement des scores de 90+ avec de vraies boutiques fonctionnelles n'y arrivent pas en supprimant des applications. Ils y arrivent en optimisant comment ces applications se chargent. C'est une approche fondamentalement différente — et c'est ce que nous allons couvrir ici.
Nous avons travaillé avec des boutiques faisant tourner 15-25 applications qui obtiennent 85-95 sur desktop et 70-85 sur mobile. Le schéma est toujours le même : les applications elles-mêmes ne sont pas le problème. C'est la façon dont leurs scripts se chargent.
Mise en garde importante : « Ne supprimez pas d'applications » ne signifie pas « gardez tout ». Si vous avez 3 applications d'avis différentes ou un outil de popup installé une fois et jamais configuré, ceux-là doivent partir. Le point essentiel : ne sacrifiez pas des fonctionnalités qui génèrent du chiffre d'affaires simplement parce qu'un test de vitesse vous l'a demandé. Pour bien comprendre le fonctionnement des scores, lisez notre guide sur ce qu'est un bon score de vitesse Shopify.
Ce qui ralentit vraiment votre score de vitesse Shopify
Votre score de vitesse Shopify est calculé avec Google Lighthouse, qui mesure six métriques. Comprendre lesquelles sont réellement affectées par les applications vous dit exactement où concentrer vos efforts :
| Métrique | Poids | Impact des applications | Correctif |
|---|---|---|---|
| Total Blocking Time (TBT) | 30% | Très élevé | Différer les scripts des applications |
| Largest Contentful Paint (LCP) | 25% | Élevé | CSS critique en inline, optimiser l'image hero |
| Speed Index | 10% | Élevé | Différer les scripts + CSS en inline |
| Cumulative Layout Shift (CLS) | 25% | Moyen | Réserver l'espace pour les éléments dynamiques |
| First Contentful Paint (FCP) | 10% | Moyen | Supprimer les ressources bloquant le rendu |
Vous voyez le schéma ? 55 % de votre score (TBT + LCP) est directement contrôlé par la façon dont le JavaScript et le CSS se chargent. Les applications sont la plus grande source de JavaScript sur la plupart des boutiques Shopify. Mais vous n'avez pas besoin de les supprimer — vous devez juste changer quand et comment leur code se charge.
Quand un navigateur rencontre une balise <script> sans defer ni async, il arrête tout — il arrête d'analyser le HTML, il arrête d'afficher des pixels — jusqu'à ce que ce script soit téléchargé et exécuté. Un seul script d'application d'avis de 200 Ko chargé de façon synchrone dans theme.liquid peut ajouter 800 ms à votre TBT sur une connexion mobile bridée.
La solution n'est pas de supprimer l'application d'avis. C'est de faire en sorte que ce script se charge après le rendu de la page. C'est ce que fait le report des scripts — et c'est le plus grand levier pour améliorer votre score de vitesse Shopify. Pour approfondir le sujet, consultez notre guide pour corriger les ressources bloquant le rendu sur Shopify.
La solution en un clic : Thunder Page Speed Optimizer
Avant de plonger dans les stratégies manuelles, voici le chemin le plus rapide vers 90+ : laissez Thunder s'en charger automatiquement. Chaque stratégie que nous couvrons ci-dessous — report des scripts, CSS critique, optimisation des images, chargement des polices — Thunder la réalise en une seule installation.
Ce que Thunder fait automatiquement :
Diffère tous les scripts bloquant le rendu
Chaque script d'application se charge après l'affichage — aucune modification manuelle du code requise
Intègre le CSS critique en inline
Extrait les styles au-dessus de la ligne de flottaison et les intègre pour un rendu instantané
Optimise le chargement des images
Charge en différé les images hors écran, priorise l'image hero pour un LCP plus rapide
Corrige le chargement des polices
Précharge les polices critiques et ajoute automatiquement font-display: swap
Amélioration moyenne : +27 points (avec toutes les applications installées)
C'est 27 points sans supprimer une seule application. La plupart des boutiques passent de 40-60 à 70-90 sur mobile, et de 60-80 à 90+ sur desktop. Testez le score actuel de votre boutique pour connaître votre point de départ.
Plan gratuit disponible · Aucune carte bancaire requise · Installation en 30 secondes · Compatible avec toutes les applications et tous les thèmes
Stratégie 1 : différer les scripts bloquant le rendu
C'est l'optimisation au plus fort impact que vous puissiez faire. Les scripts bloquant le rendu représentent 30-50 % des pertes de score de vitesse de la plupart des boutiques Shopify. Voici pourquoi ils sont si dommageables et comment les corriger.
Le problème
Quand une application s'installe sur Shopify, elle ajoute généralement une balise <script src="..."> à votre fichier theme.liquid. Sans attributs defer ou async explicites, les navigateurs interprètent cela comme « arrête tout et charge ceci d'abord ». Multipliez cela par 10-15 applications, et vous obtenez un embouteillage de scripts essayant tous de se charger avant que votre page ne puisse afficher son premier pixel.
Le correctif manuel
Avant (bloquant le rendu) :
<script src="https://app-cdn.example.com/widget.js"></script> Après (différé) :
<script src="https://app-cdn.example.com/widget.js" defer></script>
Ouvrez l'éditeur de code de votre thème, accédez à theme.liquid et ajoutez defer à chaque balise de script tiers. Pour les scripts inline (qui ne peuvent pas utiliser defer), enveloppez-les dans un écouteur d'événement DOMContentLoaded ou utilisez setTimeout pour retarder l'exécution de 2-3 secondes.
⚠️ Attention : Ajouter defer au mauvais script peut casser le paiement, les analytics Shopify ou certains widgets synchrones. Testez sur un thème dupliqué avant la production. De nombreux marchands choisissent Thunder, qui diffère les scripts sûrs et gère les cas limites.
Impact attendu : amélioration de 15-30 points sur mobile, 10-20 sur desktop. Ce seul changement fait souvent passer les boutiques des 50 aux 70-80.
Stratégie 2 : intégrer le CSS critique en inline
Les fichiers CSS bloquent aussi le rendu par défaut. Votre navigateur n'affichera pas un seul pixel tant que tout le CSS du <head> n'aura pas été téléchargé et analysé. Sur la plupart des thèmes Shopify, cela représente 200-500 Ko de CSS — dont la majeure partie stylise des éléments sous la ligne de flottaison, voire sur d'autres pages.
Le correctif manuel
- Extraire le CSS critique : utilisez un outil comme Critical pour identifier quelles règles CSS sont nécessaires au contenu au-dessus de la ligne de flottaison sur votre page d'accueil.
- L'intégrer en inline : placez ces règles dans une balise
<style>dans votre<head>. - Différer le reste : chargez votre fichier CSS complet de façon asynchrone avec
<link rel="preload" href="style.css" as="style">et une solution de repli. - Répéter pour chaque template : les pages produit, les pages de collection et votre page d'accueil ont chacune un contenu au-dessus de la ligne de flottaison différent. Chacune a besoin de son propre CSS critique.
C'est techniquement complexe et lourd à maintenir. Chaque mise à jour de thème peut changer la structure de votre CSS et exiger une nouvelle extraction. C'est l'une des optimisations manuelles les plus chronophages — et l'une de celles que Thunder automatise complètement. Consultez notre page fonctionnalités pour voir comment cela fonctionne.
Impact attendu : amélioration de 5-15 points, principalement sur le FCP et le LCP.
Stratégie 3 : optimiser correctement les images
Les images sont les ressources les plus lourdes de la plupart des boutiques Shopify. Une seule bannière hero non optimisée peut peser plus que tous vos scripts d'applications réunis. Bonne nouvelle : l'optimisation des images est simple et à fort impact.
Gains rapides
Image hero sous 200 Ko : votre élément LCP est généralement la bannière hero ou la première image produit. Compressez-la au format WebP à 80 % de qualité. Utilisez le filtre image_url de Shopify avec une largeur précise : {{ image | image_url: width: 1200 }}
Dimensions explicites : incluez toujours les attributs width et height sur les balises <img>. Cela évite le CLS (décalages de mise en page) pendant le chargement des images, qui vaut 25 % de votre score.
Précharger l'image hero : ajoutez <link rel="preload" as="image" href="hero.webp"> dans votre <head> pour dire au navigateur de commencer à télécharger votre image LCP avant de la découvrir dans le HTML.
Charger tout le reste en différé : chaque image sous la ligne de flottaison devrait avoir loading="lazy". Lisez notre guide sur le lazy loading sur Shopify pour la configuration complète.
Impact attendu : 5-20 points selon l'état actuel de vos images. Les boutiques avec des images hero non compressées de 2 Mo verront des améliorations spectaculaires.
Stratégie 4 : corriger le chargement des polices
Les polices sont des tueurs de vitesse sournois. Chaque graisse de police est un fichier séparé (40-100 Ko chacun). Une boutique Shopify typique charge 4-8 fichiers de polices, ajoutant 200-600 Ko au chargement initial de la page. Sans font-display: swap, les navigateurs affichent du texte invisible jusqu'à la fin du chargement des polices — ce qui ruine votre score FCP.
Le correctif manuel
Limiter les graisses de police : utilisez au maximum 2 familles de polices avec 2 graisses chacune (normale + gras). Soit 4 fichiers maximum.
Ajouter font-display: swap : assurez-vous que toutes les déclarations @font-face incluent font-display: swap pour que le texte s'affiche immédiatement dans une police de repli pendant le chargement des polices personnalisées.
Précharger les polices critiques : ajoutez <link rel="preload" as="font" type="font/woff2" href="..." crossorigin> pour les 1-2 polices utilisées dans votre contenu au-dessus de la ligne de flottaison.
Auto-héberger plutôt que Google Fonts : télécharger les polices et les servir depuis le CDN de Shopify élimine une résolution DNS + une connexion aux serveurs de Google.
Impact attendu : 3-10 points, principalement sur le FCP et le LCP.
Stratégie 5 : tout charger en différé sous la ligne de flottaison
Au-delà des images, vous pouvez charger en différé des sections entières de votre page. Les widgets d'applications dans le pied de page, les sections d'avis sous les descriptions produit et les flux Instagram tout en bas — rien de tout cela n'a besoin de se charger avant que le client ne voie la page.
Techniques avancées de chargement différé
Intersection Observer : utilisez l'API Intersection Observer pour détecter quand une section entre dans le champ de vision, puis charger ses scripts associés. Cela fonctionne pour les widgets d'avis, les widgets de chat et les popups de preuve sociale.
Déclencheurs à l'interaction : certains scripts n'ont besoin de se charger que lorsque l'utilisateur interagit. Un widget de chat peut se charger au premier mouvement de souris. Un popup d'upsell peut se charger quand l'utilisateur ajoute au panier. Ce schéma « chargement à l'interaction » maintient le poids initial de la page au minimum.
Écrans squelettes : affichez un contenu de remplacement léger pendant le chargement des sections lourdes. Cela améliore la performance perçue et maintient un CLS bas, car la mise en page ne bouge pas quand le vrai contenu arrive.
Impact attendu : 5-15 points sur mobile. Varie selon le nombre de scripts sous la ligne de flottaison que vous pouvez différer.
Stratégie 6 : auditer la qualité des applications, pas la quantité
Au lieu de compter combien d'applications vous avez, auditez la façon dont chacune se charge. Certaines applications sont magnifiquement optimisées — scripts minuscules, chargement différé, CSS minimal. D'autres déversent 500 Ko de JavaScript non minifié de façon synchrone dans votre thème. Connaître la différence est essentiel.
Comment auditer l'impact de chaque application sur la vitesse
- Ouvrez Chrome DevTools → onglet Network sur votre boutique
- Désactivez chaque application une par une (désinstallez temporairement ou utilisez l'interrupteur de désactivation de l'application s'il existe)
- Relancez PageSpeed Insights après chaque changement (lancez 3 fois, prenez la moyenne)
- Notez l'écart de score pour chaque application — vous savez maintenant exactement quelles applications coûtent le plus de points
- Pour les applications coûteuses, cherchez des alternatives plus légères qui font la même chose avec moins de code
Nous avons vu des cas où une seule application d'avis coûtait 20 points alors que l'application d'avis d'un concurrent avec les mêmes fonctionnalités n'en coûtait que 3. La fonctionnalité est identique — la qualité du code ne l'est pas. Consultez notre guide sur les scripts tiers pour en savoir plus sur l'identification des scripts lourds.
Vous ne voulez pas auditer manuellement ? Utilisez le Thunder Shopify Analyzer pour voir exactement quels scripts se chargent sur votre boutique, leur taille et lesquels bloquent le rendu. Il vous donne un rapport actionnable en quelques secondes.
Quel score de vitesse Shopify devriez-vous réellement viser ?
Soyons réalistes. Voici ce que les boutiques Shopify bien optimisées avec de vraies applications obtiennent réellement :
| Profil de boutique | Desktop typique | Mobile typique |
|---|---|---|
| Boutique minimale (3-5 applications, thème léger) | 95-100 | 85-95 |
| Boutique standard (10-15 applications, optimisée) | 90-98 | 70-85 |
| Boutique riche en fonctionnalités (15-25 applications, optimisée) | 85-95 | 60-80 |
| Boutique enterprise (25+ applications, fonctionnalités lourdes) | 75-90 | 50-70 |
Un score mobile de 75-85 avec 15 applications installées est excellent. Cela signifie que vos Core Web Vitals sont au vert et que votre boutique se charge vite pour les vrais utilisateurs. Ne courez pas après un 100 parfait — cela exige de supprimer des fonctionnalités qui rendent votre boutique rentable.
Ce qui compte plus que le score de laboratoire, ce sont vos données de terrain Core Web Vitals — la performance réelle vécue par vos vrais visiteurs. Vérifiez-les sur PageSpeed Insights dans la section « Découvrez ce que vivent vos utilisateurs réels ». Si ces métriques sont vertes, votre boutique est rapide — quel que soit le score de laboratoire.
Pour plus de contexte sur la signification de ces chiffres, lisez notre analyse approfondie score de vitesse Shopify vs Google PageSpeed et la relation entre vitesse et conversions.
Questions fréquentes
Puis-je vraiment obtenir un score de vitesse Shopify de 90+ sans supprimer d'applications ?
Oui — mais cela dépend des applications et de la façon dont elles se chargent. La clé n'est pas de supprimer des applications, mais d'optimiser le chargement de leurs scripts. En différant le JavaScript bloquant le rendu, en intégrant le CSS critique en inline et en chargeant en différé les ressources non essentielles, la plupart des boutiques peuvent atteindre 90+ avec 10-15 applications installées. Thunder Page Speed Optimizer automatise l'ensemble de ce processus.
Combien d'applications est-ce trop pour la vitesse de Shopify ?
Il n'y a pas de chiffre magique. Une boutique avec 20 applications bien codées peut surpasser une boutique avec 5 applications mal codées. Ce qui compte, c'est la façon dont chaque application charge ses scripts. Les applications qui injectent du JavaScript synchrone dans votre theme.liquid ou chargent de gros fichiers CSS au-dessus de la ligne de flottaison sont les vrais tueurs de vitesse. Utilisez l'onglet Network de Chrome DevTools pour identifier les applications qui pèsent le plus.
Thunder fonctionne-t-il avec toutes les applications Shopify ?
Thunder est compatible avec toutes les applications et tous les thèmes Shopify. Il agit au niveau du chargement dans le navigateur — en différant les scripts, en intégrant le CSS critique en inline et en optimisant l'ordre de chargement des ressources. Cela signifie qu'il optimise la façon dont les ressources de n'importe quelle application se chargent, sans modifier son fonctionnement. Dans les rares cas où une application exige un chargement synchrone (comme les widgets de paiement), Thunder le détecte et n'y touche pas.
Quel score de vitesse Shopify devrais-je viser ?
Pour la plupart des boutiques Shopify, un score de vitesse entre 70 et 90 sur mobile représente une excellente performance. Les scores desktop au-dessus de 90 sont courants. La vraie métrique qui compte, ce sont les données de terrain des Core Web Vitals — si votre LCP est sous 2.5 s, votre INP sous 200 ms et votre CLS sous 0.1 avec de vrais utilisateurs, votre boutique performe bien quel que soit le score de laboratoire.
Pourquoi mon score de vitesse Shopify mobile est-il tellement plus bas que sur desktop ?
Les scores mobiles simulent un téléphone de milieu de gamme sur une connexion 4G lente avec un fort bridage du CPU. Le desktop simule un ordinateur rapide sur une connexion câblée. Ce bridage fait que chaque script non optimisé coûte 3 à 5 fois plus cher sur mobile. C'est pourquoi le report des scripts et l'intégration du CSS critique en inline — que Thunder gère automatiquement — ont un impact plus important sur les scores mobiles.
Optimiser mon score de vitesse va-t-il réellement augmenter mes ventes ?
Les données montrent systématiquement que les boutiques plus rapides convertissent mieux. Les recherches de Google ont montré qu'une amélioration de 1 seconde du temps de chargement mobile peut augmenter les conversions jusqu'à 27 %. Pour Shopify en particulier, les boutiques avec un LCP sous 2,5 secondes affichent en moyenne des taux d'ajout au panier supérieurs de 15 à 20 % par rapport aux boutiques qui se chargent en plus de 4 secondes. La vitesse n'est pas tout, mais elle supprime les frictions du parcours d'achat.
Quelle est la meilleure stratégie pour un score mobile Shopify de 90 en 2026 ?
La stratégie la plus efficace pour atteindre un score mobile de 90+ en 2026 se concentre sur trois axes : (1) Différer tout le JavaScript non critique — cela seul peut faire gagner 15 à 25 points sur mobile, car Lighthouse applique un fort bridage du CPU. (2) Intégrer le CSS critique en inline et différer le reste — cela élimine les feuilles de style bloquant le rendu. (3) Optimiser le LCP en définissant fetchpriority='high' sur votre image hero et en la préchargeant. Thunder Page Speed Optimizer gère les trois automatiquement, avec une amélioration moyenne de plus de 27 points, spécifiquement sur mobile.