Comment corriger les scripts qui bloquent le rendu sur Shopify (2026)

Points clés

• Les scripts qui bloquent le rendu empêchent le navigateur d’afficher votre page tant qu’ils ne sont pas chargés.
• Solution : ajoutez defer ou async aux balises <script> non critiques dans theme.liquid.
• La balise {% javascript %} de Shopify dans les sections regroupe et diffère les scripts automatiquement.
• PageSpeed Insights liste les scripts et feuilles de style qui bloquent le rendu.

Pour corriger les scripts qui bloquent le rendu sur Shopify, ajoutez defer (scripts du thème) ou async (scripts d’analyse indépendants) aux balises <script> situées dans le <head> de theme.liquid, et supprimez les scripts d’applications que vous n’utilisez plus.

Lorsqu’un navigateur rencontre une balise <script> dans votre HTML, il s’arrête, télécharge le script, l’exécute, puis reprend la construction de la page. Si ce script se trouve dans votre <head>, la page entière est figée pendant son téléchargement. Sur une connexion mobile lente, cette pause est visible — un écran blanc apparaît à la place de votre boutique.

C’est ce qu’on appelle le « blocage de l’analyseur » (parser blocking) ou « blocage du rendu » (render blocking), et c’est l’un des problèmes de performance les plus importants à résoudre 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 dans les fichiers de section en utilisant les balises {% javascript %} plutôt que dans les scripts globaux de theme.liquid.

{% javascript %}
  // Ce JavaScript est :
  // 1. Automatiquement regroupé avec le JS des autres sections
  // 2. Différé automatiquement par Shopify
  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. Cela permet de garder le code de la section autonome.

Corriger le blocage du rendu lié à GTM

L’extrait d’installation de Google Tag Manager 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 (sans src), donc async/defer ne s’appliquent pas de la même manière. L’extrait GTM est conçu pour être petit et rapide — le véritable problème de performance vient des balises à l’intérieur de votre conteneur GTM.

Dans GTM, configurez toutes les balises pour qu’elles se déclenchent sur “Window Loaded” ou “DOM Ready” plutôt que sur “Page View”, à moins qu’elles n’aient réellement besoin de se déclencher avant le rendu de la page. Cela déplace l’exécution des balises après que la page soit visible.

Pour le reste de la checklist de vitesse, consultez comment accélérer un thème Shopify.

Identifier les scripts qui bloquent le rendu

PageSpeed Insights : Testez l’URL de votre boutique sur pagespeed.web.dev. PageSpeed Insights signale ces requêtes comme bloquant le rendu et liste chaque script et feuille de style par URL.

Chrome DevTools — Onglet Performance : Enregistrez le chargement d’une page. Dans le graphique en flammes (flame chart), cherchez les événements Parse HTML interrompus par des événements Evaluate Script au début de la chronologie.

Shopify Theme Inspector : Montre quels modèles Liquid sont les plus lents à s’afficher. Pour les blocages liés 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