C’est l’ère de la vitesse et de WordPress!

Vous conviendrez que personne n’aime un site lent. Un visiteur ne passera jamais plus de trois secondes sur un site, s’il charge à la vitesse d’un galop de tortue.

Le géant des moteurs de recherche, Google, classe les sites chargés en moins de deux secondes dans ses pages de résultats de moteur de recherche (SERPs) et WordPress propulse plus de 28 pour cent de l’ensemble du Web. Il existe un certain nombre de techniques pour accélérer un site WordPress et l’un d’entre eux est le cache.

Chaque fois qu’un visiteur visite un site, le navigateur envoie une requête au serveur du site et le serveur répond en conséquence. Cependant, si un site Web a un mélange de données dynamiques et statiques à afficher, il faudra plus de temps pour obtenir une réponse du serveur. Cela augmente le temps de réponse du serveur, ce qui augmente le temps de chargement des pages.

Les navigateurs passent presque 80% du temps à récupérer des composants, y compris des images, des feuilles de style et des scripts. La réduction du nombre de requêtes HTTP contribue à réduire le temps de réponse du serveur (comme par exemple mettre en place du Lazy loading 😉 ).

Le contenu statique charge toujours plus vite que le contenu dynamique. Que diriez-vous de séparer le statique du dynamique ? C’est là que le cache est utile. Le cache est la donnée généralement stockée sur la machine de l’utilisateur. La plupart du temps, il inclut les données statiques qui ne changent pas rapidement comme les images, les fichiers CSS, JS et HTML. Ainsi, chaque fois qu’un navigateur de visiteur retourne une demande, les données statiques sont chargées via le cache et les données dynamiques sont servies par le serveur. De cette façon, vous pouvez réduire le nombre de requêtes envoyées au serveur afin que le visiteur puisse obtenir de meilleurs temps de chargement de la page.

Dans de nombreux cas, le cache peut également être stocké sur le serveur.

Il existe un certain nombre de techniques de mise en cache qui peuvent être utilisées pour accélérer un site WordPress. Presque tous les plugins de mise en cache utilisent les techniques de base ci-dessous.

Mise en cache du navigateur

Le cache du navigateur est le stockage temporaire des fichiers téléchargés par les navigateurs. Lorsqu’un visiteur revisite le site, le navigateur vérifie quel contenu a été mis à jour et ne demande au serveur que le contenu mis à jour.

Cela permet de réduire le nombre de requêtes HTTP et d’économiser de la bande passante, ce qui se traduit par une expérience de chargement de pages Web plus rapide.

Composants Gzip

Gzip est considéré comme la méthode de compression la plus efficace à ce jour. Il fournit un mécanisme de compression sans perte qui signifie que les données d’origine peuvent être récupérées lors de la décompression.

Il remplace les chaînes répétées en réponse par un code de référence pour réduire la taille de la réponse, puis décompressé par le navigateur. Plus la taille du fichier est faible, plus la performance augmente.

Mettre les feuilles de style en haut

Les visuels sont un élément important d’un site Web. Il est toujours conseillé de conserver les feuilles de style dans la HEAD d’une page car ce sont des fichiers statiques et peuvent se charger rapidement. Ce type de technique est appelé Rendu progressif dans lequel le contenu est rendu à afficher le plus rapidement possible.

Cela améliore l’expérience globale de l’utilisateur et le visiteur ne perd pas son intérêt pendant que le reste de la page est en cours de chargement.

Mettre les scripts en bas

Lorsqu’un visiteur visite une page Web, le code HTML commence à être diffusé sur le navigateur Web. Et quand un navigateur rencontre une balise pour une source externe d’une image, d’un script ou d’un fichier CSS; il va commencer à télécharger ce fichier en même temps.

Si les scripts sont en bas d’une page, ils seront chargés dans le dernier. Les éléments chargés ci-dessus garantissent que quelque chose apparaîtra dans le navigateur plus rapidement avant que le visiteur ne perde son intérêt. Cela peut améliorer l’expérience utilisateur globale.

Minifier le JavaScript et le CSS

La minimisation est la pratique pour réduire la taille des fichiers HTML, CSS et JavaScript en supprimant les caractères inutiles du code comme les commentaires, la nouvelle ligne, l’espacement des blancs, etc., ce qui améliore les temps de chargement. Bien que la minification contribue à augmenter les performances d’une page Web, elle peut également casser le CSS d’un site. C’est pourquoi, il est toujours recommandé de tester la minification sur un site intermédiaire avant de l’appliquer à un site en ligne.

Combiner des fichiers CSS et JavaScript

Si vous avez un certain nombre de fichiers JavaScript, combinez-les en un seul fichier JS. Cela ne générera qu’une seule requête au serveur plutôt que d’envoyer des requêtes équivalentes au nombre de fichiers JS. De même pour les fichiers CSS, combinez tous les fichiers CSS en un seul fichier. Il existe des ressources en ligne qui vous permettront de le faire sans efforts.

Utiliser le réseau de diffusion de contenu (CDN)

Supposons, votre site WordPress a une audience mondiale et son centre de données est situé aux États-Unis. Par exemple, lorsqu’un visiteur visite le site depuis un autre coin du monde, la requête est envoyée au serveur, puis le serveur traite la requête et y répond en conséquence. Plus la distance entre le visiteur et le serveur est longue, plus le chargement d’une page Web est lent.

C’est là qu’un CDN s’avère utile.

Un CDN est un ensemble de serveurs Web répartis sur plusieurs sites géographiques pour fournir le contenu demandé à partir de ces emplacements. Il met en cache et distribue le contenu du site WordPress à travers son réseau pour une livraison plus rapide sans affecter le serveur.

Varnish Cache

Varnish Cache est un accélérateur d’applications Web qui est également connu sous le nom de reverse proxy HTTP. Pour comprendre le processus de Varnish, prenons un exemple : quand un visiteur visite un blog, le contenu du blog est extrait de la base de données, fusionné avec un modèle, traité de plusieurs façons, puis renvoyé au serveur, qui envoie le résultat final retour au navigateur demandé.

La prochaine fois qu’une requête pour ce contenu arrive du même visiteur, Varnish Cache enverra simplement la copie qu’il a déjà dans la mémoire. Le serveur, la base de données et tous les autres processus ne sont pas impliqués du tout. Ainsi, cela améliorera considérablement les performances de chargement de la page sans occuper le serveur.

Emballer!

Donc, j’ai assez parlé des techniques de mise en cache que la plupart des plugins de cache WordPress utilisent. Mais tout le monde a son propre mécanisme et ses propres configurations pour rendre un site WordPress plus rapide.

Voici les plugins de mise en cache WordPress les plus utilisés et les mieux notés qui jouent leur rôle pour contribuer au monde de WordPress.

  1. WP Rocket
  2. WP Super Cache
  3. WP Fastest Cache
  4. W3 Total Cache

Comme je l’ai dit, chaque plugin a son propre ensemble de fonctionnalités qui les séparent les uns des autres. Le choix d’un bon plugin doit être basé sur vos exigences, votre niveau d’expertise et bien sûr le budget.

Il est toujours conseillé de garder un œil sur les nouveaux plugins qui s’ajoutent au référentiel WordPress. Il est à noter que les gens de Cloudways ont lancé un plugin de mise en cache WordPress appelé Breeze en réponse aux commentaires de leurs clients.

Breeze est un plugin de cache WordPress gratuit et facile à utiliser. Outre la mise en cache, il offre également l’intégration CDN, Varnish et l’optimisation de la base de données. Cloudways affirme qu’un site WordPress hébergé via Cloudways avec Breeze intégré peut être chargé en seulement 143 ms.

Je serais intéressé de savoir quels plugins vous avez expérimentés. Et qu’est-ce qui vous convient le mieux?


siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

4 commentaires

Pascal · 13 février 2019 à 19 h 45 min

J’ai bien apprécié la lecture de l’article, et du blog en général, que je découvre aujourd’hui…

Personnellement, j’ai utilisé plusieurs systèmes de mise en cache en fonction des projets et du type d’hébergement. Il y a longtemps que je n’ai pas utilisé W3 Total Cache, que je trouve lourd et complexe, sans que pour autant il ne m’apporte un plus notable dans les performances.

Donc c’est soit WP Super Cache, soit Comet Cache qui sur mon blog donne les meilleurs résultats. J’ai tenté WP Rocket que j’ai vite écarté vu qu’il casse systématiquement mes sites, quel que soit le thème utilisé.

Et au-delà du cache, j’ai Nginx comme reverse proxy. Ceci-dit, os2switch propose une solution basée sur Nginx + Varnish + Apache qui ne me laisse pas indifférent 😉

    siddhy · 15 février 2019 à 7 h 22 min

    Merci Pascal pour ce sympathique commentaire : ça fait plaisir !

    De mon côté c’est aussi WP Super Cache ou WP Rocket que j’utilise. C’est vrai que WP Rocket a pu faire planter certains de mes sites mais c’est quand même rare et c’est surtout lorsque le thème n’était pas de très bonne facture. Lorsqu’il fonctionne Wp Rocket est super puissant je trouve !

    Je ne connaissais pas Comet Cache : je vais aller voir ça de plus près merci ! On m’a également parlé tout récemment de os2switch en bien et je pense que je vais également aller voir ce qu’ils proposent 🙂

Yves · 21 février 2019 à 15 h 04 min

Je suis en plein dans ces problématiques également ! D’abord ne pas oublier de mentionner les sites qui testent le votre pour pointer les améliorations possibles et suivre ses progrès : https://gtmetrix.com/ est génial pour ça.

Première chose : Optimiser les images ! https://squoosh.app/ fait des merveilles pour un usage perso et les gains sont souvent impresionnants.

Concernant les plugins de cache, mes préférés sont “WP super cache” pour sa capacité à mettre en cache les pages des utilisateurs connectés même si sa documentation laisse à désirer. “Cache enabler” a peu d’option mais donne un résultat rapide dans mes tests.

En complément d’un de ces deux plugins j’utilise Autoptimize (minification et concaténation du html/js/css) et des règles de caches pour le navigateur dans le fichier .htaccess

    siddhy · 22 février 2019 à 13 h 02 min

    Pour ma part j’utilise OptimiZilla pour la compression des images. Merci pour le lien j’irai comparer ça !

    Pour la minification et la concaténation je me sers plutot de webpack et de toute la suite pour mes développements. Pour mes sites persos je vais aller voir ce que donne ce plugin (oui je ne fais pas de dev pour mes sites dsl ^^ la création d’article me prend déjà pas mal de temps 🙂 )

    Dernier petit point, pour le htaccess, c’est quand même mieux de mettre tes directives directement dans le vhost car apache doit lire le fichier à chaque hit. Même si c’est très rapide, autant s’en passer si on peut 😉

    Merci pour ton commentaire en tous cas !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *