Règle de vitesse: Optimiser la diffusion des ressources CSS
Cette règle se déclenche dans Google PageSpeed Insights lorsqu’une ou plusieurs feuilles de style sont détectées.
Le navigateur doit attendre le chargement complet de toutes les feuilles de style avant d’afficher quoique ce soit à l’utilisateur.
C’est pourquoi, par l’optimisation de vos ressources CSS, vous pourriez améliorer la vitesse de votre site Web. La perception de vitesse par l’utilisateur sera également bonifiée. C’est ce que nous appelons l’indice de vitesse.
Combiner les feuilles de style
Chaque feuille de style externe doit être chargée par le navigateur avant l’affichage du contenu à l’utilisateur. Pour cette raison, vous devez absolument combiner vos feuilles de styles.
Évitez les “import” CSS
Les “import” permettent d’importer des règles CSS à partir d’une autre feuille de style.
@import url("/css/header.css")Les importations CSS, ne sont détectées par les navigateurs qu’une fois le chargement de la feuille de style complété. Cela implique donc, des aller-retour supplémentaires au serveur. Ce qui retarde encore plus l’affichage du contenu à l’utilisateur.
Si vous utilisez les importations CSS pour structurer votre CSS, je vous suggère plutôt d’utiliser un langage structuré de feuille de style, tel que LESS et SASS. Ces deux langages structurés doivent être préalablement compilés en CSS.
Évitez l’attribut “style”
<div style="margin: 0;">En effet, l’ajout d’attributs CSS “inline” est à proscrire. Cela provoque une duplication inutile du code. L’utilisation intensive des attributs CSS alourdit inutilement le poids de la page et peut faire apparaître un avertissement dans PageSpeed Insights via la section “Afficher en priorité le contenu visible”.
Insérez le CSS dans l’entête du document
Pour que le navigateur détecte rapidement les ressources CSS, il est important d’intégrer celle-ci le plus tôt possible dans le document HTML. De cette façon, la requête au serveur est faite de façon optimale.
<link rel="stylesheet" type="text/css" href="http://votresite.com/style.css" media="screen" />Intégrer “Inline” le CSS dans l’entête du document
Pour des performances optimales, vous devez ajouter le CSS essentiel de façon “Inline” dans l’entête de votre site.
<head>
<style>
.blue{color:blue;}
</style>
</head>Le CSS essentiel (Critical CSS) est le CSS nécessaire à l’affichage du contenu au-dessus de la ligne de flottaison.
Cette technique est difficile à appliquer puisque vous devez intégrer un CSS différent pour chaque page de votre site! 😮 C’est pourquoi plusieurs propriétaires de sites au design minimaliste intègre la totalité du CSS dans l’entête de leur site.
Attention à ne pas exagérer, car vous pourriez encore une fois, faire apparaître un avertissement dans PageSpeed Insights via la section “Afficher en priorité le contenu visible”.
Google recommande ensuite de différer le chargement du CSS en JavaScript.
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'small.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
</body>
</html>Cette technique est très semblable à celle qui permet de différer les scripts.
En Conclusion
L’optimisation de vos ressources CSS n’est pas une mince affaire. Cela demande de l’analyse et du temps. Si vous êtes en mesure d’intégrer “Inline” le CSS essentiel dans l’entête de votre site, allez si de cette façon. Sinon, assurez-vous de combiner vos feuilles de styles et de charger celle-ci le plus rapidement possible.