Guide d'optimisation pour WordPress – Partie 5
En ce 5ème jour du projet 7JOPW, nous allons continuer à réduire les temps de chargement en allégeant le nombre de requêtes et le poids des pages de votre blog. Aujourd’hui, nous nous concentrerons sur les scripts.
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. Supprimez les scripts inutiles
Les scripts sont très utile dans WordPress, et dans tout site web en général. Mais, il ne faut pas en abuser. De la même façon que pour les plugins, supprimez tout ce qui n’est pas absolument indispensable pour le visiteur puis ensuite pour le site lui-même. En principe, les scripts sont situés, soient dans l’un des fichiers php de votre blog comme sidebar.php, soient dans un fichier externe js auquel vous faites appel via une ligne de code comme ceci :
<script type="text/javascript" src="http://www.votresite.com/xxx/javascript/tabs.js"></script>
2. Positionnement des scripts
Alors que la ligne de code pour appeler votre fichier CSS doit être placée dans le header, c’est l’inverse pour les scripts. Ces derniers doivent être placés dans le footer juste avant la balise </html> et après la balise </body> pour qu’ils soient chargés après le contenu de la page.
3. Externaliser vos scripts
Plutôt que de placer la totalité du code d’un script dans la sidebar par exemple, il est préférable de créer un fichier externe, fichier auquel vous ferez appel par la suite via une ligne de code. Les thèmes bien conçus ont normalement un dossier js ou javascript créé avec tous les fichiers de scripts à l’intérieur. Si ce n’est pas le cas, dans un but purement de « rangement », créer un dossier javascript à l’intérieur du dossier de votre thème.
Exemple de dossier Javascript
Ensuite, ouvrez le bloc-note Windows, collez-y le code du script, puis enregistrer le fichier. Fermez le bloc-note et renommez l’extension du fichier .txt en .js via l’explorateur Windows. Uploadez le(s) fichier(s) sur votre serveur FTP. Pour appeler votre script, ouvrez, via WordPress, le pied de page (footer.php) et appelez le script comme ceci :
<script type="text/javascript" src="http://www.votresite.com/xxx/javascript/xxx.js"></script>
4. Hébergement des scripts
Dans une très grande majorité des cas, le fichier du script n’est pas situé sur votre serveur ce qui augmente le nombre de requêtes et ralentit le chargement de votre site. Là encore, le mieux est d’héberger le maximum des scripts sur son propre serveur. Par exemple, si vous avez inséré un module Twitter sur votre site, il est préférable de placer les deux lignes encadrées par des balises scripts d’une part dans le footer, et d’autre part, de télécharger puis d’uploader dans le dossier javascript le fichier blogger.js pour accroitre considérablement la vitesse de chargement du module.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rainbowgeek.json?callback=twitterCallback2&count=5"></script>
Attention : le deuxième script ne doit pas être hébergé sur votre propre serveur : en effet, il contient vos tweets ! Il vous faudrait le mettre constamment à jour.
5. Minifier les scripts
Les CSS peuvent être compressés, et bien les scripts aussi ! Grâce au site web Javascript Compressor, vous allez pouvoir minifier tous vos scripts en deux clics de souris. Pour ce faire, copiez le code de votre script puis collez le dans le champ Paste your code. Cliquez sur Compress et admirez le résultat.
Javascript Compresseur : d'après le ratio, le poids du fichier vient d'être divisé par 2 !
Il ne vous reste plus qu’à collez le nouveau code dans votre fichier .js.
Conclusion
Petit récapitulatif des tâches à effectuer en ce jour de la fête du travail :
- Supprimez les scripts inutiles
- Bien positionner ces scripts
- Externaliser vos scripts
- Héberger sur son serveur le maximum de scripts
- Compresser les scripts
Si vous avez des questions, n’hésitez pas ! Je vous donne rendez-vous dès demain pour continuer à optimiser votre blog WordPress !
18 commentaires pour “Guide d'optimisation pour WordPress – Partie 5”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Et aussi, google qui offre ses CDN pour les framework JS :
http://code.google.com/intl/fr/apis/ajaxlibs/
L’avantage c’est de partager le même cache pour plusieurs sites web et donc gros gain de vitesse pour le visiteur.
Je ne connaissais pas : je vais étudier la chose de ce pas !
Merci pour ton conseil
Faudra peut être mettre le lien pour javascript comperssor en tous cas merci ^^
Corrigé
J’ai hâte pour demain ^^
Il y a aussi WP Minify qui fait tout ce boulot automatiquement (ainsi que pour le CSS)
@Li-an : en effet j’ai voulu en parler mais je n’ai jamais réussi à l’installer
Moi aussi j’ai eu des problèmes mais la dernière version fonctionne bien sur mon blog. Par contre, il faut faire la chasse aux plugins allergiques pour les mettre en zone sécurisée. C’est pas un plugin pour néophytes
@Li-an : « C’est pas un plugin pour néophytes » ça c’est sur :p et merci pour tes conseils
[...] Bienvenue sur Protuts.net ! Si vous êtes nouveau ici, abonnez-vous au flux RSS pour ne manquer aucun article. Paru le : 16 mai 2009 par Rainbow dans Dossiers, Wordpress. Déjà 4 commentaires et 307 lecture(s) ! Articles relatifsGuide d’optimisation pour WordPress – Partie 5 [...]
[...] Guide d’optimisation pour WordPress – Partie 5 [...]
Perso j’ai dégoté un mod permettant de fusionner Super-Cache avec Minify, ce qui réduit considérablement le chargement des blogs Wordpress, j’explique tout ça dans un article (http://bit.ly/79fxkr)
@Des Geeks et des lettres : merci, il faut que j’essaye cette technique ! Si cela fonctionne, j’en ferais peut-être un podcast sur WordPress Channel.
[...] Optimiser les scripts [...]
[...] Optimiser les scripts [...]
[...] Optimiser les scripts [...]
[...] Optimiser les scripts [...]
[...] Optimiser les scripts [...]