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?

Catégories : Performance

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.

0 commentaire

Laisser un commentaire

Emplacement de l’avatar

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

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.

The reCAPTCHA verification period has expired. Please reload the page.