À retenir
- Les scripts qui bloquent le rendu retardent l’affichage de votre page par le navigateur — chaque milliseconde coûte des conversions.
- Solution : ajoutez
deferouasyncaux balises<script>non critiques dans theme.liquid.- La balise
{% javascript %}de Shopify dans les sections regroupe et diffère automatiquement les scripts.- PageSpeed Insights et Shopify Theme Inspector identifient tous les deux les ressources qui bloquent le rendu.
Lorsqu’un navigateur rencontre une balise <script> dans votre HTML, il s’arrête, télécharge le script, l’exécute, puis continue de construire la page. Si ce script se trouve dans votre <head>, votre page entière est figée pendant le téléchargement du script. Sur une connexion mobile lente, cette pause est visible : un écran blanc à la place de votre boutique.
C’est ce qu’on appelle le blocage de l’analyseur (“parser blocking”) ou le blocage du rendu (“render blocking”), et c’est l’un des problèmes de performance les plus importants à corriger sur Shopify.
Qu’est-ce qui cause les scripts qui bloquent le rendu sur Shopify ?
Les balises script dans <head> sans async ou defer. C’est la cause la plus fréquente. Les scripts ajoutés par des applications ou des personnalisations incluent souvent un simple <script src="..."> sans aucun de ces attributs.
Les gros fichiers JavaScript du thème chargés de manière synchrone. Certains anciens thèmes chargent tout leur JavaScript dans <head>, ce qui bloque l’affichage (paint).
Les scripts d’analytics et de marketing tiers. Google Tag Manager, le Pixel Facebook et d’autres scripts similaires sont fréquemment placés dans <head> parce que leur documentation le recommande — mais ils devraient tout de même utiliser async.
La différence entre async et defer
Tous deux évitent le blocage du rendu, mais ils se comportent différemment :
async : Le script se télécharge en parallèle pendant l’analyse (parsing) du HTML. Il s’exécute dès qu’il a fini de se télécharger — ce qui peut potentiellement interrompre l’analyse HTML. À utiliser pour les scripts indépendants qui n’ont pas besoin que le DOM soit prêt (analytics, pixels).
defer : Le script se télécharge en parallèle pendant l’analyse du HTML. Il s’exécute après que le code HTML soit entièrement analysé, dans l’ordre d’apparition du document. À utiliser pour les scripts qui interagissent avec le DOM (fonctionnalités du thème ou du produit).
Aucun attribut (par défaut) : Le script bloque entièrement l’analyse du HTML pendant qu’il se télécharge et s’exécute. À éviter pour tout script non critique situé dans <head>.
Comment ajouter defer ou async aux scripts sur Shopify
Étape 1 - Dupliquez votre thème.
Étape 2 - Ouvrez theme.liquid dans l’éditeur de code.
Étape 3 - Trouvez les balises <script> dans la section <head>. Elles ressemblent à ceci :
<script src="https://example.com/script.js"></script>Étape 4 - Ajoutez l’attribut approprié :
<!-- Pour les scripts d'analytics/pixels : -->
<script src="https://analytics.example.com/script.js" async></script>
<!-- Pour les scripts de fonctionnalité du thème : -->
<script src="{{ 'theme.js' | asset_url }}" defer></script>Important : N’ajoutez pas aveuglément async à tous les scripts. Si un Script B dépend d’un Script A, rendre le Script A async peut faire planter le Script B si ce dernier se charge en premier.
Utiliser les blocs {% javascript %} de Shopify dans les sections
La solution la plus propre pour les fonctionnalités du thème : placez le JavaScript à l’intérieur des fichiers de sections en utilisant les balises {% javascript %} plutôt que dans les scripts globaux du fichier theme.liquid.
{% javascript %}
// Ce JavaScript est :
// 1. Automatiquement regroupé (bundled) avec le JS des autres sections
// 2. Différé (deferred) automatiquement par Shopify
// 3. Uniquement chargé lorsque la section est utilisée
document.querySelector('.my-section').addEventListener('click', function() {
// comportement spécifique à la section
});
{% endjavascript %}Shopify compile tous les blocs {% javascript %} des sections en un seul bundle optimisé (shopify-section-*.js) qui se charge de manière différée (defer). C’est l’architecture que Shopify recommande pour le développement de thèmes.
Corriger le blocage du rendu lié à GTM
Le snippet d’installation de Google Tag Manager (GTM) place une balise <script> dans le <head>. L’installation standard ressemble à ceci :
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXX');</script>Il s’agit déjà d’un script en ligne (inline, sans attribut src), donc async/defer ne s’y appliquent pas de la même façon. Le snippet GTM est conçu pour être petit et rapide — le vrai problème de performance vient des balises à l’intérieur même de votre conteneur GTM.
Sur le même sujet : Accélérer un thème Shopify.
Dans GTM, configurez toutes vos balises pour qu’elles se déclenchent sur “Window Loaded” ou “DOM Ready” plutôt que sur “Page View”, sauf si elles doivent vraiment s’exécuter avant l’affichage de la page. Cela déplace l’exécution des balises après que la page soit visible.
Identifier les scripts qui bloquent le rendu
PageSpeed Insights : Analysez l’URL de votre boutique sur pagespeed.web.dev. Dans la section “Opportunités” (Opportunities), cherchez “Éliminer les ressources bloquant le rendu” (Eliminate render-blocking resources). Vous y trouverez la liste des scripts et feuilles de style spécifiques qui causent le problème.
Chrome DevTools — Onglet Performance : Enregistrez le chargement d’une page. Dans le diagramme (flame chart), cherchez les événements Parse HTML qui sont interrompus par des événements Evaluate Script au début de la timeline.
Shopify Theme Inspector : Montre quels templates Liquid sont les plus lents à s’afficher. Pour les blocages dus aux scripts, utilisez plutôt PageSpeed Insights.
Qu’en est-il du CSS bloquant, le rendu ?
Le CSS est par nature bloquant pour le rendu — le navigateur a besoin de CSS avant de pouvoir afficher quoi que ce soit. Mais vous pouvez en minimiser l’impact :
CSS critique en ligne : Déplacez le CSS nécessaire pour afficher le contenu au-dessus de la ligne de flottaison directement dans le <head>. Chargez le reste de votre CSS de manière asynchrone en utilisant <link rel="preload"> avec onload.
Supprimez le CSS inutilisé : Moins de règles CSS = temps d’analyse plus rapide.
Évitez les @import CSS dans les feuilles de style : Ceux-ci créent des requêtes bloquantes en cascade.
Pour la plupart des boutiques Shopify, les gains liés à l’optimisation CSS sont mineurs par rapport à la résolution des blocages liés au JavaScript. Concentrez-vous d’abord sur le JavaScript.
FAQ
L'installation standard de GTM est un script inline (sans src) — async / defer ne s'appliquent pas directement. Le snippet de démarrage de GTM est petit et rapide. Le vrai problème de performance se trouve dans les balises à l'intérieur de votre conteneur GTM. Réglez les déclencheurs de balises sur "Window Loaded" ou "DOM Ready" plutôt que sur "Page View" pour qu'elles se déclenchent après le rendu critique, et non avant.
Trois raisons courantes : (1) le script que vous avez différé ne bloquait pas réellement le rendu (déjà en async, ou en dessous de la ligne de flottaison), (2) d'autres ressources bloquant le rendu (CSS, polices) sont toujours le goulot d'étranglement, ou (3) le Total Blocking Time (TBT) est dominé par l'exécution du script, et non par son simple téléchargement — defer ne règle pas le problème d'une exécution lente, seulement le blocage du téléchargement.
Oui — placer les scripts juste avant </body> permettait historiquement d'obtenir un comportement non bloquant similaire. Les bonnes pratiques modernes privilégient defer car cela préserve l'ordre d'exécution et fonctionne quel que soit l'emplacement de la balise dans le HTML. Les deux fonctionnent ; defer est plus propre pour la maintenabilité.
C'est possible. Les scripts qui dépendent d'une bibliothèque déjà chargée échoueront si l'exécution de cette bibliothèque n'est pas terminée. La solution : différez les scripts selon l'ordre de leurs dépendances. Les scripts avec defer s'exécutent dans l'ordre du document — mettez la balise de la bibliothèque en premier. Les scripts avec async peuvent s'exécuter dans n'importe quel ordre ; vérifiez les dépendances avant d'ajouter async.
PageSpeed Insights → Diagnostics → "Éliminez les ressources qui bloquent le rendu" liste chaque ressource bloquante par son URL. Les scripts que vous n'avez pas ajoutés proviennent généralement d'applications installées. Vérifiez Paramètres → Applications pour identifier quelle application charge chaque script bloquant — et désactivez les applications que vous n'utilisez plus. La désinstallation d'applications est l'optimisation de performance qui a le plus d'impact. Pour conserver une fonctionnalité sans le poids du script de l'application, décrivez ce que fait l'application à Fudge pour intégrer une version native à votre thème.
Sur le même sujet : Minifier CSS et JavaScript sur Shopify.
Sur le même sujet : Supprimer le code inutilisé sur Shopify.