Vitesse de chargement : optimisation des fichiers CSS

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.

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

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

Performance web : Comment et pourquoi CSS peut bloquer l'analyseur HTML

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é.

Mise au point : les propriétés contain et @import 

La propriété CSS contain indique au navigateur que l'élément et ses descendants sont considérés comme indépendants de l'arborescence du document (dans la mesure du possible). Elle isole un sous-ensemble d'une page. Le navigateur peut alors optimiser le rendu (style, mise en page et opérations de calcul de l’affichage) des parties indépendantes de la page pour une meilleure vitesse d’affichage.

Cette propriété contain est utile sur les pages contenant de nombreux widgets indépendants. Son utilisation permet d’éviter que les modifications apportées à chaque widget aient des effets de bord en dehors de la zone de délimitation du widget. Toutefois, un site qui comporte essentiellement du contenu statique tirera peu d'avantages de cette stratégie.

Par ailleurs, évitez d’utiliser @import dans dans les fichiers CSS car cette règle ralentit le rendu. Pourquoi ? Parce que le navigateur doit d’abord télécharger le fichier CSS pour découvrir la ressource importée, puis lancer une autre requête pour le télécharger avant d'effectuer le rendu.

Si vous avez une feuille de style qui contient @import url(imported.css), le modèle en cascade du réseau ressemble à ceci :

Vitesse de chargement : CSS et modèle en cascade

Le chargement de feuilles de style dans des éléments link permet de traiter les requêtes en parallèle :

Vitesse de chargement et CSS : chargement parallèle

Polices de caractère : optimiser le chargement des fonts avec CSS

Éviter le texte invisible (Flash Of Invisible Text) pendant le chargement des polices

En raison de leur poids, les fichiers fonts mettent du temps à se charger. Pour y remédier, certains navigateurs masquent le texte jusqu'à ce que la police se charge, ce qui provoque le “Flash Of Invisible Text" (ou FOIT).
Pour éviter ce FOIT, vous pouvez afficher le contenu plus tôt sur vos pages en faisant appel à une font système (préinstallée sur leur appareil). Puis, une fois le fichier font chargé, le navigateur remplace la police système par la police définie dans votre CSS. Ce phénomène a pour nom "Flash Of Unstyled Text" (ou FOUT).

Pour afficher le texte au plus tôt, même avant le chargement des fonts, vous pouvez utiliser font-display, une API permettant de spécifier votre stratégie d'affichage des fonts. L'utilisation de font-display avec la valeur swap indique alors au navigateur que le texte utilisant cette police doit être affiché immédiatement avec une police système.

Pour faciliter la mise en place de cette technique, sachez que notre moteur prévoit une fonctionnalité d’optimisation du chargement des fonts Google : le navigateur peut afficher le contenu texte plus tôt grâce à l'option swap, et le CSS chargé en asynchrone laisse le temps à d'autres ressources affichées dans le viewport de se charger.

Utilisez des polices variables pour réduire la taille du fichier

Gagnez aussi du temps et économisez du poids avec les polices variables ! Elles permettent d'incorporer de nombreuses variantes d'un même caractère dans un seul fichier, plutôt que d'avoir un fichier font distinct pour chaque largeur, poids ou style. Elles vous permettent d'accéder à toutes les variations d'un fichier de police donné à l'aide de CSS et d'une seule référence @font-face.

Les polices variables peuvent réduire considérablement la taille des fichiers lorsque vous avez besoin de plusieurs variantes d'une police. Au lieu de charger les versions normal / gras / italique... vous pouvez charger un seul fichier contenant toutes ces informations.

L’incidence de la structure des sélecteurs CSS

La structure des sélecteurs CSS influe sur la vitesse à laquelle le navigateur peut les lire. C’est un sujet complexe, et si vous souhaitez approfondir vos connaissances techniques, nous vous recommandons la lecture de cet article ou encore celui-ci.

CSS et vitesse de chargement : en résumé, automatisez !

Les scripts JavaScript et les images sont souvent au centre de l’attention pour améliorer les performances d’un site web, mais vous devez veiller aussi sur vos fichiers CSS, car leur optimisation est essentielle pour une meilleure expérience utilisateur !

En effet, si vos fichiers CSS sont trop volumineux et mal priorisés, la vitesse de chargement de vos pages en prend un sérieux coup.

Pour améliorer votre UX, réduire vos taux de rebond et augmenter vos conversions, pensez à minifier et concaténer vos CSS, et à prioriser les CSS critiques. Ce sont des techniques que vous pouvez automatiser avec le moteur de Fasterize.

Résultat : votre site se charge plus vite avec moins d’efforts techniques à fournir, vos utilisateurs sont davantage satisfaits et engagés, et votre CA s’en ressent.

Pour creuser le sujet de la vitesse de chargement et ses nombreux leviers,
décryptez et analyser vos performances avec ce livre blanc : 

Téléchargez le livre blanc


Hello SMX Paris !