Points clés
- Les scripts qui bloquent le rendu (render-blocking) empêchent le navigateur d’afficher rapidement votre page — chaque milliseconde vous coûte des conversions.
- Solution : ajoutez
deferouasyncaux balises<script>non critiques dans theme.liquid.- L’utilisation de la balise
{% javascript %}de Shopify dans les sections groupe et diffère (defer) automatiquement les scripts.- PageSpeed Insights et Shopify Theme Inspector permettent tous deux d’identifier les ressources bloquant le rendu.
Lorsqu’un navigateur rencontre une balise <script> dans votre code HTML, il s’arrête, télécharge le script, l’exécute, puis continue la construction de la page. Si ce script se trouve dans votre <head>, toute votre page 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 « parser blocking » ou « render blocking » (blocage du rendu), 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
Dois-je ajouter async ou defer au script Google Tag Manager ?
L’installation standard de GTM est un script en ligne (sans src) — async/defer ne s’appliquent pas directement. Le snippet de base de GTM est petit et court. Le véritable problème de performance vient des balises à l’intérieur de votre conteneur GTM. Réglez les déclencheurs de vos balises sur “Window Loaded” ou “DOM Ready” plutôt que sur “Page View” afin qu’ils se déclenchent après le rendu critique, et non avant.
Pourquoi le fait d’utiliser defer sur mes scripts n’améliore-t-il pas mon score PageSpeed ?
Trois raisons courantes : (1) le script que vous avez différé ne bloquait pas vraiment le rendu (déjà asynchrone, 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 pas seulement par son téléchargement — defer ne résout pas le problème d’une exécution lente, mais seulement le blocage du téléchargement.
Puis-je déplacer les scripts en bas de la page au lieu d’utiliser defer ?
Oui — placer les scripts avant </body> permettait historiquement d’obtenir un comportement non bloquant similaire. Les bonnes pratiques modernes privilégient defer car il préserve l’ordre d’exécution et fonctionne peu importe où la balise est placée dans le HTML. Les deux fonctionnent ; defer est plus propre pour la maintenance.
Le fait d’utiliser defer sur les scripts va-t-il casser les applications qui dépendent de jQuery ou d’autres librairies ?
C’est possible. Les scripts qui dépendent d’une librairie déjà chargée échoueront si la librairie n’a pas fini de s’exécuter. Solution : différez les scripts par ordre de dépendance. Les scripts avec defer s’exécutent dans l’ordre du document — placez la balise de la librairie en premier. Les scripts avec async peuvent s’exécuter dans n’importe quel ordre ; vérifiez les dépendances avant d’ajouter async.
Comment trouver les scripts qui bloquent le rendu et que je n’ai pas ajoutés moi-même ?
PageSpeed Insights → Diagnostics → “Éliminer les ressources qui bloquent le rendu” liste chaque ressource bloquante par URL. Les scripts que vous n’avez pas ajoutés proviennent généralement des 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 suppression d’applications est la solution la plus efficace pour améliorer les performances. Pour conserver la fonctionnalité sans le poids du script de l’application, décrivez ce que fait l’application à Fudge et obtenez une version native directement intégrée à votre thème.
Voir aussi : Minifier le CSS et le JavaScript sur Shopify.
Voir aussi : Supprimer le code inutilisé sur Shopify.