0

Mini-guide WebPerf n°2: Gestion du CSS

Bonjour les amis.

Une courte note sur les bonnes pratiques d’utilisation de vos feuilles de styles.

Réduction des CSS

J’imagine que la plupart de vos styles CSS contient de nombreuses lignes indentées afin de vous permettre une facilité de lecture et de développement.

.monstyle{
    display:block;
    width:100%;
    height:auto
}

C’est évidemment une très bonne chose, mais qui n’est pas vraiment utile pour nos chers amis les navigateurs. Sachez qu’un navigateur ne tient pas compte de vos indentations. Il lit votre fichier linéairement, espace ou pas espace.

Il est donc conseillé de réduire vos styles avant la mise en production afin de réduire sa taille. (Gardez tout de même une version indentée de côté pour pouvoir éditer facilement vos styles aux besoins)

Pas besoin de vous ennuyer à réduire vos fichiers de style à la main, des outils très performants vous permettront de le faire automatiquement, comme par exemple, Minifier CSS. Il en existe beaucoup d’autres, à vous de faire votre choix.

Vous obtiendrez alors un fichier ressemblant à ça:

.monstyle{display:block;width:100%;height:auto}

Combinaison de vos fichiers CSS.

Une autre point important en terme d’optimisation est la combinaison de vos fichiers CSS.

On voit parfois sur certains sites une multitude de fichiers CSS chargés (main.css, menu.css, contenu.css, etc…).

L’idée peut paraître bonne. Sachez que chaque fichier déclaré dans votre site envoie une requête à votre serveur. Imaginons que notre site charge 10 styles CSS différents, vous demanderez donc 10 fois à votre serveur de charger un fichier. L’idée devient tout de suite beaucoup moins bonne…

Privilégiez donc la combinaison de vos styles en un seul fichier (que vous compressez en plus grâce à l’outil fourni au dessus) plutôt que plusieurs CSS. Cette astuce prend encore plus d’importance pour les sites à fort trafic.

A bientôt les amis !

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.