CSS : améliorer la performance de vos pages web en optimisant vos fichiers

Même en petite quantité sur un site web, les fichiers CSS peuvent ralentir le chargement d’une page par le navigateur. C’est particulièrement vrai pour les utilisateurs de mobiles peu performants, et/ou dont la qualité de réseau n’est pas optimale ou les données limitées.

Alors, pour une expérience utilisateur optimale quelles que soient les conditions de navigation (qualité du réseau, modèle et taille d'ordinateur ou de mobile, navigateur, zone géographique…) l’optimisation des fichiers CSS est un passage obligé !

Voyons les difficultés que peuvent poser les CSS pour la vitesse des pages de votre site, et évidemment, comment les résoudre pour optimiser le chargement.

Chargement des pages web : comment fonctionnent les CSS ? 

Les CSS bloquent le rendu des pages par le navigateur

Qu'il s'agisse d’une balise HTML style ou d'une feuille de style externe, le navigateur doit analyser le CSS avant d’afficher du contenu.
En effet, si le navigateur affiche une page sans CSS, puis, quelques instants plus tard, une page stylisée, le changement de contenu et de mise en page inattendus vont rendre l'expérience utilisateur médiocre. Ce phénomène a un nom : le Flash of Unstyled Content (FOUC).
S’il se produit, c’est votre Cumulative Layout Shift, l’un des Core Web Vitals pris en compte par Google pour évaluer la qualité de votre expérience utilisateur, qui peut se dégrader.

Les CSS peuvent aussi bloquer l'analyse du HTML

Par ailleurs, même si le navigateur n'affiche pas de contenu tant qu'il n'a pas fini d'analyser le CSS, il continue de traiter le reste du code HTML. Cependant, des scripts peuvent bloquer l'analyseur, sauf si on précise au navigateur de les traiter ultérieurement, ce qui est possible en les marquant defer ou async.
Dans la mesure où un script peut avoir un impact sur le contenu de la page et le reste du code, le navigateur doit faire attention au moment où ce script s'exécute.

Pendant le chargement d’une page par un navigateur,
comment un script peut bloquer l'analyseur HTML

Vous l’aurez compris, étant donné que les scripts peuvent avoir un impact sur les styles qui s'appliquent à une page web, si le navigateur est toujours en train d’analyser ou de traiter un CSS, il attendra que ce traitement soit terminé avant d'exécuter le script. En effet, l'analyse du code s’interrompt tant que le script n’est pas exécuté.

De ce fait, les CSS ne se contentent pas de bloquer le rendu, car selon l'ordre dans lequel les feuilles de style et les scripts externes se trouvent dans le document, l'analyse du HTML peut également être bloquée. 

Comment et pourquoi CSS peut bloquer l'analyseur HTML

Alors, pour éviter de bloquer l'analyse du code par votre navigateur, vous devez l’aider à découvrir le CSS dès que possible, et optimiser la hiérarchisation de vos ressources. Bonne nouvelle pour votre webperf (et pour vos utilisateurs) : vous pouvez automatiser cette étape avec le moteur de Fasterize qui place les déclarations des fichiers CSS au début du code HTML, avant les balises script.

Passons maintenant aux bonnes pratiques pour gérer au mieux vos ressources CSS.

Comment optimiser les CSS pour améliorer la vitesse d’affichage

Optimiser la taille des fichiers CSS : compresser, minifier et concaténer

Optimiser vos ressources - et les fichiers CSS en font partie - vous permet de réduire le nombre d’octets transférés sur le réseau, et donc d’améliorer la vitesse à laquelle les échanges se font entre serveur et navigateur. Ainsi, le contenu peut s’afficher plus vite pour vos utilisateurs - ils gagnent du temps et vous maximisez les chances de les garder engagés sur votre site.

Pour gagner du temps vous aussi, vous pouvez très facilement automatiser cette tâche également, et profiter des formats et des techniques les plus performants grâce à notre moteur d’optimisation du frontend.

Mais vous vous demandez peut-être en quoi consistent ces différentes techniques d’optimisation des ressources ? Voici quelques détails sur la terminologie 

• Compression : les formats actuellement les plus intéressants pour compresser les ressources sont Gzip et Brotli (et vous pouvez les activer en un clic avec Fasterize).
• Minification : il s’agit de supprimer les espaces et caractères inutiles dans le code pour rendre les fichiers plus légers.
• Concaténation : il s’agit de réduire le nombre de fichiers pour diminuer le nombre total de requêtes (technique aussi utile pour le JavaScript). Sachez que notre moteur permet de transformer les directives CSS @import dont nous reparlerons un peu plus loin.

Supprimer les CSS inutilisés

Si vous utilisez des frameworks CSS, il y a de fortes chances pour que votre code comporte du code CSS inutilisé (à moins de n'inclure que les composants nécessaires), et il peut s’accumuler dans le temps. 

Supprimer ce CSS inutilisé nécessite généralement une intervention manuelle, un travail fastidieux et complexe. Il faut alors examiner l’ensemble du site sous toutes ses coutures, dans toutes les conditions possibles, en exécutant tous les scripts susceptibles de modifier les styles… puis tester le site pour s’assurer qu’il n’y a pas de régression de la qualité visuelle de l’interface… C’est un véritable travail de fourmi !

Une approche adoptée par les frameworks JavaScript modernes tels que React ou Vue.Js consiste à intégrer le CSS directement dans les composants écrits en Javascript.
Cette approche permet de maintenir plus facilement le CSS utilisé sur le site, et donc de réduire la présence de code CSS mort. En contrepartie, le CSS est découvert tardivement, au chargement du JavaScript par le navigateur. Cela peut avoir un impact négatif sur le premier rendu de la page.

Prioriser les CSS critiques (le Critical CSS)

Le Critical CSS est une technique qui permet d'extraire et d’embarquer le CSS pour le contenu au-dessus de la ligne de flottaison. L'insertion des styles extraits dans la balise <head> du document HTML dispense d’une requête supplémentaire pour récupérer ces styles et accélère le rendu.

Un conseil : pour minimiser le nombre d’échanges de requêtes nécessaires au rendu des premiers octets sur une page, gardez le contenu au-dessus de la ligne de flottaison en dessous de 14 KB (compressé).

Toutefois, notez que la définition du CSS critique n’est pas simple, parce qu’il n’existe pas de ligne de flottaison “universelle” étant donné que les appareils et les tailles d’écrans sont multiples. Vous devez donc émettre des hypothèses sur la position de la ligne de flottaison, et c’est d’autant plus complexe pour des sites dynamiques.
Soyez rassurés, même en étant imprécise, cette technique peut apporter des améliorations de performance, et nous pouvons l'automatiser.

Charger les CSS en asynchrone

Nous avons vu comment traiter le CSS critique. Et maintenant, quid du CSS non critique ?
Il est préférable de charger le reste du CSS (la partie non critique) de manière asynchrone. Le moyen d'y parvenir est de définir l'attribut "link media" sur "print" :

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Le type de média print définit les règles de la feuille de style pour le cas où l'utilisateur tente d'imprimer la page, et le navigateur charge cette feuille de style sans retarder le rendu de la page. L'application de cette feuille de style à tous les médias (à savoir les écrans et pas seulement pour l'impression) fait appel à l'attribut onload pour définir le media sur all lorsque le chargement de la feuille de style est terminé.

Une autre option consiste à utiliser <link rel="preload"> (au lieu de rel="stylesheet") pour obtenir un schéma similaire à celui décrit ci-dessus, et à basculer l'attribut rel en stylesheet lors de l'événement Onload.

Néanmoins, cette technique implique quelques limites à prendre en compte :

• La prise en charge du préchargement par les navigateurs n'est toujours pas optimale, de sorte qu'un polyfill (ou l'utilisation d'une bibliothèque telle que loadCSS) devient nécessaire pour appliquer la feuille de style sur tous les navigateurs.
• Le préchargement permet de récupérer les fichiers très tôt, avec le niveau de priorité le plus élevé, ce qui peut avoir pour effet de limiter d'autres téléchargements essentiels.

Si vous souhaitez bénéficier de la récupération prioritaire offerte par preload (dans les navigateurs qui le prennent en charge), les créateurs de loadCSS recommandent une combinaison avec le premier modèle, comme ceci :

<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Optimiser les animations CSS 

Lorsque vous animez des éléments sur une page, le navigateur doit souvent recalculer leurs positions et leurs tailles dans le document, ce qui déclenche de potentiels changements de mise en page (nous avons déjà vu l’impact sur le CLS). Aussi, plus la structure de la mise en page est grande, plus les calculs de mise en page sont longs.

Ainsi, lorsque vous animez des éléments, il est essentiel de minimiser la mise en page et le recalcul de l'affichage. Toutes les techniques d'animation CSS ne se valent pas, et les navigateurs modernes permettent de créer des animations plus performantes avec position, scale, rotation, et opacity :

• Au lieu de modifier les propriétés height et width, utilisez transform: scale().
• Pour déplacer des éléments, évitez de modifier les propriétés top, right, bottom ou left et utilisez plutôt transform : translate().
• Si vous voulez rendre l'arrière-plan flou, envisagez d'utiliser une image floue et de modifier son opacité.