Les feuilles de style en cascade (CSS) sont essentielles pour définir le style d'un site web, mais les fichiers CSS volumineux peuvent ralentir ou bloquer le rendu des pages. La minification des CSS réduit la taille des fichiers CSS.
Cet article s'articule autour des points suivants :
Contenu associé
Pourquoi minimiser Javascript ?
Performances et taux de conversion
Comment la vitesse du site stimule le SEO
Core Web Vitals
Qu'est-ce que le HTTP/3 ?
Abonnez-vous à theNET, le récapitulatif mensuel de Cloudflare des idées les plus populaires concernant Internet !
Copier le lien de l'article
La minification des CSS réduit la taille des fichiers de feuilles de style en cascade (CSS) afin qu'ils se chargent plus rapidement. Pour ce faire, tous les caractères et espaces inutiles du balisage CSS sont éliminés, sans que cela n'ait d'incidence sur l'interprétation qu'en font les navigateurs.
Les fichiers CSS contiennent des instructions pour la mise en forme des éléments HTML. Lorsqu'ils se chargent plus rapidement, les pages web se chargent globalement plus rapidement, tout comme le port de vêtements légers aide un joggeur à courir plus vite. Plus le chargement est rapide, meilleure est l'expérience utilisateur et la valeur SEO de la page, et l'augmentation de la vitesse de la page contribuent parfois à augmenter les taux de conversion.
À titre d'exemple, cette feuille de style simple comporte plusieurs lignes de code, ainsi que des commentaires à l'intention des développeurs qui la lisent :
/* paragraph styling here */
p {
font-family: arial;
color: green;
background-color: white;
}
/* links */
a:link {
color: blue;
}
a:visited {
color: white;
}
Après minification de CSS, il ne reste plus qu'une seule ligne compressée, et les commentaires sont supprimés :
p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;}
Certes ce texte est moins lisible pour les humains, mais un navigateur lit et interprète la deuxième version exactement de la même manière que la première. La version minifiée présente l'avantage de se charger plus rapidement parce qu'elle occupe moins d'espace.
Avant qu'un navigateur puisse afficher une page web, il doit savoir quels éléments (par exemple le texte, les images et d'autres éléments multimédias) se trouvent sur la page web et où ils se trouvent sur la page. Tout comme les entrepreneurs ont besoin des plans d'un bâtiment avant de commencer la construction, les navigateurs ont besoin des « plans » de la page web avant de commencer à rendre la page.
Lorsqu'ils reçoivent le fichier HTML d'une page web, les navigateurs commencent à construire ce que l'on appelle un arbre Document Object Model (DOM) ; il s'agit d'une sorte d'ébauche ou d'esquisse de tous les éléments de la page. Les navigateurs analysent également toutes les balises <style> et les fichiers CSS liés pour construire un arbre CSSOM, qui indique comment le style sera appliqué aux éléments de la page.
Enfin, les navigateurs combinent le DOM et le CSSOM pour créer un arbre de rendu. Une fois l'arbre de rendu créé, le navigateur commence à peindre la page. Jusqu'à ce stade, l'utilisateur regarde un écran vide.
Résultat : tant que le navigateur n'a pas fini de télécharger et de lire le fichier CSS, la page ne peut pas s'afficher.
Dans le développement web, tout élément ou fonction dont le chargement est nécessaire à l'affichage de la page est appelé « ressource bloquant le rendu ». Le CSS est une ressource de ce type. Les ressources bloquant le rendu doivent être optimisées de façon que le chargement soit le plus rapide possible.
Les ressources volumineuses bloquant le rendu prennent plus de temps à télécharger, elles obligent le navigateur à attendre, ce qui bloque littéralement la page, de sorte que l'utilisateur a l'impression que rien ne se passe. Ces délais conduisent souvent les utilisateurs à quitter la page (« le rebond »).
Ils ont également une incidence sur les signaux web essentiels, à savoir les paramètres utilisés par Google pour mesurer les performances des pages ;en particulier Largest Contentful Paint (LCP), qui mesure le temps de chargement de l'élément le plus volumineux d'une page. Un mauvais score pour les signaux web essentiels peut amener Google à classer la page plus bas dans les résultats de recherche, ce qui réduit le trafic en général vers cette page.
Heureusement, de nombreux outils de minification sont disponibles pour les CSS. La méthode la plus commode consiste peut-être à utiliser les outils de minification intégrés au réseau de diffusion de contenu (CDN) d'un site web, un service qui met en cache et diffuse le contenu. Les CDN doivent être en mesure de fournir des services de minification pour améliorer encore les performances.
Cloudflare Auto Minify est inclus dans le CDN de Cloudflare. Les propriétaires de sites peuvent sélectionner les fichiers CSS (ainsi que les fichiers JavaScript et HTML) à minifier dans leur tableau de bord Cloudflare.
Techniquement, la minification CSS est différente de la compression CSS, même si l'objectif est le même : réduire la taille du fichier. La minification modifie le code en supprimant les commentaires et des caractères. La compression réduit la taille du fichier grâce à l'utilisation d'un algorithme de compression (tel que gzip) et ne modifie pas le contenu du fichier.
Les feuilles de style CSS minifiées étant souvent moins lisibles, la minification peut compliquer la tâche des développeurs lorsqu'ils doivent identifier et corriger manuellement les bogues dans les feuilles de style CSS.
En outre, la minification des feuilles de style CSS ne suffit pas à elle seule à améliorer les performances d'un site web. Le site web y gagne des millisecondes, mais les opérateurs de sites web doivent entreprendre d'autres actions pour améliorer de manière significative les performances ; notamment l'optimisation des images, la mise en cache HTTP du navigateur, et bien d'autres choses encore.
La Minification dans JavaScript est un concept semblable, mais elle concerne le code JavaScript exécutable. Les commentaires, les espaces et autres caractères supplémentaires sont supprimés de façon que le fichier .js puisse se charger et s'exécuter plus rapidement. La minification de JavaScript et de CSS contribue à l'accélération du chargement du site web, ce qui peut se traduire par un meilleur engagement de l'utilisateur et une augmentation du trafic organique.
Les exploitants de sites web peuvent utiliser le CDN de Cloudflare pour minifier les feuilles de style CSS et JavaScript - . Pour en savoir plus sur les plans Cloudflare disponibles, cliquez ici.