Optimisation CSS

Eviter @import et charger les CSS le plus tôt possible

C'est un classique : il faut faire le chargement des CSS dans le header. Et la première chose à faire est d'utiliser <link> à la place de @import, c'est beaucoup plus rapide. Au passage, vérifiez que vous n'avez pas de code css directement dans les balises HTML du body, c'est complétement anti productif.

Validation du code CSS

Optimisation CSS

Avant tout, il faut valider le css. Tout comme le .js, des erreurs sont consommatrices de temps (pas grand chose, mais bon) et les étapes suivantes seront plus simples. Ce n'est pas grand chose à faire, pour peu qu'on ne soit pas trop exigeant.

Nettoyer le code CSS

Avec le temps, il arrive que pas mal de code mort traine. Un nettoyage de printemps s'impose. Supprimez donc tout ce qui ne sert plus à rien. On y gagne en lisibilité et en taille. C'est parfois assez long à faire manuellement aussi rassurez vous, il existe un plugin pour firefox qui automatise le travail : Dust-me.

Minification un fichier CSS

Maintenant que votre code est propre, on peut aller un peu plus loin. De la même manière que le HTML ou le javascript externe, minifier un gros CSS permet de gagner en taille, donc en temps de chargement.

Vous pouvez utiliser YUI Compressor pour ce faire, c'est simple et rapide. Au passage, vous aurez bien sûr regroupé les 40 fichiers css que vous utilisiez précédemment. Dans certains cas, on peut bien sur trouver de l'intérêt à en avoir plusieurs, particulièrement en cas de zones qui changent souvent, ou d'un fichier tellement gros qu'il devient ingérable. C'est un compromis à trouver.

Eviter les wild cards en CSS

Gros point noir du CSS, les wild cards (*,%) sont consommatrices au possible ! Evitez donc leur emploi au maximum.

Sources / Pour aller plus loin

Ressource Optimisation CSS

A propos de l'auteur

Jacques Terrier

Jacques Terrier AKA Cobolian : Premier site en 98, puis quelques belles références à son palmarès. Fort de son background technique et marketing, Jacques est consultant e-commerce.