Plusieurs petits fichiers CSS ou un seul gros ?

Bonjour

Je travaille actuellement sur un site.

Au début, j'avais fait un fichier CSS contenant la mise en page générale (= les éléments communs à toutes les pages) et un fichier CSS contenant la mise en forme propre à chaque page.

Sauf qu'au final, je me suis rendu compte que ces fichiers étaient aussi nombreux que petits (< 5 ko).

Je me demande ce qui est préférable en termes de temps de chargement :
- faire un CSS entre 2 et 5 ko propre à chaque page
- faire un CSS de 20 ko comprenant tout qui sera donc chargé une seule fois

Merci !

Bonjour atoo,
L'idéal est de faire un seul fichier css qui englobe toutes les pages principales du site. Après, tu peux créer un autre fichier pour une partie de ton site qui serait plus spécifique (back office par exemple). Il est également conseillé de faire un fichier concernant les corrections à apporter en fonction des navigateurs (souvent pour ie6).

Hello,

Il y a des avantages et des inconvénients à chaque alternative, mais il faut savoir que chaque fichier nécessite une requête HTTP donc je suis plutôt d'avis d'un fichier unique.

Un seul fichier que tu divises en sections pour plus de clarté. Tu minimises ainsi le nombre de requètes HTTP.

Pour le site en production l'idéal et de "compresser" (minify) le fichier (Google PageSpeed permet de le faire simplement) afin d'optimiser encore la taille.

Pour un petit site dont la somme des css vaut 20Ko, je pense que les avantages outrepassent allegrement les inconvénients et qu'un fichier unique est plus interessant.

Comme Raphaël l'indique, l'idée est avant tout de réduire le nombre de requetes HTTP. Chaque requete prends du temps et surtout ton navigateur a un nombre limité de téléchargement en parallele autorisé, donc plus tu réduit le nombre d'élément à charger, plus ils s'afficheront vite.

Tu peux encore améliorer le chargement en compressant le css avec CSSTidy par exemple (manuellement ou grace à un script serveur qui le fait pour toi -mais c'est plus complexe à mettre en place-).

Hello,

Une autre solution peux-être également de conserver plusieurs fichiers séparés sur le serveur, puis d'utiliser un script qui va merger (et idéalement minifier) tes css pour minimiser le nombre de requête.

Attention par contre, certains scripts mal configurés ou pas adaptés peuvent avoir un effet inverse, car sollicitant trop le serveur.

Il y en a plusieurs qui font ça selon le langage côté serveur, en php j'aime bien combine.