Agilité, Développement Java, Nouvelles technologies et plus…
  • rss
  • Accueil
  • Management
  • Programmation agile
  • Technologie
  • Linux
  • Evénement
  • App Android
  • Contact
  • A propos de l'auteur
  • English
  • Francais

Booster votre blog WordPress: W3 Total Cache + CloudFlare

Fabian Piau | dimanche 28 décembre 2014 - 18:00
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 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…).

Logo W3 Total Cache

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.

Logo CloudFlare

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.

Foncez!

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?

Articles similaires

Mobile devicesUne version mobile de votre Blog WordPress WordPressExtensions WordPress de CarmaBlog Clean browser cacheLes fichiers CSS et Javascript jouent à cache-cache avec les navigateurs client wordpress-hackerConseils pour sécuriser votre site WordPress
Commentaires
4 Commentaires »
Catégories
Technologie
Tags
cache, cloudflare, dns, performance, w3 total cache, wordpress
Flux rss des commentaires Flux rss des commentaires
Page 1 sur 11
Télécharger l'app CarmaBlog

Flux RSS

  • Flux RSS RSS - Articles
  • Flux RSS RSS - Commentaires

Articles les plus vus

  • Changer la langue de Firefox - 115 579 vues
  • Réaliser un sondage en ligne avec Google Forms / Drive / Docs - 63 166 vues
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - 52 403 vues
  • Personnaliser Gnome 3 (Shell) - 30 017 vues
  • La signification d’URL, URI et URN - 17 251 vues
  • Java EE & CDI vs. Spring - 15 442 vues
  • Open Street Map, une meilleure carte que Google Maps? - 14 648 vues
  • Comparaison NoSQL: Couchbase et MongoDB - 14 082 vues
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 13 087 vues
  • API, REST, JSON, XML, HTTP, URI… Vous parlez quelle langue en fait? - 12 718 vues

Commentaires récents

  • Pauline sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsMerci Fabian, mais le but étant que nos clients pu…
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsProbablement mais ces options sont en général paya…
  • Pauline sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour Fabian, Merci de votre retour, oui j'avais…
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour Pauline, ce n'est pas possible de créer un…
  • Pauline sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour, Je suis en train de créer un Google Forms…

Articles récents

  • Comment écrire un article de blog? En tout cas à ma façon! - Il y a 3 mois et 2 semaines
  • Attaques de robots: vous n’êtes pas seul… - Il y a 1 an et 11 mois
  • Flagger – Monitorer vos déploiements Canary avec Grafana - Il y a 2 ans et 8 mois
  • Flagger – Déploiements Canary sur Kubernetes - Il y a 2 ans et 10 mois
  • Flagger – Premiers pas avec Istio et Kubernetes - Il y a 2 ans et 10 mois
  • CoderDojo Expedia à Londres - Il y a 3 ans et 7 mois
  • Etre bénévole à Devoxx4Kids - Il y a 3 ans et 10 mois
  • Une migration Java 11 réussie - Il y a 4 ans et 2 mois
  • Conseils pour sécuriser votre site WordPress - Il y a 4 ans et 5 mois
  • Devoxx UK 2018 – Jour 2 - Il y a 4 ans et 9 mois
  • Devoxx UK 2018 – Jour 1 - Il y a 4 ans et 9 mois
  • Wise, Revolut et Monzo, une petite révolution dans le monde des expatriés et voyageurs - Il y a 5 ans et 1 mois
  • Autocomplétion pour Git - Il y a 5 ans et 10 mois
  • Swagger, la documentation API automatisée - Il y a 6 ans et 2 semaines
  • Architecture Microservices – Les bonnes pratiques - Il y a 6 ans et 5 mois
Offre moi un café

Langue

  • Français
  • English

Suivez-moi!

Suivez-moi sur Linkedin
Suivez-moi sur Twitter
Suivez-moi sur Stackoverflow
Suivez-moi sur Github
Suivez-moi sur Rss
Link to my Contact

Abonnement email

Saisissez votre adresse email pour être informé des nouveaux articles.

Étiquettes

.net agile agilité android bash blog bonnes pratiques cache cloud conférence css devoxx docker développeur eclipse extreme programming firefox flagger google helm hibernate informatique intégration continue istio java jug kubernetes londres mobilité informatique métier outil panorama partage performance plugin programmeur script société spring sécurité tdd test ubuntu windows wordpress

Liens

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Catégories

  • Evénement (15)
  • Linux (3)
  • Management (8)
  • Programmation agile (29)
  • Technologie (45)

Archives

  • décembre 2022 (1)
  • avril 2021 (1)
  • juin 2020 (1)
  • mai 2020 (2)
  • juillet 2019 (1)
  • mai 2019 (1)
  • décembre 2018 (1)
  • octobre 2018 (1)
  • juin 2018 (1)
  • mai 2018 (1)
  • janvier 2018 (1)
  • mai 2017 (1)
  • mars 2017 (1)
  • octobre 2016 (1)
  • avril 2016 (2)
  • mars 2016 (1)
  • novembre 2015 (1)
  • mai 2015 (1)
  • février 2015 (1)
  • décembre 2014 (1)
  • novembre 2014 (1)
  • septembre 2014 (2)
  • août 2014 (1)
  • juillet 2014 (2)
  • juin 2014 (1)
  • avril 2014 (1)
  • mars 2014 (1)
  • février 2014 (2)
  • janvier 2014 (1)
  • décembre 2013 (1)
  • novembre 2013 (1)
  • octobre 2013 (3)
  • septembre 2013 (5)
  • juillet 2013 (1)
  • juin 2013 (1)
  • mai 2013 (1)
  • avril 2013 (1)
  • mars 2013 (2)
  • février 2013 (1)
  • janvier 2013 (2)
  • décembre 2012 (2)
  • octobre 2012 (1)
  • septembre 2012 (1)
  • juillet 2012 (1)
  • mai 2012 (1)
  • avril 2012 (1)
  • mars 2012 (1)
  • février 2012 (1)
  • janvier 2012 (2)
  • décembre 2011 (1)
  • novembre 2011 (2)
  • octobre 2011 (2)
  • septembre 2011 (1)
  • juillet 2011 (1)
  • juin 2011 (2)
  • avril 2011 (1)
  • mars 2011 (1)
  • février 2011 (1)
  • janvier 2011 (2)
  • novembre 2010 (2)
  • septembre 2010 (1)
  • août 2010 (1)
  • juillet 2010 (1)
  • juin 2010 (1)
  • mai 2010 (1)
  • avril 2010 (1)
  • mars 2010 (1)
  • février 2010 (1)
  • décembre 2009 (1)
  • novembre 2009 (1)
  • octobre 2009 (2)
  • septembre 2009 (2)
  • août 2009 (3)
  • juillet 2009 (1)
  • juin 2009 (2)
Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Rss
Link to my Contact
Suivez-moi sur Github
 
Fabian Piau | © 2009 - 2023
Tous droits réservés | Haut ↑