CSS critique dans Shopify : éliminer le CSS bloquant le rendu
Le CSS critique dans Shopify en bref
Le CSS critique est un ensemble de règles CSS nécessaires pour le premier rendu. Ces règles sont placées en ligne dans le head de la page afin que le navigateur puisse commencer le rendu sans attendre le téléchargement des fichiers CSS externes.
Shopify ne prend pas en charge le CSS critique automatisé. Il dispose d'une excellente infrastructure (les données du Web Almanac 2025 montrent que Shopify devance toutes les plateformes de commerce électronique avec 95 % de bons TTFB et 92 % de bons LCP sur ordinateur), mais seulement 48 % des boutiques Shopify valident tous les Core Web Vitals sur mobile. Le CSS bloquant le rendu est l'une des raisons principales. Le Web Almanac 2025 a révélé que 85 % des pages mobiles échouent encore à l'audit des ressources bloquant le rendu.
Dernière révision par Arjen Karel en mars 2026
Qu'est-ce que le CSS critique ?
Tous les navigateurs modernes bloquent le rendu jusqu'à ce que les fichiers CSS externes aient été téléchargés et analysés. Lorsqu'une page charge un ou plusieurs fichiers CSS, le rendu peut facilement être bloqué pendant 100 ms ou plus.
Le CSS critique résout ce problème en extrayant uniquement les règles CSS nécessaires pour rendre la partie visible de la page (au-dessus de la ligne de flottaison) et en les plaçant en ligne dans le <head>. Le navigateur peut commencer le rendu immédiatement, pendant que les feuilles de style complètes se téléchargent en arrière-plan. Cela améliore directement le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).
L'approche moderne : inline_asset_content
Si votre thème utilise des fichiers CSS séparés par section ou composant (comme le thème Dawn de Shopify et la plupart des thèmes Online Store 2.0), vous pouvez utiliser le filtre Liquid inline_asset_content pour mettre en ligne le CSS directement depuis vos fichiers d'assets :
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Cela met en ligne le contenu du fichier CSS sous la forme d'un bloc <style>, éliminant entièrement la requête bloquant le rendu. Vous pouvez également mettre en ligne conditionnellement le CSS uniquement pour les sections au-dessus de la ligne de flottaison :
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Les sections avec un index inférieur à 2 (les deux premières sections de la page, qui sont presque toujours au-dessus de la ligne de flottaison) voient leur CSS mis en ligne. Tout le reste est chargé comme une feuille de style normale. C'est l'approche que je recommande pour les thèmes Shopify modernes.
L'approche classique : générer et mettre en ligne le CSS critique
Si votre thème utilise une grande feuille de style (courant dans les thèmes plus anciens et les boutiques fortement personnalisées), vous devez extraire le CSS critique vous-même. Il s'agit d'un processus en six étapes.
1. Dupliquez votre thème
Lors de la modification du comportement principal d'un modèle dans Shopify, travaillez toujours d'abord sur une copie. Accédez à votre thème actuel via 'Boutique en ligne' > 'Thèmes' et dupliquez-le en cliquant sur 'Actions' > 'Dupliquer'.
2. Générez le CSS critique
J'utilise le module Node.js Critical en combinaison avec des ajustements manuels. Cela demande quelques efforts, mais produit les meilleurs résultats.
Si cela est trop technique pour vous, utilisez un générateur en ligne. Notre propre Générateur de CSS critique le fait pour vous. Entrez votre URL, copiez le CSS critique généré, et passez à l'étape suivante.
3. Téléchargez le CSS critique
Dans votre thème dupliqué, accédez au dossier snippets et créez un nouveau fichier appelé critical-css.liquid. Enveloppez le CSS généré dans des balises <style> et collez-le dans votre nouveau fichier.
4. Modifiez le fichier de mise en page
Ouvrez theme.liquid dans le dossier Layout. Deux modifications sont nécessaires.
Tout d'abord, rendez le snippet CSS critique dans le <head> :
<head>
{% render 'critical-css' %}
Remarque : Shopify a déprécié {% include %} au profit de {% render %}. Si votre thème utilise encore include, cela fonctionne mais vous devriez migrer.
Ensuite, modifiez les références CSS existantes pour qu'elles se chargent en arrière-plan. Le modèle le plus propre (utilisé par le propre thème Dawn de Shopify) est l'astuce media="print" :
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Cela indique au navigateur de traiter la feuille de style comme une feuille de style d'impression (non bloquante pour le rendu) lors du chargement initial, puis de la basculer vers media="all" une fois téléchargée. Votre CSS critique rend la page immédiatement pendant que la feuille de style complète se charge en arrière-plan. Cette approche media="print" a remplacé l'ancien modèle rel="preload" car elle est plus simple et ne nécessite aucune solution de repli <noscript>.
5. Testez le nouveau thème
Sur la page du thème, cliquez sur 'Actions' > 'Aperçu' pour tester le thème copié. Portez une attention particulière au Cumulative Layout Shift (CLS). Un CSS critique incomplet ou incorrect provoque un flash de contenu non stylisé où les éléments sont rendus sans leurs styles finaux, puis sautent en position une fois le CSS complet chargé. C'est le décalage de mise en page.
Exécutez PageSpeed Insights sur l'URL d'aperçu et comparez le FCP et le LCP avant et après. Vous devriez constater une nette amélioration des deux. Pour un suivi continu après la mise en ligne, suivez vos données de terrain avec le Real User Monitoring pour vérifier que l'amélioration se maintient pour les vrais visiteurs.
6. Publiez le nouveau thème
Accédez à Thèmes dans le menu de gauche sous 'Boutique en ligne' et sous 'Actions' sélectionnez 'Publier' pour votre nouveau thème.
Les limites que vous ne pouvez pas contrôler
Shopify force l'insertion de content_for_header dans le <head> de chaque page. Cela injecte des scripts d'analyse, des scripts d'application et d'autres codes de plateforme que vous ne pouvez ni différer ni modifier. Chaque application Shopify installée peut ajouter des scripts via ce mécanisme. Il s'agit d'un coût bloquant le rendu inévitable, ce qui rend l'optimisation de tout ce que vous contrôlez (votre CSS, vos polices, vos propres scripts) encore plus importante. Désinstaller les applications inutilisées est l'une des actions les plus efficaces que vous puissiez entreprendre.
Autre limite : Shopify ne permet pas de lire ou d'envoyer des cookies dans l'éditeur Liquid. Idéalement, vous ne serviriez le CSS critique qu'aux nouveaux visiteurs et la feuille de style complète mise en cache aux visiteurs récurrents. Ce n'est pas possible sur Shopify. Cependant, le gain de vitesse apporté par le CSS critique en vaut la peine. La boutique Shopify médiane sur mobile a un LCP de 2,26 secondes selon le benchmark 2025 de Shero Commerce, juste à la limite du seuil de 2,5 secondes. Gagner ne serait-ce que 200 ms sur ce temps en éliminant le CSS bloquant le rendu peut faire la différence entre la réussite et l'échec aux Core Web Vitals.
Que pouvez-vous faire d'autre ?
Le CSS critique est une pièce du puzzle. Pour une stratégie complète d'optimisation de Shopify, consultez notre guide Core Web Vitals pour Shopify. D'autres victoires à fort impact incluent le préchargement de votre image LCP, l'auto-hébergement de vos Google Fonts et la compréhension de la priorisation des ressources. Shopify prend également en charge les Speculation Rules pour des navigations instantanées et les 103 Early Hints pour précharger les ressources avant même que le HTML n'arrive.
Si vous luttez encore contre les avertissements de CSS inutilisé, attaquez-vous à cela en premier. Supprimer le CSS dont vous n'avez pas besoin est toujours préférable à la mise en ligne du CSS dont vous avez besoin.
Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
