Quand le préchargement des feuilles de style a (ou non) du sens
Pourquoi précharger votre CSS n'aide généralement pas, et le seul cas où cela fonctionne
Quand le préchargement des feuilles de style a (ou non) du sens
Je rencontre régulièrement des feuilles de style préchargées et beaucoup de désinformation à leur sujet. Le préchargement d'une ressource modifie le moment où son téléchargement est programmé. Mais la plupart du temps, précharger des feuilles de style n'aide pas. À travers cinq cas, je vais vous montrer quand cela fonctionne et quand ce n'est pas le cas.
Dernière révision par Arjen Karel en mars 2026
Table of Contents!
- Quand le préchargement des feuilles de style a (ou non) du sens
- L'idée derrière le préchargement des feuilles de style
- Cas 1 : précharger la feuille de style juste avant de la déclarer
- Cas 2 : précharger la feuille de style avec un en-tête link
- Cas 3 : 103 Early Hints pour les feuilles de style
- Cas 4 : précharger les feuilles de style pour obtenir un CSS asynchrone
- Cas 5 : pré-mettre en cache les feuilles de style
- Ce qui fonctionne réellement pour les performances CSS
L'idée derrière le préchargement des feuilles de style
Les feuilles de style bloquent le rendu. Pendant que les feuilles de style sont téléchargées, la page ne sera pas rendue par le navigateur et tout ce que le visiteur verra est un écran blanc.
Pour minimiser le temps de téléchargement des feuilles de style, les développeurs ont parfois recours à leur préchargement. Le préchargement indique au navigateur de récupérer une ressource avant de la découvrir dans le HTML, afin qu'elle soit prête plus tôt. Cela se fait en utilisant la balise <link> avec l'attribut rel="preload".
Selon le Web Almanac 2025, seulement 13 % des pages sur ordinateur passent l'audit des ressources bloquant le rendu. Le préchargement n'est pas la solution. Éliminer les ressources inutiles bloquant le rendu et différer les feuilles de style non critiques l'est.
Cas 1 : précharger la feuille de style juste avant de la déclarer
Parfois, dans tout leur enthousiasme, les développeurs essaient de minimiser l'impact du CSS en le préchargeant dans le HTML juste avant la déclaration CSS réelle. Cela ressemblera à ceci :
<link rel="preload" as="style" href="style.css"> <link rel="stylesheet" href="style.css">
Cela n'a aucun sens et, au mieux, vous ne ralentirez pas la page. Les navigateurs disposent d'un scanner de préchargement intégré qui analyse le HTML à la recherche de ressources à télécharger avant que l'analyseur principal ne les atteigne. Si votre <link> de feuille de style est déjà dans le <head>, le scanner de préchargement le trouve immédiatement. Ajouter une indication rel="preload" pour la même URL donne au navigateur une information qu'il possède déjà. Vous avez juste ajouté une ligne supplémentaire, c'est tout.
3 feuilles de style préchargées
3 feuilles de style normales
Cas 2 : précharger la feuille de style avec un en-tête link
Cette idée est intéressante. Nous pouvons utiliser l'en-tête serveur Link pour précharger une feuille de style. Cela ressemblerait à ceci :
Link: <style.css>; rel=preload; as=style
L'idée est d'amener le navigateur à mettre la feuille de style en file d'attente avant qu'il ne commence à analyser le HTML. J'aime la façon dont fonctionne l'esprit d'un développeur qui a pensé à cela ! Mais dans la vraie vie, vous en tirerez très peu de bénéfices. Nous parlons de quelques microsecondes. Des résultats plutôt décevants, mais cette idée nous mène à quelque chose qui fonctionne réellement.
Cas 3 : 103 Early Hints pour les feuilles de style
C'est la seule idée qui vous apportera réellement des résultats sur les Core Web Vitals. Envoyer des indications précoces pour les feuilles de style améliorera des métriques telles que le First Contentful Paint et le Largest Contentful Paint.
Les en-têtes 103 Early Hint sont envoyés avant la réponse HTML réelle. Cela signifie que pendant que vous téléchargez le HTML, le navigateur peut également commencer à télécharger des feuilles de style en parallèle. Le meilleur scénario est que d'ici à ce que le HTML ait fini de se télécharger, les feuilles de style soient également téléchargées. Zéro temps de blocage du rendu provenant de ces feuilles de style. Cela peut se produire et se produit sur des réseaux plus lents. Sur des réseaux plus rapides, l'effet est moins évident, mais l'utilisation des 103 Early Hints reste plus rapide dans presque tous les cas.
Une réponse 103 Early Hint ressemble beaucoup à un en-tête link de préchargement. Pour utiliser les 103 Early Hints, vous devrez configurer votre serveur web ou votre CDN.
HTTP/1.1 103 Early Hints Link: </style.css>; rel=preload; as=style
Certains CDN comme Cloudflare vous permettront de déclencher un 103 Early Hint en définissant simplement un en-tête link de préchargement (comme décrit dans le Cas 2). Pour un guide complet sur l'implémentation et le support des navigateurs, consultez 103 Early Hints : Précharger les ressources critiques pendant le temps de réflexion du serveur.
Sur les sites surveillés par CoreDash, les pages utilisant les 103 Early Hints pour leur feuille de style principale montrent un FCP 120ms plus rapide au 75e centile par rapport aux pages sans Early Hints. L'amélioration est la plus visible sur les connexions mobiles où le temps de réflexion du serveur et la latence du réseau se chevauchent davantage.
Cas 4 : précharger les feuilles de style pour obtenir un CSS asynchrone
Une astuce bien connue pour rendre le CSS non bloquant pour le rendu consiste à précharger la feuille de style et, une fois chargée, à l'ajouter à la page. L'idée est simple et ressemble à ceci :
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'" >
Cela se base sur le code de préchargement normal <link rel="preload" as="style" href="style.css"> et ajoute un écouteur d'événement onload onload="this.onload=null;this.rel='stylesheet'" qui modifie le lien vers sa forme finale <link rel="stylesheet" href="style.css">
C'est une autre idée qui est tout à fait logique. Si une feuille de style ne bloque pas le rendu, le navigateur peut continuer à analyser et à rendre la page sans attendre la feuille de style. Cependant, soyez prudent !
- Ne rendez pas asynchrone le CSS dans la fenêtre d'affichage visible. Cela provoquera probablement un Cumulative Layout Shift et cela conduira à une mauvaise expérience utilisateur.
- Considérez le compromis. Le CSS asynchrone provoquera probablement un nouveau rendu de différentes parties de la page. Cela aura un impact sur des métriques telles que l'Interaction to Next Paint.
Une alternative moderne plus simple consiste à utiliser fetchpriority="low" sur un lien de feuille de style classique : <link rel="stylesheet" href="style.css" fetchpriority="low">. Cela indique au navigateur de réduire la priorité du téléchargement sans utiliser le hack JavaScript. Je recommande ceci plutôt que l'astuce onload pour la plupart des cas d'utilisation.
Cas 5 : pré-mettre en cache les feuilles de style
En de rares occasions, je vois des solutions astucieuses qui tentent de pré-chauffer les fichiers en cache pour les pages vues ultérieures. Et bien que j'applaudisse l'enthousiasme avec lequel ces solutions sont créées : s'il vous plaît, NE faites PAS cela.
L'idée est simple : sur la page d'accueil, vous pourriez, si vous le vouliez, déjà pré-mettre en cache les styles pour une autre page. Disons la page produit. À un moment donné après le chargement de la page, vous préchargeriez les feuilles de style pour les ajouter au cache du navigateur.
function preloadStylesheet(url) {
var link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = 'style';
document.head.appendChild(link);
}
window.addEventListener('load', function () {
preloadStylesheet('cart.css');
preloadStylesheet('shop.css');
});
À première vue, cela n'a pas l'air si mal. Sur n'importe quelle page produit, cart.css et shop.css sont maintenant disponibles et ne bloqueront plus le rendu. Il y a quelques raisons de ne pas faire cela :
- Il existe de meilleures méthodes, par exemple le prérendu spéculatif avec les Speculation Rules ou en utilisant un service worker.
- Vous allez probablement gaspiller des ressources et le compromis n'en vaudra pas la peine. Si le préchargement des ressources était facile, les navigateurs y seraient meilleurs.
- De telles solutions sont difficiles à maintenir et causeront probablement des problèmes à l'avenir.
- Vous devrez précharger toutes les feuilles de style, pas seulement quelques-unes. Étant donné que toutes les feuilles de style bloquent le rendu et sont téléchargées en parallèle, une seule feuille de style peut avoir le même effet que plusieurs feuilles de style.
Ce qui fonctionne réellement pour les performances CSS
Au lieu de vous tourner vers les indications de préchargement, concentrez-vous sur ces fondamentaux de la priorisation des ressources :
- Supprimez le CSS inutilisé et redondant. Les fichiers plus petits se téléchargent plus rapidement. C'est la plus grande victoire pour la plupart des sites.
- Utilisez les 103 Early Hints pour vos feuilles de style critiques si votre serveur ou CDN le prend en charge.
Dans nos données de Real User Monitoring, les sites qui suppriment le CSS redondant et utilisent les 103 Early Hints réussissent systématiquement le LCP au 75e centile. Les sites qui se contentent de précharger leurs feuilles de style sans s'attaquer à la cause profonde (trop de CSS, chargé trop tard) constatent rarement des améliorations significatives.
The RUM tool I built for my own clients.
CoreDash is what I use to audit enterprise platforms. Under 1KB tracking script, EU hosted, no consent banner. AI with MCP support built in. The same tool, available to everyone.
Create Free Account
