CSS : ce que c’est et comment l’optimiser pour un site rapide
CSS est le langage informatique qui régit la mise en forme stylistique des sites et de leurs pages web : comme d'autres éléments, lorsqu'il n'est pas mis en œuvre correctement, il peut devenir lourd et ralentir les performances de notre projet. Voyons ensemble les principales informations sur les feuilles de style et les interventions qui permettent d'alléger et d'optimiser les CSS pour rendre le site plus rapide.
Qu’est-ce que CSS
Avant d'aborder les aspects techniques, commençons par les définitions nécessaires et l'histoire des CSS. L'acronyme CSS signifie "Cascading Style Sheets" (feuilles de style en cascade). Il s'agit du code utilisé pour façonner la mise en page et le style des pages web et de l'ensemble du site.
A quoi sert le langage stylistique
Selon les experts, le CSS n'est pas vraiment un langage de programmation, mais plutôt un langage de style universellement partagé par tous les navigateurs qui nous permet d'appliquer un style unique aux éléments des documents web et d'instruire le navigateur ou un autre programme utilisateur sur le rendu final du document à présenter à l'utilisateur.
Grâce à ce code, nous pouvons intervenir sur tout type d'élément, en définissant par exemple le type de police, sa taille et sa couleur, mais aussi les images de fond, le positionnement des éléments graphiques, la gestion des colonnes ou d'autres éléments de la page. En outre, grâce au CSS, nous pouvons également définir la disposition des éléments de manière réactive, c'est-à-dire adapter la disposition en fonction des différents appareils des utilisateurs.
L'histoire des CSS
La conception du CSS est directement liée au HTML, dont il est en quelque sorte le complément idéal à la philosophie de séparation du contenu et de la présentation. En fait, dans les intentions du W3C, le HTML doit être vu et utilisé comme un langage structurel, sans informations graphiques ou de style sur la présentation du document, alors que le CSS a pour tâche d'enrichir l'aspect visuel de la page.
Les feuilles de style en cascade étaient donc nécessaires pour séparer le contenu des pages HTML des éléments de formatage ou de mise en page et permettre une programmation plus claire et plus facile, tant pour les programmeurs que pour les utilisateurs, tout en assurant la réutilisation du code et une maintenance plus aisée.
La première version officielle de CSS (appelée plus tard CSS 1) a été présentée en décembre 1995 ; la spécification CSS 2 a été publiée en mai 1998, suivie de CSS 2.1 le 7 juin 2011. Ce fut ensuite le tour de la spécification CSS 3, composée de sections distinctes appelées "modules", qui ont été publiées à différents intervalles de temps jusqu'en juin 2018. Depuis le début de l'année 2020, un groupe communautaire du W3C travaille à la définition de la nouvelle version, qui s'appellera CSS 4.
Les caractéristiques du CSS
Examinons maintenant brièvement les bases du fonctionnement de ce langage. Le code CSS peut être inséré dans les pages web de trois manières différentes :
- Insertion d'un lien vers une feuille externe (marquée par l'extension .css) dans la balise de la page HTML. Cette solution suppose la création d'un fichier spécifique lié par la balise link ou la directive import (qui sert également à lier plusieurs fichiers .css entre eux) et garantit une réutilisation maximale du code, car chaque page HTML souhaitée fait appel au même fichier externe.
- Utilisez les déclarations css entre les balises spécifiques <style> e </style>dans la balise <head> . Dans ce cas, les instructions ne s'appliquent qu'à la page dans laquelle les déclarations sont présentes et la réutilisation est donc moindre.
- Inline dans les éléments, une solution qui rend la réutilisation du code minimale.
En principe, une feuille de style CSS est structurée syntaxiquement comme une séquence de règles qui peuvent éventuellement être accompagnées de notes de commentaires et d'une ou plusieurs directives @-rule.
Les règles sont des paires composées d'un sélecteur et d'un bloc de déclaration, entre crochets ; le sélecteur sert à identifier les éléments du document HTML dans lesquels la règle doit être appliquée, tandis que la déclaration (séparée des autres par un point-virgule) est composée d'une propriété (un trait de style à appliquer à l'élément à modifier) et de la valeur correspondante.
Parmi les différentes règles à respecter, nous en citerons deux : chaque déclaration ne doit contenir qu'une seule propriété, mais il est possible de spécifier plus d'une valeur ; de plus, les espaces blancs dans une règle n'affectent pas le résultat, et les espaces vides sont souvent utiles pour améliorer la lisibilité.
Comment optimiser les CSS du site
Cette parenthèse générale refermée, essayons de voir quelles astuces nous pouvons utiliser pour améliorer la gestion du code sur nos pages et éviter d'alourdir les performances du site. A notre appui viennent les guides du blog web.dev, qui consacrent quelques leçons aux meilleures pratiques CSS.
Le premier conseil provient de Demian Renzulli, consultant principal en écosystèmes Web chez Google, et consiste à "reporter les CSS non critiques".
Différer le chargement du code non critique
Les fichiers CSS sont des ressources qui bloquent le rendu, explique Google, car ils doivent être chargés et traités avant que le navigateur ne rende la page ; en conséquence, les pages Web qui contiennent des styles inutilement volumineux sont plus longues à rendre.
La technique du report permet d'optimiser le chemin de rendu critique et d'améliorer le First Contentful Paint, qui est un élément important pour offrir une expérience utilisateur rapide.
Réduire les CSS inutilisés
Pour expliquer la méthode de simplification CSS, Renzulli donne l'exemple d'une page qui nécessite un fichier CSS avec huit classes, dont toutes ne sont pas nécessaires pour rendre le contenu "visible" : une manipulation plus attentive chargera de manière synchrone uniquement les styles critiques, laissant les autres (tels que ceux appliqués aux paragraphes) se charger de manière non bloquante.
L'outil permettant de vérifier l'impact du code sur la vitesse du site est Google Lighthouse, qui signale également, par une suggestion appelée Remove Unused CSS, la présence sur la page d'au moins 2048 octets de règles CSS qui ne sont pas utilisées lors du rendu du contenu de la page. Le risque, en fait, est que le navigateur doive attendre le chargement et le traitement de toutes les CSS avant de peindre un seul pixel à l'écran.
Identifier le CSS critique
Pour optimiser la page, il est de toute façon nécessaire de savoir quelles classes sont considérées comme "critiques" : Google a développé un outil - le Coverage Tool contenu dans DevTools de Chrome - qui permet de vérifier la couverture d'une seule page et de comprendre, même visuellement, quelles ressources CSS sont critiques et lesquelles ne le sont pas.
Les classes critiques (indiquées en vert) sont celles dont le navigateur a besoin pour rendre le contenu visible (comme les boutons de titre, de sous-titre et d'accordéon) ; les classes non critiques (indiquées en rouge dans l'outil) sont celles qui s'appliquent au contenu qui n'est pas immédiatement visible (comme les paragraphes dans les accordéons).
Grâce à ces informations, nous pouvons optimiser le CSS de manière à ce que le navigateur commence à traiter les styles critiques immédiatement après le chargement de la page, tout en reportant les CSS non critiques à plus tard.
Minimiser le code CSS
La deuxième procédure que nous pouvons mettre en œuvre est la technique de minification (minify), c'est-à-dire la réduction au maximum des fichiers CSS : parfois, le code peut contenir des caractères inutiles, tels que des commentaires, des espaces blancs et des indentations, et ces caractères peuvent être supprimés en toute sécurité en production, afin de réduire la taille du fichier sans affecter la façon dont le navigateur traite les styles.
Dès la phase de rédaction du code, il est possible d'éviter les lourdeurs qui peuvent être supprimées - comme, par exemple, les espaces pour l'indentation ou les commentaires, qui sont ignorés par le navigateur ; les styles qui peuvent être regroupés ou les indications imprécises pour la police et la couleur de fond - mais il existe aussi des outils de compilation automatique et des processus webpack à cet effet.
Extraction des CSS critiques
La troisième technique présentée - par un autre Googler, le développeur Milica Mihajlija - est l'extraction des CSS critiques : comme indiqué précédemment, le navigateur doit télécharger et analyser les fichiers CSS avant de pouvoir afficher la page, ce qui fait du code une ressource bloquant le rendu. Si les fichiers sont volumineux ou si les conditions de réseau sont mauvaises, les demandes de fichiers CSS peuvent augmenter considérablement le temps nécessaire au rendu d'une page web.
Grâce à cette technique, nous pouvons extraire les feuilles de style en cascade afin de les rendre à l'utilisateur le plus rapidement possible : en insérant les styles extraits dans le du document HTML, il n'est plus nécessaire d'effectuer une requête supplémentaire pour récupérer ces styles, et le reste du code peut être chargé de manière asynchrone.
Les avantages de cette opération
L'amélioration des temps de rendu peut faire une énorme différence dans les performances perçues par les utilisateurs, en particulier dans de mauvaises conditions de réseau ; pour les réseaux mobiles, la latence élevée est un problème indépendant de la bande passante.
Il existe plusieurs excellents outils qui peuvent déterminer automatiquement le CSS critique d'une page, un processus complexe qui nécessite une analyse de l'ensemble du DOM pour déterminer les styles appliqués à chaque élément de la fenêtre. L'impact sur les performances que nous pouvons obtenir avec cette technique dépend du type de site Web : en général, plus un site comporte de CSS, plus l'impact potentiel des CSS intégrés est important.
Mihajlija nous invite également à nous rappeler que l'intégration d'une grande quantité de CSS retarde la transmission du reste du document HTML : si tout est prioritaire, écrit-il, alors rien ne l'est. L'incorporation en ligne présente également certains inconvénients, car elle empêche le navigateur de mettre en cache les feuilles de style CSS pour les réutiliser lors des chargements ultérieurs de la page. Il est donc préférable de l'utiliser avec parcimonie.
Proposer du contenu rapidement
Si notre site présente de mauvaises valeurs de First Contentful Paint (FCP) et que nous voyons le drapeau "Supprimer les ressources du bloc de rendu" dans les audits de Lighthouse, il est bon d'essayer la technique CSS critique. Afin de minimiser le nombre d'allers-retours pour le premier rendu, l'objectif est de maintenir le contenu de la page d'accueil en dessous de 14 Ko (compressé).
Cette valeur n'est évidemment pas aléatoire : les nouvelles connexions TCP ne peuvent pas utiliser immédiatement toute la bande passante disponible entre le client et le serveur, et elles passent toutes par un démarrage lent pour éviter de surcharger la connexion avec plus de données qu'elles ne peuvent transporter. Dans ce processus, le serveur commence le transfert avec une petite quantité de données et, s'il parvient au client en parfait état, il double cette quantité lors de l'aller-retour suivant. Pour la plupart des serveurs, 10 paquets ou environ 14 Ko constituent la taille maximale pouvant être transférée lors du premier aller-retour.
Optimisation des images d'arrière-plan CSS avec media queries
De nombreux sites nécessitent des ressources lourdes, telles que des images, qui ne sont pas optimisées pour certains écrans et envoient des fichiers CSS volumineux contenant des styles que certains appareils n'utiliseront jamais, écrit Renzulli en présentant la dernière méthode d'optimisation CSS suggérée par Google.
L'utilisation de media queries est une technique populaire pour fournir des feuilles de style et des ressources adaptées à différents affichages, réduire la quantité de données transférées aux utilisateurs et améliorer les performances de chargement des pages. En bref, il s'agit d'apprendre à utiliser le code pour fournir des images réactives ou adaptées sans le surcharger.
Pour ce faire, nous pouvons utiliser la règle @media et mettre en œuvre un arrière-plan réactif - une technique largement prise en charge par tous les navigateurs - ou nous pouvons utiliser une nouvelle fonctionnalité CSS : image-set(), qui sert le même objectif mais implique moins de lignes de code (mais n'est pas actuellement prise en charge par tous les navigateurs).
De cette façon, nous pouvons servir des images d'arrière-plan adaptées à des tailles d'écran spécifiques et économiser des octets lorsque le visiteur accède au site sur des appareils plus petits, comme les téléphones mobiles.