Accélérer la vitesse d’affichage d’un site WordPress : astuces N°3!

La feuille de style contient par défaut de nombreux détails que l’on n’utilise plus une fois l’apparence optimisée. Il est intéressant de supprimer tout ceci afin de maximiser la rapidité d’affichage de vos pages. Mais que peut-on définitivement exclure?

Nettoyer la feuille CSS

On n’imagine pas à quel point certains thèmes WordPress peuvent perdre du poids si on a le courage de mettre les mains dans le cambouis. Par défaut, de nombreuses possibilités d’apparence sont indiquées dans le CSS, permettant ainsi au blogueur de bénéficier d’une large palette de polices, de couleur et autres mises en page. La balise « quote » par exemple, n’est parfois pas utile, selon l’usage qui est fait du site : dans la feuille de style on va donc pouvoir supprimer tous les codes qui s’y réfèrent. De même que les données relatives aux commentaires lorsqu’ils ne sont pas activés. Bien sûr, il convient de sauvegarder le fichier original avant de faire un tel ménage, car peut-être l’évolution du site vous amènera-t-elle à ouvrir les commentaires un peu plus tard…

Suppression des indications? Oui!

Afin de mieux se repérer dans le fichier CSS, des annotations sont positionnées tout au long du code : pour faire perdre du poids à tout cela, on peut les effacer, en sachant que ce sera un peu plus difficile de faire des modifications par la suite… Mais chaque code indique l’élément auquel il est lié (footer, sidebar…). Vous pouvez aussi gagner en légèreté en supprimant les espaces vides : là aussi on perdra en lisibilité mais c’est pour la bonne cause. Cette étape doit donc vraiment intervenir lorsque l’apparence du site est définitive, et surtout sans oublier de conserver le fichier initial. Car il arrive toujours un moment où un rafraîchissement s’impose!

Regrouper les codes CSS

On le constate généralement dès les premières lignes de la feuille de style, par exemple :

h1,h2,h3,h4,h5,h6,p,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

Ici on indique que tous ces champs suivront le même style (c’est-à-dire les annotations en bleu). Ainsi on évite de devoir répéter séparément l’information pour chaque élément. Ensuite, la majorité des textes ne contiennent pas de balises h4, h5 et h6 : si vous n’êtes pas partisan de ces dernières, pourquoi les conserver? Autant les ôter du CSS, dans lequel elles sont semées du début à la fin… A vous donc de repérer ce qui vous est utile ou pas, et de faire le tri en conséquence.

Ce sont ainsi des paragraphes entiers qui vont disparaître : les navigateurs perdront moins de temps à parcourir le CSS, de même que les fichiers php si toutefois vous avez pris soin de les optimiser eux-aussi!

Catégorie: Création de sites web
10 avril 2012
O2switch Hébergement web