J’ai longtemps cherché la meilleure façon d’accélérer les temps de chargement de mes sites WordPress. Dernièrement, j’ai opté pour une solution qui repose sur le cache LiteSpeed, le CDN Quic.Cloud, et les DNS de Cloudflare. Cette méthode m’apporte de bons résultats, y compris sur les signaux web essentiels de Google.
Tout éditeur d’un site web recherche forcément à optimiser les temps de chargement de son site. En effet, Google considère que la vitesse d’un site est importante pour les visiteurs, et donc Google en tient compte dans son référencement des sites web.
WordPress est le CMS le plus répandu sur le web, et il existe de nombreuses façons d’accélérer WordPress. J’ai longtemps utilisé de multiples plugins pour tenter d’accélérer WordPress du mieux possible (WP Super Cache, Autoptimize, etc.) , mais sans toujours obtenir les résultats escomptés.
Alors que j’avais depuis quelques temps des signaux web essentiels perfectibles sur la Google Search Console, j’ai voulu me réattaquer à cette problématique.
Après pas mal de recherches, j’ai fini par opter par la méthode ci-dessous, qui m’a permis d’accélérer mes temps de chargement. Cette méthode a aussi l’avantage de réduire grandement le nombre de plugins utilisés dans cette optimisation. Ah oui, et elle est aussi gratuite, ce qui est plutôt sympa.
Comment accélérer WordPress avec les DNS Cloudflare, le cache LiteSpeed, et le CDN Quic.Cloud
Important : il vous faudra impérativement un hébergement compatible avec le cache LiteSpeed. Je suis personnellement chez o2switch, qui propose un hébergement de qualité pour un prix compétitif, et qui intègre le support de LiteSpeed cache.
1. Passage des DNS sur Cloudflare
Je précise ici que dans cette méthode, on ne va utiliser Cloudflare que pour ses services DNS. Bien que Cloudflare propose un système de cache, nous ne l’utilisons pas dans cette méthode car nous optons pour le cache LiteSpeed (activer le cache de Cloudflare en complément de LiteSpeed serait contreproductif et pourrait même amener à des erreurs).
Création du site dans Cloudflare et import des enregistrements DNS du site
Les DNS font le lien entre le nom du site (son adresse web en lettres), et l’adresse IP correspondante de son hébergement. Avoir des DNS performants est donc important pour éviter que cela ne retarde inutilement le chargement du site. Et en la matière, Cloudflare propose les DNS les plus rapides au monde, comme le montre le site DNS Perf.
Pour commencer, il faut créer un compte gratuit sur Cloudflare, ou utiliser un compte déjà existant si vous en disposez d’un.
Une fois connecté au compte Cloudflare, il est possible de changer la langue en haut à droite, si jamais le site d’affiche en anglais.
Procédez ensuite de la manière suivante :
- Dans sites web en haut à gauche, créer un nouveau site et donner son adresse web
- Choisir le plan gratuit
- Attendre que Cloudlare récupère les enregistrements DNS du site
- Cliquer ensuite sur continuer
Modification des DNS par ceux de Cloudflare sur le registrar
Cloudflare demande alors à ce que l’on modifie les serveurs DNS de notre site, avec les serveurs DNS de Cloudflare. Cette opération se fait depuis le registrar (bureau d’enregistrement) sur lequel vous avez commandé l’adresse de votre site internet.
Sur o2switch, il suffit de suivre cette méthode. Une fois arrivé sur l’écran de changement des DNS, on y renseigne dans les serveurs DNS 1 et 2, les adresses indiquées par Cloudflare (qui se terminent par ns.cloudflare.com)
Il ne reste plus qu’à attendre de quelques heures à 24h (parfois un peu plus) pour que la modification de DNS se propage dans le monde entier. Pas d’inquiétude, le site reste disponible pendant ce délai.
2. Mise en place du cache LiteSpeed
Installation de l’extension WordPress et activation du cache Litespeed sur l’hébergement web
On installe l’extension Litespeed Cache pour WordPress sur le site web. Rien de compliqué. A noter que cette extension dispose de plus de 5 millions d’installations actives à date de rédaction de cet article, et une note générale de 5/5, ce qui montre le fort intérêt de la communauté WordPress sur ce système de cache.
Il faut ensuite activer le système de cache LiteSpeed sur l’hébergement web. Sur o2switch, il m’a suffi d’aller sur cPanel, dans le module LiteSpeed LS Cache, puis de cliquer sur le bouton « Activer LSCache » pour mon site.
Tant qu’on est dans la partie hébergement web, on en profite pour activer aussi memcached car on en aura besoin par la suite pour optimiser les paramètres de l’extension LiteSpeed.
Sur o2switch, l’extension n’était pas activée en ce qui me concerne, j’ai donc procédé ainsi :
- Depuis cPanel, module Memcached, lancer memcached
- Dans les extensions php (cPanel, module version php), cocher l’extension memcached et enregistrer
Paramétrage de l’extension LiteSpeed Cache
L’extension LiteSpeed Cache propose plusieurs préréglages par défaut. Je recommande le préréglage « avancé », car c’est celui qui permet d’optimiser le plus facilement l’ensemble des éléments, sans trop de risque pour autant de casser la mise en page ou générer des erreurs sur le site.
Pour l’utiliser, il faut demander une clé pour le site web, sur l’onglet « Général » de l’extension, dans la rubrique « clé de domaine ». Pas d’inquiétude, cela est gratuit, et cela a été rapide pour moi, juste quelques minutes. Vous pouvez recharger la page web de temps en temps pour vérifier si votre clé a été reçue dans l’intervalle de temps, après avoir fait la demande.
En complément des préréglages du mode « avancé », j’ai modifié les paramètres suivants :
- Réglages du cache objet : mettre sur actif la mise en cache d’objet (c’est justement pour cette option qu’on a activé memcached précédemment sur l’hébergement web dans le tuto)
- Réglages du cache navigateur : mettre sur actif le cache navigateur
- Pour les images, mettre à actif ou inactif l’optimisation sans perte en fonction de la préférence (sur actif, le poids des images sera un peu plus lourd, mais les images de meilleurs qualités pour le visiteur).
3. Activation du CDN Quic.Cloud et intégration avec les DNS de Cloudflare
LiteSpeed propose directement leur propre service CDN, appelé Quic.Cloud. J’y vois plusieurs avantages :
- L’intégration immédiate avec le système de cache (i.e. l’extension LiteSpeed) : limitation du nombre d’extensions à installer, facilité de configuration, purges des données en cache synchronisées sur le CDN
- Pouvoir profiter d’un CDN gratuit (il y a une limite d’utilisation quotidienne, mais en fonction du site il est probable que la version gratuite suffise, c’est le cas pour moi)
Il faut juste créer un compte Quic.Cloud : depuis l’onglet « général » de l’extension, il y a un bouton « lier à un compte Quic.Cloud ». Il suffit de cliquer dessus puis de créer le compte :
- renseigner une adresse mail et un mot de passe et valider
- ouvrir le lien reçu par mail pour finaliser la création du compte
Une fois le compte créé, il suffit d’aller sur l’onglet « CDN » de l’extension et passer à actif le CDN Quic.Cloud. La seconde option (CDN mapping) doit rester sur inactif.
Pour finir, il convient d’intégrer le CDN Quic.Cloud avec les DNS de Cloudflare. Normalement, l’utilisation du CDN Quic.Cloud nécessite d’utiliser leurs services de DNS mais Quic.Cloud a aussi prévu dans sa configuration le cas où on souhaite conserver les DNS chez Cloudflare (ce qui tombe bien puisque c’est ce que l’on souhaite faire justement ici !) :
- Depuis l’onglet « général » de l’extension, cliquer sur le bouton pour consulter le tableau de bord du compte Quic.Cloud. Cliquer ensuite sur le site concerné, puis sur CDN, puis sur « Enable CDN ».
- Dans les options proposées, on prend la 3ème option (« je veux continuer à utiliser les DNS de Cloudflare » => « I’m switching from Cloudflare, but I want to continue using it for DNS ») :
- Ensuite, il faut sélectionner la 1ère option : « I want to use Cloudflare Integration ».
Cette méthode permet d’aller écrire les enregistrements qu’il faut sur nos DNS de Cloudflare, de manière automatique pour éviter tout risque d’erreur. C’est parfait, mais pour faire cela, il faut autoriser Quic.Cloud à écrire dans nos DNS Cloudflare via un jeton API. C’est la dernière étape pour finaliser l’opération :
- sur le compte de Cloudflare, cliquer en haut à droite sur le profil
- sur la barre latérale de gauche, cliquer sur « jetons API » puis « créer un jeton »
- choisir le modèle « éditer une zone DNS »
- dans la zone de ressource, choisir : « inclut » la « zone spécifique » et choisir ensuite le nom du site concerné
- valider ensuite la création du jeton
En revenant sur Quic.Cloud, il suffit de renseigner le jeton généré puis de cliquer sur « Continue ».
Quic.Cloud écrit alors les enregistements qu’il faut dans les DNS de Cloudflare, et effectue aussi une copie de sauvegarde avant modification. Et c’est fini ! Voici le résultat que j’ai obtenu au bout de quelques minutes, le statut à droite montre que tout est OK : le CDN Quic.Cloud est en service et intégré avec les DNS de Cloudflare.
Je vous recommande de ne pas supprimer le jeton API de Cloudflare depuis le compte Cloudflare. En effet, si un jour vous décidez d’abandonner Quic.Cloud, il vous suffira de revenir en arrière directement depuis Quic.Cloud : grâce à la sauvegarde qu’il a effectué, il pourra ré-écrire les précédentes données sur les DNS de Cloudflare.
FAQ : comment rendre son site wordpress plus rapide
Dans ce paragraphe, je détaille les principaux leviers permettant d’accélérer WordPress, indépendamment de la méthode choisie, pour mieux comprendre le sujet.
Bien évidemment, la méthode que j’expose dans la 1ère partie de l’article permet de répondre à l’ensemble de ces principes.
1. Optimiser les temps de réponse des serveurs DNS
Les DNS, comme Domain Name System, sont souvent considérés comme une sorte d’annuaire téléphonique de l’internet.
En effet, un site est accessible par son adresse IP. Mais pour la navigation, il nous serait impossible de retenir l’adresse IP d’un site. C’est là qu’intervient le DNS : il assure la correspondance entre l’adresse web d’un site (i.e. un nom avec des lettres), avec son adresse IP.
Lorsque l’on saisit une adresse web d’un site dans la barre de son navigateur, notre navigateur interroge les DNS afin de rechercher l’adresse IP du site, puis consulte le site à partir de l’adresse récupérée.
Or, en fonction du registrar (la société par laquelle on a réservé le nom de domaine pour notre site web), le DNS utilisé peut être plus ou moins lent. C’est pour ça qu’il est essentiel de bien choisir son fournisseur DNS utilisé pour son site. Mais pas d’inquiétude, comme on l’a vu dans la méthode exposée dans la 1ère partie de l’article, il n’est pas nécessaire de transférer son nom de domaine sur un autre registrar.
2. Utiliser un système de cache sur son site WordPress
Comme tout site moderne, WordPress génère les pages web de manière dynamique. Cela signifie qu’à chaque consultation d’une page, le code web (php et javascript) de WordPress et du thème est exécuté, la base de donnée est sollicitée pour récupérer le contenu (articles, etc.), puis la page est générée pour le visiteur.
Ce processus prend forcément du temps et de la ressource sur le serveur. A une époque ancienne (vraiment ancienne), les pages web des sites étaient statiques. Il s’agissait de page au format html, qui comportait à la fois le contenu et la mise en page.
Le principe d’un système de cache sous WordPress est d’enregistrer une page html statique, après génération par WordPress au travers de l’exécution du code. Ainsi, lorsqu’un prochain visiteur accède à la même page, le système de cache lui servira la page statique, permettant ainsi de gagner du temps.
3. Optimiser et minifier les css, et servir un css critique
Sous WordPress, les fichiers css sont utilisés pour la mise en page du site. Ce sont eux qui comportent par exemple les informations sur la police choisie, la couleur, la taille, etc. Pour chaque élément d’un site web, il y a quelque part du code css qui définit sa mise en page.
Ces fichiers css sont nécessaires pour l’ordinateur qui consulte le site web. Et ces fichiers peuvent vite être nombreux et prendre du poids.
Pour alléger ces fichiers, il est possible de les minifier. La minification consiste à enlever dans les fichiers css les espaces et les commentaires. Ces espaces et commentaires nous sont nécessaires en tant qu’éditeur de site, afin d’aider à relire un ficher pour le modifier par exemple. Mais ils ne servent à rien pour l’ordinateur qui visite le site. En les enlevant dans le fichier transmis au visiteur, on gagne ainsi du poids, et donc on améliore le temps de chargement.
L’optimisation quant à elle consiste à combiner tous les fichiers css en un unique fichier css. Mais à noter que combiner les fichiers css peut être contreproductif :
- Sur un site en HTTP1.1, les fichiers css doivent être chargés par le visiteur les uns après les autres. Dans ce cas, il y a un intérêt à vouloir combiner les fichiers css en un seul ficher.
- Sur un site en HTTP2, les fichiers css peuvent être chargés en parallèle. Par conséquent, pour un site en HTTP2, il est préférable de conserver de multiples petits fichiers css, plutôt que de vouloir les combiner en un fichier unique.
Pour vérifier si un site est servi en HTTP1 ou HTTP2, j’utilise simplement cet outil de keycdn.
Enfin, pour optimiser pleinement le css, on cherchera à fournir un « css critique » : il s’agit du css qui comporte toutes les infos de mise en page au dessus de la ligne de flottaison de l’écran. Ainsi, lors du chargement de la page, on donne en priorité le css qui est nécessaire à afficher ce qui est présent sur la page. Puis dans un 2nd temps le css qui sera utilisé sur la partie non visible de la page. Cela permet de ne pas ralentir l’affichage initial de la page.
4. Optimiser et minifier le js
Les fichiers javascript comportent du code également utilisé pour l’interaction du visiteur avec la page. Comme pour le css, nos sites disposent de multiples fichiers javascript.
Le principe d’optimisation est le même qu’avec le css :
- minifier les fichiers js (suppression des espaces et commentaires) pour en réduire le poids
- combiner les fichiers js en un unique fichier (pour un site en HTTP1, non recommandé pour un site en HTTP2)
- chercher à fournir au chargement de la page uniquement les javascripts indispensables, puis charger les autres javascript dans un 2nd temps pour ne pas ralentir l’affichage initial de la page chez le visiteur. Ainsi, on privilégie d’abord le chargement des css et html, puis ensuite les javascripts.
5. Optimiser les images
Les images ont nécessairement un poids important, c’est pourquoi il est indispensable de les optimiser.
Il existe des outils spécialisés pour réduire le poids de l’image tout en évitant une dégradation significative de la qualité de l’image pour l’oeil humain.
Ces outils proposent aussi de nouveaux formats d’image performants, tels que le format webp (plus performant que le format jpg et png).
Enfin, le « lazy load » permet de charger les images au fur et à mesure du défilement par le visiteur sur l’article. Cela évite de charger toutes les images de l’article au début alors qu’elles ne sont pas forcément visibles encore par le visiteur.
6. Utiliser un CDN
Un CDN (Content Delivery Network) permet de dupliquer les différents fichiers de son site (images, css, js, etc.) sur de multiples serveurs dans le monde. Cela permet de livrer les ressources de son site en s’assurant d’avoir un serveur proche de la localisation géographique du visiteur.
Concernant ce point, j’ai tendance à penser qu’un CDN n’est pas aussi impératif pour un site français que pou un site anglais. En effet, sur un site français, une grande partie des visites est issue de France métropolitaine. Néanmoins certains visiteurs restent éloignés de la France métropolitaine (Québec, DOM-TOM, les francophones dans différents pays).
Pour cette raison, et aussi parce que le CDN fait partie des bonnes pratiques d’optimisation pour accélérer WordPress, il est toujours bénéfique de mettre en place un CDN. La méthode que j’expose dans la 1ère partie de l’article intègre un CDN gratuit au travers des services de Quic.Cloud.
Photo à la une : image générée par IA