Agitez votre trafic avec Oseox, Plus de 400 cours gratuits.
Profitez de nos meilleurs conseils, Recevez notre newsletter pro !
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
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
Une question ? Venez la poser sur notre forum Web Analytics et performance web !
A propos de l'auteur
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.
