Guide d'optimisation pour WordPress – Partie 4

Afin d’effectuer une comparaison, relever le poids du fichier CSS avant puis après les différentes optimisations, et indiquez le dans les commentaires . Effectuez une copie du fichier avant toutes modifications : on ne sait jamais !

Plan du dossier

• Optimiser l’administration WordPress
• Optimiser la Base De Donnée (BDD)
• Optimiser les images
• Optimiser la feuille de style en cascade (CSS)
• Optimiser les scripts
• Optimisations diverses
• Analyser les performances

1. Supprimer les commentaires

Tout fichier CSS et en particulier si c’est un thème graphique réalisé par des designers, est parsemé de commentaires pour aider à s’y retrouver notamment lorsque l’on met à jour le design. Pour autant, ces commentaires occupent pas mal de place dans le poids du fichier : ils peuvent être supprimés sans aucun risque. Pour les repérer, c’est très simple, ils sont encadrés par /* Exemple */.

Attention : les premières lignes du fichier CSS sont dites des commentaires mais elles sont indispensables pour WordPress : ne les supprimez pas !

2. Supprimer les styles sans propriété

Un style sans propriété ne sert strictement à rien dans votre fichier. Il se présente sous cette forme :

.style 1 {
}

3. Fusionnez les propriétés

Il existe plusieurs façons d’écrire certaines propriétés CSS. Mais certaines « façons » sont plus courtes que d’autres, et par conséquent, alourdissent moins le fichier. Par exemple, au lieu d’écrire :

.style 1 {
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
padding-top:10px;
padding-bottom:15px;
padding-left:20px;
padding-right:0px;
color:#FFFFFF;
border-color:#CCCCCC;
border-style:solid;
border-width:1px;
font-size:10px;
font-family:arial;
}

Écrivez plutôt :

.style 1 {
margin:10px 5px;
padding:10px 0 15px 20px;
color:#FFF;
border:1px solid #CCC;
font:10px arial;
}

4. Ne répétez pas du code inutilement

J’ai utilisé cette technique pour les boutons dans le header (Twitter, Demande de Tutoriel, Email et RSS). Plutôt que de recréer pour chacun d’entre-eux, le style a:link, a:hover… j’ai procédé comme ceci :

#rss {
margin:20px auto;
}
#rss a img, #rss a:visited img, #mail a img, #mail a:visited img, #twitter2 a img, #twitter2 a:visited img, #tuto a img, #tuto a:visited img {
opacity:0.5;
}
#rss a:hover img, #mail a:hover img, #twitter2 a:hover img, #tuto a:hover img {
opacity:1;
}
#mail {
margin:-75px auto;
padding-right:80px;
}
#twitter2 {
margin:25px auto;
padding-right:160px;
}
#tuto {
margin:-85px auto;
padding-right:240px;
}

5. Le positionnement du fichier CSS

Placez toujours la ligne de code d’appel du fichier CSS dans le header et en tête de liste des autres appels de fichiers. Ainsi, ce sera la première chose que le navigateur chargera. La ligne de code pour appeler le fichier CSS se présente ainsi :

<link rel="stylesheet" type="text/css" href="http://www.votresite.com/xxx/style.css" />

6. L’hébergement

De la même façon que pour les images, héberger toujours les feuilles de styles sur votre propre FTP.

Bonus : compressez votre fichier CSS

Le site CSS Drive propose un outil en ligne pour compresser au maximum votre feuille de style. Toutefois, même si le poids s’en trouvera fortement réduit, vous perdrez toute clarté dans votre fichier : plus de hiérarchies, de commentaires, de sauts de lignes… A vous de voir…

Conclusion

Aujourd’hui, vous devez :

• Supprimez les commentaires
• Supprimez les styles sans propriété
• Fusionnez les propriétés
• Ne pas répétez du code inutilement
• Bien positionner l’appel à votre fichier CSS
• Héberger sur votre FTP le(s) fichier(s)
• Compressez la feuille de style pour une optimisation maximale

Voilà de quoi vous occuper jusqu’à demain, où nous verrons comment optimiser les scripts de votre blog

3 commentaires pour “Guide d'optimisation pour WordPress – Partie 4”

1. Guide d’optimisation pour WordPress - Partie 7 | PROTUTS.net dit :

   2 juillet 2009 à 11 h 00 min

   [...] Guide d’optimisation pour WordPress – Partie 4 [...]

   Répondre
2. Optimiser les scripts de votre site WordPress [J+5 - 7JOPW] | Protuts v4 dit :

   30 décembre 2009 à 18 h 14 min

   [...] Optimiser la feuille de style en cascade (CSS) [...]

   Répondre
3. Analyser les performances de son blog WordPress [J+7 - 7JOPW] | Protuts v4 dit :

   30 décembre 2009 à 18 h 17 min

   [...] Optimiser la feuille de style en cascade (CSS) [...]

   Répondre