Optimisation WordPress : WP-Rocket + Sucuri

Dans cet article, je détaillerai les dernières modifications de l’architecture du site malekal.com afin d’accélérer et optimiser WordPress.

En effet, dernièrement pas mal de modifications sur le site ont été apportées.
Je pense qu’il peut être intéressant d’un point de vue technique de partager ces modifications ou simplement par curiosité.

Optimisation WordPress : WP-Rocket + Sucuri
Optimisation WordPress : WP-Rocket + Sucuri

Historique du site

Pour commencer, on va rapidement planter le décor.

Le site est assez ancien (2005) et a connu plusieurs phases avec différentes architectures.
Initialement, il s’agissait d’une machine récupérée en Debian sur une connexion ADSL en raie manta USB pour ceux qui ont connu.
Puis un serveur dédié Dedibox puis vers OVH suite à une attaque DoS.

Apache était utilisé comme serveur WEB avec plus tard une intégration mod-security.
Varnish a aussi été utilisé quelques temps comme proxy cache en amont d’Apache.
Enfin en 2017, tout a été migré vers Nginx.
C’était plutôt l’occasion à chaque fois de tester des technologies et leurs mises en place.

Pendant un temps, peu de publications ont été faites sur le site, c’était plutôt sur le forum.
Ce dernier était relativement long en temps de réponse mais ce n’était pas vraiment une priorité.
D’ailleurs à l’époque, Google ne devait pas en faire plus cas que cela.

A partir de mi-2016, j’ai relancé l’activité du site avec des publications plus fréquentes et un peu d’optimisation WordPress pour améliorer la vitesse de chargement des pages.
On voit clairement une amélioration sur le graphique ci-dessous issu de Google Analystics.

La vitesse du site sur Google Analystics
La vitesse du site sur Google Analystics

Depuis quelques jours, une refonte du site a été effectuée.

Optimisation WordPress

L’optimisation afin d’accélérer la vitesse de chargement des pages s’est faites trois axes :

  • Utilisation de WP-Rocket pour le cache, minifier le CSS, Javascript et HTML
  • Changement de thème WordPress
  • Optimisation de la compression des images avec Imagify
  • Passage du serveur sur le CDN Sucuri

La plupart des éléments sont indiqués sur la page : Comment accélérer et optimiser WordPress.

WP-Rocket

WP-Rock est une extension pour WordPress qui permet d’améliorer la vitesse du site en effectuant diverses opérations sans nécessairement avoir besoin de connaissances très technique.

  • Minification de code HTML, JavaScript et CSS
  • Combiner les Google Fonts pour réduire les appels externes
  • Amélioration du cache de WordPress notamment pour les mobiles
  • Utilisation d’un CDN
WP-Rocket extension de cache et minification pour WordPress
WP-Rocket extension de cache et minification pour WordPress

On coche les éléments que l’on souhaite activer et WP-Rocket fait le boulot.

A noter que WP Rocket propose une intégration CDN mais aussi une intégration plus poussé avec Sucuri.
Notamment, on peut vider le cache du site à travers les API de ce dernier.

Changement de thèmes

Le thème précédemment utilisé était assez lourd, plus de 1 Mo par page.
J’ai choisi un thème plus léger et assez accès SEO.

Ce dernier possède beaucoup d’options de paramétrage, ce qui est pratique.
Voici les options de performances offertes par le thème, cela reprend certaines fonctions proposées par WP-Rocket.

Thème WordPress optimisé et orienté SEO
Thème WordPress optimisé et orienté SEO

Je ne vais pas trop détailler car cela reste assez classique.

Imagify

Enfin un peu d’investissement dans une extension pour optimiser la compression des images.
Celle-ci est notamment testé sur les évaluation PageSpeed et compagnie.
Toutes les extensions de ce site sont payantes.

Voici le résultat après optimisation de toutes les images par l’extension.
A noter que j’avais un cron avec optipng qui tournait.

Le CDN Sucuri

Sucuri est un CDN visant WordPress pour notamment améliorer la sécurité.
La partie sécurité n’était pas recherchée plus que cela car j’avais déjà mis en place tout ce qu’il fallait.
Notamment les pages d’administration de WordPress étaient filtrées ainsi qu’un filtrage GeoIP sur la page d’inscription du forum afin de limiter le SPAM.
Tout cela est assez facile à mettre en place sur Nginx.
Enfin et de plus OVH a fait de gros efforts concernant les protections DDoS : Attaques DoS et Anti-DoS OVH

Ici l’intérêt est surtout de bénéficier de la vitesse et du cache d’un CDN.
Donc le choix s’est porté sur Sucuri car je connaissais leurs interventions sur twitter comme je suis (suivais?) pas mal le monde de la cyber-sécurité.
Une présentation du CDN est présente sur la page : CDN : optimisation et sécurité WordPress

Il s’agit d’une redirection totale à travers une modification du DNS.
Les requêtes WEB sont donc en amont prises par le CDN du serveur WEB malekal.com pour bénéficier notamment du cache.
En aval sur le serveur WEB, on ne voit plus que les IP Sucuri.

Logs WEB derrière le CDN Sucuri

Il en résultat une forte baisse des requêtes sur le serveur WEB final.

Chute des requêtes WEB sur Nginx après passage sur Sucuri
Chute des requêtes WEB sur Nginx après passage sur Sucuri
Chute des requêtes WEB sur Nginx après passage sur Sucuri
Chute des requêtes WEB sur Nginx après passage sur Sucuri

30% des requêtes sont cachées sur le ProxyCloud de Sucuri.

Requêtes cachées VS non cachées
Requêtes cachées VS non cachées

Enfin sur le Firewall d’OVH, on bloque le monde entier sauf les IP du CDN Sucuri.
Ainsi, le serveur WEB devient inaccessible depuis internet à l’exception des proxyCloud Sucuri.
Si un attaquant trouve l’adresse IP du serveur, ce qui n’est pas très difficile, il ne pourra pas effectuer d’attaque DDoS direct à destination du serveur WEB.

La configuration du Firewall OVH
La configuration du Firewall OVH

C’est ce qui existait auparavant avec Varnish et Apache par exemple.
Simplement qu’ici l’infrastructure Sucuri est bien plus importante et rapide.
De ce fait, le serveur WEB est beaucoup moins sollicité et les pics d’activités sont plus facilement absorbés.

Le résultat en terme de vitesse

Malheureusement, je n’ai pas gardé les informations de test de départ.
Mais sur PageSpeed le site était tombé à une note d’environ 70.

Le classement du site sur Pingdom est de D avec une taille de 1,5 Mo et 134 requêtes.
La page se charge en 1 seconde et 52.
Sachant qu’on pouvait probablement avoir des délais plus importants selon les heures et charge du serveur WEB.

Evaluation du site WordPress sur PingDom après optimisation
Evaluation du site WordPress sur PingDom après optimisation

Le résultat actuel sur la nouvelle architecture.
Le site passe en note B avec une taille inférieur à 1 Mo et un délai de chargement divisé par 3.
Le nombre de requêtes a aussi été fortement réduite.

Evaluation du site WordPress sur PingDom après optimisation
Evaluation du site WordPress sur PingDom après optimisation

Puis du côté de GTmetrix, la page d’accueil passe à la note A.

Evaluation du site WordPress sur GTmetrix après optimisation
Evaluation du site WordPress sur GTmetrix après optimisation

Enfin chez PageSpeed on dépasse sans problème la note de 90.

Evaluation du site WordPress sur PageSpeed après optimisation
Evaluation du site WordPress sur PageSpeed après optimisation
Evaluation du site WordPress sur PageSpeed après optimisation
Evaluation du site WordPress sur PageSpeed après optimisation

Les notes sont moins bonnes sur les pages du sites à cause des liens externes liées notamment à Google Ads mais cela est normal.

Les impacts de l’optimisation

Enfin la question qui se pose est quels sont les impacts de cette optimisation ?

On constate que le site n’a jamais été aussi rapide avec temps de chargement au plus bas (voir fin de la courbe).

Temps de chargement des pages sur le site
Temps de chargement des pages sur le site

Si l’on regarde les graphiques suivants, on voit clairement une monté des impressions et clics provenant de Google (Courbe bleu et cyan).
La courbe violette correspond au positionnement, plus la courbe est haute et mieux le site est positionne. On constate beaucoup moins de fluctuations avec un positionnement plus stable.

Performance impression + clic et positionnement sur Google
Performance impression + clic et positionnement sur Google
Performance impression + clic et positionnement sur Google
Performance impression + clic et positionnement sur Google

Clairement donc cela a un impact sur les résultats Google (SEO).

(Visité 106 fois, 1 visites ce jour)