J’ai longtemps tâtonné dans les plugins WordPress pour obtenir la configuration la plus efficace. Mon site se trouve sur un serveur virtuel (VPS) chez Scaleway. Il coûte 3€ par mois. Au fur et à mesure que la fréquentation augmentait, je me demandais à partir de quel moment je devais faire grossir le serveur. Conclusion, c’est pas pour tout de suite, ce petit serveur sait gérer un flux énorme, et ce grâce à 2 plugins pour accélérer WordPress.
Configuration de départ
Pour faire ce test, j’ai choisi un article du site et j’utilise deux outils pour mesurer la vitesse:
– Pingdom: pour mesurer la performance unitaire du site
– Loader.io: pour mesurer la montée en charge, avec 100 requêtes par secondes durant 1mn
Au départ, le site tourne sur nginx sans option particulière (gzip est activé par défaut). Il n’y a pas de plugins pour accélérer WordPress. Le CDN Cloudflare est configuré mais en mode « développement » pour accéder directement au site.
Résultat Pingdom:
– Note: 74%
– Vitesse de la page: 5,68s
– Nombre de requêtes: 30
Résultat Loader:
– Test avorté à la 2ème seconde car le taux d’erreur est trop élevé (= le serveur met trop de à répondre)
Pas génial donc…
Plugin Autoptimize
J’ai choisi de commencer par Autoptimize. Ce plugin permet de:
– Minifier le code HTML
– Minifier et unifier en un seul fichier le code CSS
– Minifier et unifier en un seul fichier le code Javascript
Plus on a de plugins, plus on a de fichiers css et javascript qui s’ajoutent et qui dégradent la vitesse de chargement du site. Parfois, même les fichiers incluent dans les thèmes nécessitent un travail d’optimisation.
Est-ce que le plugin fait ce qu’il annonce? Oui! Et je suis le premier surpris car des plugins de minification qui ne marchent pas, j’en ai vu des dizaines. Après activé la minification HTML, CSS et Javascript, WordPress charge un seul fichier css dont le nom contient « Autoptimize ». WordPress charge toujours le fichier JQuery.js séparément (il est dans la liste blanche de autoptimize), et les autres fichiers ne font plus qu’un. Le code HTML est également minifié. C’est parfait! Ce plugin ne fait qu’une chose et le fait très bien.
Résultat Pingdom:
– Note: 85% (+9%)-
– Vitesse de la page: 1,96s _(-65%)
– Nombre de requêtes: 14 (-53%)
Résultat Loader:
– Test avorté à la 3ème seconde
C’est mieux, le site est plus rapide en accès direct. Par contre il ne tient pas encore la charge.
HTTP2
HTTP2 est une nouvelle norme. La plupart des navigateurs la supporte désormais. Je ne connais pas les détails mais cette norme est sensé rendre internet plus rapide.
HTTP2 s’active au niveau de Nginx. Il suffit d’ajouter « http2 » au niveau de la ligne « listen »:
listen 443 ssl http2;
Résultat Pingdom:
– Note: 85%
– Vitesse de la page: 1,33s (-30%)
– Nombre de requêtes: 14
Résultat Loader:
– Test avorté à la 3ème seconde car le taux d’erreur est trop élevé (= le serveur met trop de à répondre)
Encore une nette amélioration du temps de chargement unitaire. Tout ça rien qu’avec un changement de norme.
Le plugin Cache-Enabler
Générer une page à chaque accès c’est bien beau mais ce n’est pas efficace. Pour tenir une montée en charge, il va falloir générer des pages statiques qui seront envoyées aux visiteurs. J’ai choisi d’utiliser le plugin Cache-Enabler car il me paraissait simple. Il ne veut pas trop en faire comme « W3 Total Cache » par exemple. Ce plugin va uniquement créer une page html statique pour chaque page ou article du site. En configurant Nginx tel que recommandé par le plugin, le client accédera directement à la page en cache sans passer par PHP.
Pour profiter à fond du plugin, il faut donc changer sa configuration nginx tel quel préconisé par le plugin.
Il vous faut remplacer la zone « location » de votre configuration qui doit ressembler à ça:
location / {
# This is cool because no php is touched for static content.
# include the "?$args" part so non-default permalinks doesn't break when using query string
try_files $uri $uri/ /index.php?$args;
<code> }
Par le code fourni par le plugin:
set $cache_uri $request_uri;
# bypass cache if POST requests or URLs with a query string
if ($request_method = POST) {
set $cache_uri 'nullcache';
}
if ($query_string != "") {
set $cache_uri 'nullcache';
}
# bypass cache if URLs containing the following strings
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
set $cache_uri 'nullcache';
}
# bypass cache if the cookies containing the following strings
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
set $cache_uri 'nullcache';
}
# custom sub directory e.g. /blog
set $custom_subdir '';
# default html file
set $cache_enabler_uri '${custom_subdir}/wp-content/cache/cache-enabler/${http_host}${cache_uri}index.html';
# webp html file
if ($http_accept ~* "image/webp") {
set $cache_enabler_uri '${custom_subdir}/wp-content/cache/cache-enabler/${http_host}${cache_uri}index-webp.html';
}
location / {
gzip_static on; # this directive is not required but recommended
try_files $cache_enabler_uri $uri $uri/ $custom_subdir/index.php?$args;
}
Pensez bien à recharger le serveur nginx. Sur Debian/Ubuntu, c’est:
sudo service nginx reload
Résultat Pingdom:
– Note: 86% (+1%)
– Vitesse de la page: 0,736s (-44%)
– Nombre de requêtes: 14
Résultat Loader:
– Temps de réponse moyen: 118ms
– Taux d’erreur: 0%
C’est une claque! Je ne pensais pas le plugin de cache si efficace. L’article se charge en 0,7s, c’est parfait. Le serveur est capable de servir 100 demandes par secondes, durant une minute, sans broncher, sans erreur.
Pour aller plus loin
Avec 100 requêtes par secondes, le site gère sans problème. Peut-on aller plus loin? J’ai essayé 500 requêtes par seconde:
Résultat Loader @500req/s:
– Temps de réponse moyen: 121ms
– Taux d’erreur: 0%
Aucun problème pour 500. On peut pousser encore? 1000 requêtes par seconde?
Résultat Loader @1000req/s:
– Temps de réponse moyen: 182ms
– Taux d’erreur: 0,2%
Des erreurs commencent à arriver mais ça reste acceptable. Durant le test, les ressources du serveur sont à 100%, signe qu’on ne pourra pas aller beaucoup plus loin.
Plugins pour accélérer WordPress: en conclusion
L’objectif était d’améliorer la vitesse de son site WordPress. Au départ, notre site chargeait en plus de 5s et ne tenait pas la charge. A l’arrivée, notre site charge en 0,7s et est capable de gérer 1000 requêtes par secondes. Le tout grâce à 3 points clefs:
– HTTP2
– Plugin Autoptimize
– Plugin Cache-Enabler
A ma question « quand devrais-je augmenter la puissance de mon serveur », la réponse est donc:
– Quand le site devra afficher plus de 1000 requêtes par seconde;
– Ou quand le site devra afficher plus de 3,6 millions de page par heure
Avec un serveur à 3€, on peut faire un site WordPress capable d’afficher plus de 3 millions de page par heure. Ça devrait nous suffire pour l’instant =).