Booster votre blog WordPress: W3 Total Cache + CloudFlare

 English version available

Un blogueur WordPress a une fâcheuse tendance à installer de nombreux plugins sur son blog pour ajouter des fonctionnalités et de l’interactivité. Lisez l’article Extensions WordPress de CarmaBlog pour vous en convaincre. Au fil du temps, le blog devient de plus en plus lent et long à charger. Je suis arrivé à un point où je pense qu’il fallait faire quelque chose…

Le site GTmetrix permet de calculer la performance de n’importe quel site en lui assignant une note globale et surtout il fournit un rapport détaillé pour vous aider à optimiser et améliorer votre note. Le but est d’obtenir un score honorable, je dirais vers les 75-85% ce qui correspond à des notes entre B et C. Pour CarmaBlog, le résultat était peu glorieux avec un résultat proche des 60% et donc du D, le temps de chargement de la page d’accueil (soit 3 articles) autour des 6-7 secondes était franchement tout juste passable.

Un plugin de gestion de cache: W3 Total Cache

En cette fin d’année, j’ai donc décidé de m’attaquer directement au problème en installant un plugin WordPress pour ajouter la gestion de cache. Pour ceux qui ne connaissent pas, un cache est un endroit (généralement de l’espace disque directement sur le serveur) où l’on stocke les pages déjà pré-calculées. Le serveur affiche directement cette page plutôt que de recalculer l’original ce qui améliore sensiblement les performances. Si vous modifiez la page, il faut alors penser à purger le cache pour que les modifications soient visibles. Pour être honnête, j’étais un peu récalcitrant au début de peur de casser mon site, mais son faible résultat sous GTmetrix m’a un peu poussé.

Mon choix s’est finalement porté sur le plugin W3 Total Cache très populaire. Mon choix est un peu arbitraire, en fait je me suis basé seulement sur le nombre d’utilisateurs et les avis favorables. Pour ce genre de plugin, la configuration est très importante et c’est sans doute la partie la plus délicate. Il faut y aller pas à pas et prendre son mal en patience… Le meilleur moyen de tout casser et d’activer toutes les optimisations en même temps et ensuite de voir le résultat (mais si vous avez l’amour du risque, c’est aussi une bonne option…).

Finalement, j’ai pu activer la majorité des optimisations. Je me suis tout de même rendu compte que la minimisation des fichiers JS faisait littéralement planter le navigateur sur certains articles (je l’ai donc naturellement désactivée). Aussi, pour une raison inconnue, le cache des pages en utilisant l’option « Disk:enhanced » engendrait des problèmes d’encoding (ah! ces fameux caractères français!) alors que « Disk:Basics » non, j’ai donc opté pour la seconde option, même si elle est moins efficace.

En fouillant la configuration, je me suis rendu compte que W3 Total Cache supportait lui-même des extensions, notamment une extension pour Feedburner et une extension pour WordPress SEO. Comme je les utilise tous les deux, cela tombait bien.

Des optimisations manuelles sur les images

Une fois la gestion de cache mise en place et correctement configurée, j’ai pu noter une progression des performances significatives, mais pas transcendantes. Le site GTmetrix donne aussi de nombreux indicateurs pour améliorer les performances, voici les deux actions manuelles que j’ai réalisées:

• Optimisation des images. GTmetrix vous fournit les images optimisées que vous pouvez télécharger et utiliser pour remplacer vos anciennes images, vous gagnez facilement 50% de taille sans perte de qualité… Bluffant! Imaginez le gain apporté sur quelques images de 200-300 ko. Aussi, je vous conseille de bookmarker le site TinyPNG, une aide précieuse pour faire maigrir vos prochaines images. Cette optimisation est particulièrement importante pour les images communes, celles situées dans le header, footer ou autres sidebars… et qui seront forcément chargées lorsque l’on navigue sur votre site.
• Ajout des dimensions sur les images. Les attributs width et height sur les balises img. On n’y pense pas forcément, mais cela évite au navigateur de faire le calcul à votre place et donc cela augmente les performances. De plus, la place occupée par les images est déjà définie ce qui évite de faire « bouger » la page ou la scrollbar (si vous n’avez pas compris, voyez cela comme un point positif).

Ce sont les deux grandes optimisations que j’ai dû faire manuellement, W3 Total Cache gère le reste lui-même de manière automatique.

Un CDN gratuit: CloudFlare

Seconde étape, je vois la possibilité de coupler CloudFlare à W3 Total Cache grâce à une extension interne. Je vais voir du côté de CloudFlare. En fait, j’en avais déjà entendu parler, mais sans plus.

Bonne nouvelle, ils ont une offre gratuite et il n’y a pas de pub ni de limitations particulières (pour un blog perso comme le mien en tout cas). Mais en fait c’est quoi? CloudFlare agit comme une interface entre le visiteur et votre hébergeur (1and1 dans mon cas) et fait office de CDN (Content Delivery Network). C’est un peu du chinois même pour moi, mais ça a l’air d’influer grandement sur les perfs et GTMetrix me conseillait l’utilisation d’un CDN alors… Par contre, je vois qu’il y a de la reconfiguration DNS à faire, brrr ça fait peur. Je ne suis pas un pro en réseau, mais le DNS (Domain Name System) est un peu comme un annuaire téléphonique, à partir du domaine, il définit l’adresse IP du serveur à contacter. Changer de DNS, c’est un peu comme changer d’adresse et si le déménagement se passe mal, vous n’êtes plus accessible. Après réflexion, je me lance, quitte à tout casser, autant le faire pendant la période de fête où le trafic sur mon site sera sûrement plus faible.

Je crée donc mon compte CloudFlare, j’ajoute le site CarmaBlog, je laisse la configuration par défaut pour la plupart des options. Je choisis une sécurité assez basse (de toute façon, ça pourra difficilement être pire qu’avant), je choisis CDN seulement pour le profil de performance, car W3 Total Cache s’occupe des optimisations, je n’ai pas envie de tester un autre profil et voir arriver des conflits (restons raisonnable). L’assistant de configuration est très bien fait et s’adresse à des novices. Puis, arrive cette fameuse configuration DNS, CloudFlare me demande de mettre à jour mes paramètres DNS côté 1and1… Oups, les choses sérieuses commencent!

C’est la phase délicate, car c’est là où on peut rendre son site parfaitement indisponible. Je me connecte fébrilement à mon compte client 1and1, sélectionne la gestion des domaines, tout un tas de messages du style « Etes-vous conscient de ce que vous faites? », je ne suis pas persuadé moi-même, mais je mets « oui » quand même et je renseigne les champs pour pointer vers les deux nouveaux DNS de CloudFlare. Le changement DNS peut prendre entre 1h et 48h, c’est de la configuration réseau, c’est au-delà de mes compétences, je confirme donc mon choix. Dans la foulée, j’active l’extension interne CloudFlare de W3 Total Cache et je renseigne les champs pour faire le lien avec mon compte… Il est déjà tard, je me couche.

Le lendemain matin, premier réflexe, je vais sur le blog. Ouf, il est toujours disponible. Je note déjà une certaine vitesse (peut-être psychologique, nous verrons dans la conclusion…). Je me connecte sur mon compte CloudFlare… Victoire! CarmaBlog est bien configuré, la reconfiguration DNS s’est bien déroulée, maintenant tout le trafic passe par CloudFlare. CloudFlare fournit un tableau de bord en indiquant les visites, les menaces (oui!), la bande passante économisée, etc. Je me pose alors la question si le fait de passer par un fournisseur tiers est un choix judicieux? Que se passera-t-il si le DNS CloudFlare tombe? Mais après réflexion, un serveur DNS tombe rarement et s’il tombe, il y a toujours le 2ème de secours pour prendre la relève. Et le problème était déjà le même avec 1and1, donc il ne devrait pas y avoir de soucis! Dans le pire des cas, je peux toujours revenir à la configuration précédente et repasser par le DNS de 1and1 en moins de 24h.

Conclusion

Je me balade un peu sur le blog pour être sûr que tout fonctionne, j’active la navigation privée pour mettre toutes les chances de côté et être certain que le navigateur n’utilise pas des données cachées. Tout fonctionne, c’est rapide et fluide, vraiment une bonne nouvelle. Je soumets à nouveau le site sur GTmetrix, et là… Je gagne nettement en performance. Je passe la barre des 80% et je me vois attribuer la note B. La note A est accessible à partir de 90%, mais c’est un score difficilement atteignable si votre blog a pas mal de plugins activés et utilise un thème assez complexe.

Après toutes ces optimisations, je suis passé d’une page à charger de 1.2 mo à 800 ko (cela dépend bien évidemment des images des articles, mais j’ai fait la comparaison sur la même page pour me donner une bonne idée), cela fait un gain de 33%. Le nombre de requêtes quant à lui est passé de plus de 100 à environ 65 (grâce à la combinaison des fichiers CSS et JS entre autres). J’avais déjà noté un temps de chargement plus rapide avec W3 Total Cache, mais avec CloudFlare en plus, je suis passé en dessous de la barre des 3 secondes contre 6-7 secondes auparavant (soit un peu plus de 50% de gain).

Le combo W3 Total Cache + CloudFlare marche vraiment du tonnerre! Cet article est davantage un retour d’expérience qu’un tutoriel, mais vous trouverez toutes les ressources nécessaires sur internet si vous décidez vous aussi de vous lancer.

Non seulement mon hébergeur doit être soulagé, car une bonne partie de la bande passante est déportée vers les serveurs de CloudFlare (architecture bien plus puissante), mais mes visiteurs aussi, car la page s’affiche bien plus rapidement. Aujourd’hui, la seule question que je me pose c’est: pourquoi ne l’ai-je pas fait plus tôt?