CSS

Modifié le  Thu, 02 May 2024 sur 04:24 PM

L'application CSS vous offre la possibilité d'optimiser rapidement et efficacement vos feuilles de style. Vous pourrez réduire la taille de vos fichiers CSS et les regrouper, ce qui permet d’accélérer le chargement des pages de votre site.


Pourquoi optimiser ses fichiers CSS est important ?

Les fichiers CSS sont indispensables sur votre site web, mais leur nombre et leur taille peut affecter négativement la vitesse de chargement des pages et donc l'expérience utilisateur. D’autant plus que ces fichiers sont souvent chargés en priorité dans le head des pages et que, contrairement à d’autres ressources, ils bloquent le rendu de la page.


L'optimisation de ces fichiers est donc cruciale et ce quel que soit le contexte de navigation (qualité du réseau, modèle et taille d'ordinateur ou de mobile, navigateur, zone géographique…).


En savoir plus sur l'optimisation des fichiers CSS pour améliorer la performance de vos pages web.


Fasterize optimise vos fichiers CSS en intervenant sur les deux critères :

  • le nombre de fichiers CSS
  • La taille des fichiers CSS


Comment utiliser l'application "CSS" ?


Minification CSS pour réduire la taille des fichiers

La minification CSS consiste à réduire la taille des fichiers CSS en supprimant les espaces, les commentaires et d'autres caractères non essentiels. Fasterize effectue cette minification par défaut, mais il est possible, via les configurations, d’exclure certains fichiers de la minification.


Bundling pour réduire le nombre de fichiers

L'option Bundle CSS permet de regrouper plusieurs fichiers CSS en un seul fichier, réduisant ainsi le nombre de requêtes HTTP nécessaires pour charger une page web. 

Le regroupement est actuellement limité à un paquet de 4 fichiers. A noter que le nouveau fichier généré garde en commentaire les URLs des fichiers originaux.


Move On Top

Comme le CSS est nécessaire pour le rendu de la page, Fasterize permet, avec l’option Move On Top, de déplacer les déclarations de fichiers de feuilles de style en haut de la page HTML. Ce qui favorise un chargement plus rapide des feuilles de style et un rendu plus stable de la page, évitant ainsi des éventuels shifts qui pourraient dégrader le CLS (Cumulative Layout Shift).



Avantage webperf

Optimiser les fichiers CSS permet d’améliorer les métriques de vitesse de chargement de votre site (FCP, LCP, Speed Index) et de réduire le CLS (Cumulative Layout Shift).

Cet article a-t-il été utile ?

C'est super !

Merci pour votre commentaire

Désolé ! Nous n'avons pas pu vous être utile

Merci pour votre commentaire

Dites-nous comment nous pouvons améliorer cet article !

Sélectionner au moins l'une des raisons
La vérification CAPTCHA est requise.

Commentaires envoyés

Nous apprécions vos efforts et nous allons corriger l'article