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 un élément qui bloque le rendu : le navigateur a besoin du CSS avant de pouvoir afficher quoi que ce soit. Mais vous pouvez en minimiser l’impact :
Le “Critical CSS” en “inline” : Déplacez le CSS nécessaire pour afficher le contenu au-dessus de la ligne de flottaison (above-the-fold) directement dans la balise <head>. Chargez le reste de votre CSS de manière asynchrone en utilisant <link rel="preload"> avec onload.
Supprimer le CSS inutilisé : Moins il y a de règles CSS = plus le temps d’analyse est rapide.
Éviter le @import CSS dans les feuilles de style : Cela crée des requêtes bloquantes en cascade.
Pour la plupart des boutiques Shopify, les gains liés à l’optimisation du CSS sont moins importants que la correction du blocage dû au JavaScript. Concentrez-vous d’abord sur le JavaScript.
Sur le même sujet : Minifier le CSS et le JavaScript sur Shopify.
Sur le même sujet : Supprimer le code inutilisé sur Shopify.