Plugins pour accélerer l'affichage de WordPress
Ce blog ayant récemment eu un pic de visites non négligeable, grâce à la mise en place d'un lien vers ma classe Chronometer sur Nexen (ce qui m'a amené plus de 310 visiteurs uniques en une journée), j'ai décidé de regarder sérieusement l'optimisation de l'affichage de mon blog.
En effet, le revers d'une popularité grandissante est un site de plus en plus lent, et une bande passante utilisée de plus en plus importante. Même si ce dernier point ne me dérange pas, hébergeant ce blog sur un serveur dédié sur-dimensionné, l'affichage lent des pages peut faire fuir mes visiteurs. Voici donc trois plugins pour accélérer très simplement notre blog WordPress.
WP-Cache : mise en cache des pages WordPress
Chaque page de votre blog se construit dynamiquement, en envoyant bon nombre de requêtes à votre base de données. Or, il est très rare qu'un billet soit amené à être modifié. Il pourrait donc être très intéressant niveau performances de délivrer à nos visiteurs une copie HTML statique (et donc sans nécessité de faire des requêtes SQL) mise à jour de temps en temps. C'est le but des systèmes de cache.
Bien qu'il existe de très nombreuses solutions de cache côté serveur, nous nous focaliserons dans cet article uniquement sur des techniques disponibles pour tout le monde, même sur les blogs WP en hébergement mutualisé, sur lesquels nous n'avons quasiment pas d'accès au serveur. La solution est donc de demander à WordPress de nous stocker une copie de nos pages. A cet effet, nous allons utiliser WP-Cache.
Au niveau des performances, celles-ci sont au rendez-vous. A titre de comparaison, voici un petit récapitulatif fait cette semaine sur mon blog.
- Sans WP-Cache, rechargement complet : 15.46s
- Sans WP-Cache, avec cache du navigateur : 4.93s
- Avec WP-Cache, rechargement complet : 8.12s
- Avec WP-Cache, avec cache du navigateur : 3.61s
Les temps semblent être démesurément grands, et pour cause. La page d'accueil, testée, contenait des billets avec des liens externes (une vidéo DailyMotion, une chanson Deezer, de la pub Google, etc.). Rassurez-vous cependant : l'utilisateur était en mesure de visiter ma page bien avant les 15 secondes indiquées. ;)
Comme on peut le constater ici (valeurs moyennes sur une population de 3 essais), on peut gagner environ 50 % de performances lors d'un premier chargement. Couplé au cache du navigateur (cache CSS, JS, etc.), le gain est plus minime, mais existe tout de même. Bref, un plugin à utiliser en premier lieu.
Concernant l'installation, celle-ci se passe en deux étapes :
- Mettre les droits d'écriture au dossier wp-content pour le serveur Apache (généralement un chmod 777,
- Créer un lien symbolique (ou à défaut recopier le fichier) :
ln -s /var/www/vhosts/jonathan-petitcolas.com/httpdocs/wp-content/plugins/wp-cache/wp-cache-phase1.php /var/www/vhosts/jonathan-petitcolas.com/httpdocs/wp-content/advanced-cache.php
- Activer le cache dans wp-config.php en y insérant la ligne suivante :
define('WP_CACHE', true);
CSS Compress
Afin de réaliser des feuilles de style lisible, on pense généralement à indenter nos différentes instructions CSS : sauts de ligne, tabulations, commentaires... Cependant, cela peut ajouter un poids non négligeable à vos pages. Le plugin CSS Compress vous permettra donc de supprimer tous ces caractères inutiles, afin de réduire la taille de vos pages.
Sur le thème choisi, qui contient pas mal de lignes de CSS, voici les améliorations (chargement uniquement du CSS) :
- Sans CSS Compress : 755 ms
- Avec CSS Compress : 495 ms
Un gain pas forcément très important, mais qui a le mérite d'exister. A tester au cas par cas cependant : les différents plugins ayant forcément une empreinte mémoire. Il faudrait donc veiller à ce que le gain en taille CSS ne soit pas contre-balancé par le temps d'exécution du plugin. ;)
Télécharger CSS Compress for WordPress
WP-Smush it : réduire la taille de vos images en direct
Ce plugin, des plus utiles, vous permettra d'optimiser un maximum vos images en direct, lors de l'upload sur le serveur, via l'interface d'administration. Comment cela fonctionne-t-il ? En supprimant les entêtes JPG inutiles, en enlevant les couleurs n'ayant pas d'intérêt pour l'affichage, etc... Bref, un must qui permet de gagner entre 10 et 30 % de poids par image. Et étant donné que les images sont généralement la partie la plus lourde d'un site, je vous laisse faire le calcul. :)
En parlant de plug-in je te conseil Syntax Highlighter pour ton blog ! ^^
Tu pourras ajouter tes codes PHP and Co directement avec la coloration syntaxique. :P
Merci pour ce plug-in, mais il est déjà installé. Tu penses bien qu'un geek développeur tel que moi ne peut pas se passer de ce genre de chose. J'ai même mis un peu de LISP si ma mémoire est bonne avec celui-ci. ^^
Bonjour,
Pourquoi WP-Cache plutôt que le fork WP Super Cache, ou un autre comme PHP Speedy WP ? As-tu fais des essais ?
Eh bien, je dois dire que je ne connaissais tout simplement pas WP Super Cache, et que je croyais que ces deux plugins étaient identiques. Apparemment, ce n'est pas le cas. Il faudrait que je teste à l'occasion.
Quant à PHP Speedy pour WordPress, il s'avère que celui-ci ne semble pas être compatible avec la version 2.7, d'après les commentaires laissés sur la page de ce plugin. Je ne l'ai donc pas essayé.
Même si dans l'absolu, je pense que le mettre en place manuellement, sans passer par un nième plugin WordPress doit être faisable, et pas forcément compliqué. :)