Guide de vitesse · Mis à jour le 10 juin 2026

Éliminer les ressources bloquant le rendu sur Shopify : 5 correctifs éprouvés (2026)

Comment corriger les ressources bloquant le rendu sur Shopify

Les ressources bloquant le rendu sont des fichiers CSS, JavaScript et de polices qui empêchent votre boutique Shopify d'afficher du contenu tant qu'ils ne sont pas chargés. Elles ajoutent généralement 1 à 3 secondes à votre temps de chargement — et c'est l'un des avertissements PageSpeed les plus fréquents que voient les marchands Shopify.

La bonne nouvelle ? Vous pouvez corriger cela en moins d'une minute — ou le faire vous-même avec du code. Commencez par lancer un test de vitesse gratuit pour voir combien de ressources bloquantes compte votre boutique.

~12 min de lecture · 3,200 mots · Exemples de code inclus

Que sont les ressources bloquant le rendu ?

Quand votre navigateur charge une page Shopify, il lit le HTML de haut en bas. Lorsqu'il rencontre une balise <script> (sans async ni defer), il arrête le rendu, télécharge le script, l'exécute, et ne continue qu'ensuite. La même chose se produit avec les balises <link rel="stylesheet"> pour le CSS externe — le navigateur n'affiche rien tant que le CSS n'est pas téléchargé et analysé.

C'est pourquoi vos visiteurs voient une page blanche vide (ou partiellement chargée) pendant plusieurs secondes, le temps que le navigateur traite ces fichiers en arrière-plan. Le navigateur est littéralement empêché d'afficher du contenu visible.

Trois types de ressources bloquant le rendu sur Shopify

JS

Fichiers JavaScript — scripts de thème, scripts d'applications, trackers d'analytics. Le plus gros coupable sur la plupart des boutiques Shopify. Chaque balise de script sans defer met complètement en pause le rendu.

CSS

Feuilles de style CSS — feuilles de style externes chargées dans le <head>. Le navigateur doit télécharger et analyser tout le CSS avant d'afficher quoi que ce soit.

Police

Polices web — polices personnalisées qui doivent se télécharger avant l'affichage du texte. Sans font-display: swap, le navigateur affiche du texte invisible jusqu'à l'arrivée de la police.

Sur une boutique Shopify typique, l'avertissement « Eliminate render-blocking resources » de PageSpeed Insights représente 1 à 4 secondes de délai. Plus vous avez d'applications installées, pire c'est — chaque application peut ajouter plusieurs scripts bloquant le rendu.

Pourquoi c'est important pour votre boutique

Les ressources bloquant le rendu ne sont pas qu'un problème technique — elles ont un impact direct sur vos revenus :

7%

baisse de conversion par 1 seconde de délai

Source : Google/Deloitte

53%

des visiteurs mobiles partent si une page dépasse 3 secondes

Source : Google

SEO

Les Core Web Vitals sont un facteur de classement Google depuis 2021

Source : Google Search Central

Si votre boutique met 5 secondes à afficher du contenu à cause des ressources bloquant le rendu, vous perdez des visiteurs avant même qu'ils ne voient vos produits. Corriger cela est l'une des optimisations de vitesse au meilleur retour sur investissement que vous puissiez faire. Pour un panorama plus large de toutes les techniques d'optimisation, consultez notre guide complet d'optimisation de la vitesse.

🆕 Mise à jour 2026 : l'INP a remplacé le FID comme Core Web Vital

Depuis mars 2024, Google utilise l'INP (Interaction to Next Paint) au lieu du FID pour mesurer la réactivité. Les scripts bloquant le rendu nuisent à l'INP car ils monopolisent le thread principal — rendant les taps, clics et défilements peu réactifs. Corriger les ressources bloquant le rendu améliore désormais deux Core Web Vitals : le LCP (premier affichage plus rapide) et l'INP (interactions plus réactives). Si votre score de vitesse a récemment chuté, les scripts bloquant le rendu en sont probablement un facteur. Lisez notre guide des Core Web Vitals pour la vue d'ensemble.

La solution simple : l'optimisation automatique avec Thunder

Avant de plonger dans les correctifs manuels au niveau du code ci-dessous — il existe un moyen bien plus simple. Thunder Page Speed Optimizer détecte et corrige automatiquement les ressources bloquant le rendu sur votre boutique Shopify, sans aucune modification de code nécessaire.

Ce que Thunder corrige automatiquement :

Report des scripts

Diffère automatiquement les scripts d'applications tierces — même ceux que vous ne pouvez pas contrôler manuellement

Intégration du CSS critique en ligne

Extrait et intègre en ligne le CSS au-dessus de la ligne de flottaison pour que votre page s'affiche instantanément

Optimisation des polices

Ajoute font-display: swap et précharge automatiquement les polices critiques

Cartographie intelligente des dépendances

Comprend quels scripts dépendent les uns des autres — les diffère en toute sécurité sans casser les applications

Minification du CSS

Supprime le CSS inutilisé et compresse le reste pour des fichiers plus légers

Surveillance continue

Suit votre vitesse quotidiennement et vous alerte si de nouvelles applications introduisent des ressources bloquant le rendu

Amélioration moyenne : +27 points PageSpeed

Les utilisateurs de Thunder constatent une amélioration moyenne de 27 points de leur score Google PageSpeed. La plupart des boutiques passent du rouge/orange au vert quelques minutes après l'activation des optimisations.

Corrigez les ressources bloquant le rendu maintenant →

Forfait gratuit disponible · Sans carte bancaire · Installation en 30 secondes · Compatible avec tous les thèmes · Voir tous les forfaits

Pourquoi utiliser une application plutôt que de corriger manuellement ? Les correctifs manuels ci-dessous nécessitent de modifier des fichiers de thème Liquid, de comprendre les dépendances entre scripts, de générer du CSS critique et de tester en profondeur. Une seule erreur peut casser votre checkout ou vos applications. Il faut aussi tout refaire à chaque installation d'application ou mise à jour de thème. Thunder gère tout cela automatiquement et en continu.

Vous préférez le faire vous-même ? Continuez la lecture ↓

Comment identifier les ressources bloquant le rendu sur votre boutique

⚡ Sautez cette étape : Le forfait gratuit de Thunder identifie automatiquement toutes les ressources bloquant le rendu sur votre boutique et vous montre précisément lesquelles la ralentissent — aucun test manuel nécessaire.

Méthode 1 : Google PageSpeed Insights

Rendez-vous sur pagespeed.web.dev, saisissez l'URL de votre boutique et attendez l'analyse. Vous pouvez aussi lancer un test de vitesse gratuit avec notre outil pour un aperçu rapide. Dans les résultats, faites défiler jusqu'à la section « Opportunities » et cherchez « Eliminate render-blocking resources ». Cliquez pour la déplier — vous verrez chaque fichier qui bloque le rendu et le gain de temps estimé.

Méthode 2 : l'onglet Coverage des Chrome DevTools

Ouvrez votre boutique dans Chrome, appuyez sur F12, puis Ctrl+Shift+P (ou Cmd+Shift+P sur Mac) et tapez « Coverage ». Cela montre la part réellement utilisée de chaque fichier CSS et JavaScript pendant le chargement. Les barres rouges = du code inutilisé que le navigateur a téléchargé sans en avoir besoin.

Méthode 3 : la cascade réseau (waterfall)

Dans les Chrome DevTools → onglet Network, rechargez la page et regardez le graphique en cascade. Les fichiers qui se chargent tôt avec de longues barres bloquent le rendu. Concentrez-vous sur les fichiers JavaScript et CSS qui se chargent avant la première image.

💡 Astuce : Testez sur mobile. Basculez les Chrome DevTools en émulation mobile avant d'analyser. Les ressources bloquant le rendu ont un impact bien plus important sur mobile, à cause de processeurs et de connexions plus lents — consultez notre guide d'optimisation de la vitesse mobile Shopify pour en savoir plus.

Correctif manuel : le JavaScript bloquant le rendu

⚠️ Difficulté : intermédiaire à avancée. Modifier le JavaScript du thème nécessite de comprendre les dépendances entre scripts, l'ordre d'exécution et le système de templates Liquid de Shopify. Une erreur peut casser votre checkout, vos applications et votre suivi. Sauvegardez toujours votre thème avant de faire des modifications.

Le JavaScript est le plus gros coupable du blocage de rendu sur la plupart des boutiques Shopify. Voici comment traiter chaque type manuellement :

1. Ajoutez defer aux scripts personnalisés

Si vous avez ajouté des balises de script personnalisées dans vos fichiers de thème (theme.liquid, fichiers de section, etc.), ajoutez l'attribut defer :

<!-- ❌ Before: render-blocking -->
<script src="https://example.com/custom-script.js"></script>

<!-- ✅ After: non-render-blocking -->
<script src="https://example.com/custom-script.js" defer></script>

defer indique au navigateur : « Télécharge ceci en arrière-plan, et exécute-le une fois le HTML entièrement analysé. » Cela préserve l'ordre d'exécution tout en éliminant le comportement bloquant le rendu.

2. Déplacez les scripts en bas de page

Pour les scripts inline (code entre des balises <script>), déplacez-les du <head> vers un emplacement juste avant </body> :

<!-- ❌ Before: in <head>, blocks rendering -->
<head>
  <script>
    // analytics or tracking code
  </script>
</head>

<!-- ✅ After: before </body>, renders first -->
<body>
  <!-- ... page content ... -->
  <script>
    // analytics or tracking code
  </script>
</body>

3. Utilisez async pour les scripts indépendants

Pour les scripts qui ne dépendent pas d'autres scripts (comme des trackers d'analytics autonomes), async télécharge et exécute sans bloquer — mais ne garantit pas l'ordre d'exécution :

<!-- ✅ Good for independent scripts like analytics -->
<script src="https://analytics.example.com/track.js" async></script>

<!-- ✅ Better for scripts with dependencies -->
<script src="https://cdn.example.com/library.js" defer></script>
<script src="https://cdn.example.com/app.js" defer></script>

Quand utiliser lequel : Utilisez defer pour la plupart des scripts — il préserve l'ordre d'exécution. Utilisez async uniquement pour des scripts vraiment indépendants. En cas de doute, utilisez defer.

Correctif manuel : le CSS bloquant le rendu

⚠️ Difficulté : avancée. L'extraction du CSS critique est l'une des optimisations de vitesse les plus difficiles à réussir. Une erreur provoque un Flash of Unstyled Content (FOUC) — votre page apparaît brièvement cassée avant le chargement des styles. C'est pourquoi la plupart des développeurs utilisent des outils automatisés pour cela.

Le CSS bloque intrinsèquement le rendu — le navigateur doit savoir à quoi ressemblent les éléments avant de les afficher. Vous ne pouvez pas simplement différer tout le CSS (la page s'afficherait brièvement sans style). La bonne approche :

1. Intégrez le CSS critique en ligne

Le CSS critique est le minimum de CSS nécessaire pour styliser le contenu au-dessus de la ligne de flottaison. Intégrez-le directement dans le <head> pour que le navigateur affiche instantanément, puis chargez la feuille de style complète en asynchrone :

<head>
  <!-- ✅ Critical CSS inlined for instant rendering -->
  <style>
    /* Only styles for above-the-fold content */
    header {display:flex;align-items:center;height:64px}
    .hero {padding:4rem 1rem;text-align:center}
    .hero h1 {font-size:2.5rem;font-weight:800}
  </style>

  <!-- ✅ Full CSS loaded asynchronously -->
  <link rel="preload" href="{{ "theme.css" | asset_url }}" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ "theme.css" | asset_url }}"></noscript>
</head>

La partie difficile ? Déterminer quel CSS est critique. C'est différent pour chaque page (accueil, collection, produit) et chaque thème. Des outils comme Critical par Addy Osmani peuvent aider, mais ils doivent être exécutés pour chaque template de page et mis à jour à chaque changement de thème.

2. Supprimez le CSS inutilisé

Beaucoup de thèmes Shopify embarquent du CSS pour chaque fonctionnalité possible — méga-menus, accordéons, aperçu rapide — même si vous ne les utilisez pas. Utilisez l'onglet Coverage des Chrome DevTools pour mesurer. Si moins de 50 % est utilisé, il y a une marge d'optimisation importante. Mais supprimer du CSS manuellement risque de casser des fonctionnalités dont vous ignoriez l'existence.

3. Réduisez le CSS externe

Chaque fichier CSS externe (Google Fonts, feuilles de style d'applications, widgets) ajoute une requête bloquante. Hébergez vos polices vous-même, regroupez les petites feuilles de style, et vérifiez quel CSS d'application est réellement nécessaire. Combiner ces correctifs CSS avec un lazy loading correctement configuré garantit que le navigateur ne charge que ce qui est nécessaire pour la zone visible initiale.

Correctif manuel : les polices bloquant le rendu

Les polices web posent deux problèmes : elles bloquent l'affichage du texte (FOIT — Flash of Invisible Text), et les charger depuis des domaines externes ajoute une latence réseau supplémentaire.

1. Utilisez font-display: swap

Affiche immédiatement le texte dans une police de secours, puis bascule vers la police personnalisée une fois prête :

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap; /* ✅ Shows fallback text immediately */
}

2. Préchargez les polices critiques

Commencez à télécharger votre police la plus importante en avance :

<link rel="preload" href="/fonts/your-font.woff2" as="font" 
      type="font/woff2" crossorigin>

Ne préchargez que 1 à 2 polices critiques. En précharger trop gaspille de la bande passante.

3. Hébergez vous-même plutôt que d'utiliser Google Fonts

Charger depuis fonts.googleapis.com nécessite des résolutions DNS supplémentaires. L'auto-hébergement place les polices sur le CDN de Shopify :

  • Téléchargez les polices depuis Google Webfonts Helper
  • Téléversez les fichiers .woff2 dans le dossier Assets de votre thème
  • Mettez à jour le CSS @font-face pour référencer les fichiers locaux
  • Supprimez la balise <link> de Google Fonts

4. Limitez les graisses de police

Chaque graisse (regular, bold, italic) est un téléchargement distinct. La plupart des boutiques n'ont besoin que du regular (400) et du bold (700). Charger 4 à 6 graisses ajoute 200 à 600 Ko inutilement.

Le problème des scripts tiers (pourquoi les correctifs manuels ne suffisent pas)

Voici la vérité qui dérange à propos de tout ce qui précède : les techniques manuelles fonctionnent très bien pour le code que vous contrôlez — mais sur la plupart des boutiques Shopify, les plus gros responsables du blocage de rendu sont des scripts d'applications tierces que vous ne pouvez pas modifier.

Lorsqu'une application Shopify injecte une balise <script> dans votre vitrine, vous ne choisissez pas si elle a defer ou async. C'est le développeur de l'application qui a pris cette décision — et beaucoup n'ajoutent ni l'un ni l'autre, rendant leurs scripts bloquants par défaut.

Une boutique Shopify typique a 5 à 15 applications installées. Même si chacune n'ajoute qu'un seul script bloquant le rendu, cela représente 5 à 15 fichiers que le navigateur doit télécharger et exécuter avant d'afficher le moindre contenu. Nous approfondissons ce sujet dans notre guide sur la gestion des scripts tiers sur Shopify. Et chaque nouvelle application installée peut annuler tout votre travail d'optimisation manuelle.

L'approche manuelle vs Thunder

Correctifs manuels Thunder
Scripts de thème ✅ Peut être corrigé ✅ Automatique
Scripts d'applications tierces ❌ Non maîtrisable ✅ Automatique
CSS critique ⚠️ Difficile à maintenir ✅ Automatique
Optimisation des polices ✅ Peut être corrigé ✅ Automatique
Nouvelle application installée ❌ Tout refaire ✅ S'adapte automatiquement
Mise à jour de thème ❌ Tout refaire ✅ S'adapte automatiquement
Temps nécessaire 2–4 heures 30 secondes
Risque de casser la boutique ⚠️ Moyen à élevé ✅ Retour arrière sécurisé

C'est exactement pour ça que nous avons créé Thunder. Il fonctionne au niveau du thème — en interceptant et en optimisant le chargement de tous les scripts, y compris les scripts tiers que vous ne pouvez pas toucher manuellement. Et il s'adapte automatiquement quand vous ajoutez de nouvelles applications ou mettez à jour votre thème. Les forfaits démarrent à 19.99 $/mois — nettement moins que d'embaucher un développeur pour différer les scripts manuellement. Si vous envisagez aussi un changement de thème, consultez notre guide des thèmes Shopify les plus rapides — combiner un thème rapide avec Thunder vous donne la meilleure base possible.

Comment vérifier vos correctifs

Que vous ayez utilisé Thunder ou corrigé les choses manuellement, voici comment confirmer que les ressources bloquant le rendu sont éliminées :

1

Relancez PageSpeed Insights

L'opportunité « Eliminate render-blocking resources » devrait afficher un gain réduit ou disparaître entièrement. Votre score de performance devrait s'améliorer.

2

Vérifiez le LCP et le TBT

Le LCP devrait diminuer (le contenu s'affiche plus tôt). Le TBT devrait diminuer (moins de scripts bloquent le thread principal).

3

Testez le fonctionnement des applications

Vérifiez que les widgets d'avis, pop-ups, la recherche, le panier et le checkout fonctionnent toujours. Différer des scripts peut causer des problèmes de timing — Thunder gère cela automatiquement, mais les modifications manuelles nécessitent des tests approfondis.

4

Surveillez sur 28 jours

Les données de laboratoire changent immédiatement, mais les métriques d'utilisateurs réels (données CrUX dans Search Console) prennent 28 jours. Continuez à surveiller pour confirmer que les améliorations tiennent.

Mise à jour juin 2026 : quoi corriger en premier

PageSpeed Insights peut lister le CSS, le JavaScript, les polices et les fichiers tiers sous le même avertissement « Eliminate render-blocking resources ». La bonne réponse n'est pas « tout corriger », mais le bon ordre de priorité.

  1. Corrigez d'abord le JavaScript des applications si les URLs de fichiers incluent des applications d'avis, de chat, de pop-ups, d'analytics ou des page builders. Ces scripts bloquent le premier affichage et se disputent ensuite le temps du thread principal.
  2. Corrigez ensuite le CSS critique si la feuille de style principale de votre thème apparaît en haut de l'avertissement. Intégrez en ligne uniquement le CSS au-dessus de la ligne de flottaison et chargez le reste en asynchrone.
  3. Corrigez les polices en dernier en préchargeant le fichier de police principal et en utilisant font-display: swap. Les polices dépassent rarement les scripts d'applications en gain total, mais elles peuvent éviter le texte invisible.

Thunder automatise les deux premières étapes pour les boutiques Shopify : il diffère les scripts d'applications non critiques, préserve l'ordre des scripts et intègre le CSS critique en ligne sans modifier votre thème manuellement. Pour le guide complet, associez cet article à notre guide d'optimisation JavaScript pour Shopify et notre guide d'optimisation CSS pour Shopify.

Ressources bloquant le rendu sur Shopify : les chiffres 2026

D'après les données de plus de 2,000 boutiques Shopify analysées par Thunder au T1 2026, voici l'état actuel des ressources bloquant le rendu sur la plateforme :

17

Nombre moyen de ressources bloquant le rendu par boutique (contre 14 en 2025 — les applications continuent de se multiplier)

2.3s

Délai moyen causé par les ressources bloquant le rendu sur mobile

68%

Des ressources bloquant le rendu proviennent d'applications tierces, pas du thème lui-même

91%

Des boutiques Shopify ont au moins un avertissement « Eliminate render-blocking resources » dans PageSpeed Insights

La tendance est claire : à mesure que les marchands installent plus d'applications pour rester compétitifs (la boutique Shopify moyenne compte désormais plus de 10 applications), les ressources bloquant le rendu continuent de se multiplier. Les correctifs manuels fonctionnent temporairement, mais chaque nouvelle application réintroduit des scripts bloquants. Une solution automatisée comme l'optimisation continue de Thunder détecte les nouvelles ressources bloquantes dès leur apparition.

Pour en savoir plus sur l'impact de ces ressources bloquantes sur vos Core Web Vitals, en particulier le LCP et l'INP, consultez notre guide dédié. Et pour voir précisément combien de ressources bloquant le rendu compte votre boutique, lancez un test de vitesse gratuit.

Questions fréquentes

Que sont les ressources bloquant le rendu sur Shopify ?

Les ressources bloquant le rendu sont des fichiers CSS, des fichiers JavaScript et des polices qui empêchent le navigateur d'afficher le contenu de votre page tant qu'ils n'ont pas été entièrement téléchargés et traités. Sur Shopify, les ressources bloquant le rendu les plus courantes sont les scripts d'applications tierces, le JavaScript du thème, les feuilles de style CSS externes et les polices web. Elles obligent le visiteur à fixer une page vide ou partiellement chargée pendant que le navigateur les traite.

Comment trouver les ressources bloquant le rendu sur ma boutique Shopify ?

Le plus simple est d'installer Thunder Page Speed Optimizer — il scanne automatiquement votre boutique et identifie chaque ressource bloquant le rendu, en vous montrant précisément quels scripts et feuilles de style ralentissent votre boutique. Pour une vérification manuelle, passez l'URL de votre boutique dans Google PageSpeed Insights (pagespeed.web.dev) et cherchez l'opportunité « Eliminate render-blocking resources ».

Puis-je corriger les ressources bloquant le rendu sans coder ?

Oui. Thunder Page Speed Optimizer corrige automatiquement les ressources bloquant le rendu — aucune modification de code nécessaire. Il diffère les scripts tiers, intègre le CSS critique en ligne et optimise le chargement des polices en un clic. L'approche manuelle nécessite de modifier des fichiers de thème Liquid, ce qui risque de casser votre boutique en cas d'erreur.

Puis-je ajouter defer ou async aux scripts des applications Shopify ?

Pas directement — les scripts d'applications tierces sont injectés par les applications elles-mêmes, et vous ne contrôlez pas leurs balises de script. Il faudrait contacter chaque développeur d'application pour lui demander d'ajouter defer/async, ce qui se produit rarement rapidement. Thunder résout ce problème en interceptant et différant automatiquement les scripts tiers, sans modifier les applications elles-mêmes.

Différer les scripts va-t-il casser mes applications Shopify ?

Cela peut arriver si c'est fait manuellement. Un report naïf des scripts (ajouter « defer » à tout) peut casser des applications qui dépendent d'un ordre de chargement précis. Thunder gère cela intelligemment — il cartographie les chaînes de dépendances entre les scripts et les diffère en toute sécurité tout en préservant l'ordre d'exécution, pour que vos applications continuent de fonctionner correctement.

Quelle est la différence entre async et defer pour les scripts ?

Les deux téléchargent les scripts en arrière-plan sans bloquer le rendu, mais ils s'exécutent différemment. « async » s'exécute dès son téléchargement, sans tenir compte de l'ordre — risqué si les scripts dépendent les uns des autres. « defer » attend que le HTML soit entièrement analysé, puis s'exécute dans l'ordre. Pour la plupart des optimisations Shopify, « defer » est plus sûr. Thunder choisit automatiquement la bonne stratégie pour chaque script.

De combien ma boutique sera-t-elle plus rapide après avoir corrigé les ressources bloquant le rendu ?

La plupart des boutiques Shopify constatent une amélioration de 1 à 3 secondes du temps de chargement après avoir corrigé les ressources bloquant le rendu. L'amélioration exacte dépend du nombre de ressources bloquantes et de leur taille. Les boutiques avec de nombreuses applications installées constatent généralement les gains les plus importants. Les utilisateurs de Thunder rapportent une amélioration moyenne de plus de 27 points PageSpeed.

Que signifie « your page has blocking CSS resources » ?

Cet avertissement de PageSpeed Insights signifie que votre page a des feuilles de style CSS externes dans le <head> que le navigateur doit entièrement télécharger et analyser avant de pouvoir afficher le moindre contenu visible. Chaque fichier CSS externe ajoute un délai d'aller-retour — généralement 50 à 200 ms chacun. Sur Shopify, cela inclut la feuille de style principale de votre thème, le CSS injecté par les applications et Google Fonts. Le correctif consiste à intégrer en ligne le CSS critique (les styles nécessaires au contenu au-dessus de la ligne de flottaison) et à charger le reste en asynchrone.

Combien de ressources bloquant le rendu compte une boutique Shopify typique ?

Une boutique Shopify typique avec 8 à 12 applications installées compte 10 à 25 ressources bloquant le rendu : 3 à 5 provenant du thème (JavaScript et CSS), 5 à 15 des applications installées (chaque application peut ajouter 1 à 3 scripts), et 2 à 5 des polices et services externes. Chaque ressource bloquante ajoute 50 à 200 ms de délai. Thunder identifie automatiquement chaque ressource bloquant le rendu sur votre boutique et vous montre précisément quelles applications en sont responsables.

Les ressources bloquant le rendu affectent-elles l'INP (Interaction to Next Paint) ?

Oui. Le JavaScript bloquant le rendu ne fait pas que retarder le premier affichage — il occupe aussi le thread principal, retardant la capacité du navigateur à répondre aux interactions de l'utilisateur. Depuis que Google a remplacé le FID par l'INP comme Core Web Vital en mars 2024, cela compte encore plus. Les scripts synchrones lourds bloquent le thread principal pendant des centaines de millisecondes, rendant les taps et les clics poussifs. Différer les scripts bloquant le rendu améliore à la fois votre vitesse de chargement initiale et votre score INP.

Le tableau de bord de performance intégré de Shopify affiche-t-il les ressources bloquant le rendu ?

Le Web Performance Dashboard de Shopify affiche vos Core Web Vitals globaux (LCP, INP, CLS) mais ne détaille pas les ressources bloquant le rendu une par une. Pour voir précisément quels fichiers bloquent le rendu, passez votre boutique dans Google PageSpeed Insights ou utilisez Thunder Page Speed Optimizer, qui liste chaque script et feuille de style bloquants avec l'application qui les a injectés.

Dois-je corriger d'abord le JavaScript ou le CSS bloquant le rendu sur Shopify ?

Commencez par le JavaScript si vous avez de nombreuses applications installées, car les scripts d'applications créent généralement le plus gros délai et nuisent aussi à l'INP. Commencez par le CSS si PageSpeed Insights montre un gain important sur les feuilles de style du thème ou si votre page affiche un flash vide avant le rendu. Thunder gère les deux : il diffère les scripts non critiques et intègre le CSS critique en ligne pour que le premier affichage arrive plus tôt.

Pourquoi l'avertissement de blocage du rendu revient-il après l'avoir corrigé ?

Sur Shopify, l'avertissement revient souvent après l'installation d'une nouvelle application, une mise à jour de thème, l'ajout d'un nouveau tag de suivi, ou l'activation d'un widget qui injecte du nouveau CSS ou JavaScript. C'est pourquoi les correctifs manuels ponctuels se dégradent avec le temps. Retestez après chaque changement d'application ou de thème, ou utilisez une optimisation continue pour que les nouvelles ressources bloquantes soient détectées automatiquement.

Faites-le vous-même

Plan gratuit · Installation en 1 clic · Résultats instantanés

Installer Thunder gratuitement →

On s'en occupe

Garantie Core Web Vitals · Livraison en 2 semaines · 6 mois Thunder offerts

Demander l'optimisation experte →

À partir de 1 500 €