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é.
Table des matières
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.
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
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
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.
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.
Il en résultat une forte baisse des requêtes sur le serveur WEB final.
30% des requêtes sont cachées sur le ProxyCloud de Sucuri.
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.
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.
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.
Puis du côté de GTmetrix, la page d’accueil passe à la note A.
Enfin chez PageSpeed on dépasse sans problème la note de 90.
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).
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.
Clairement donc cela a un impact sur les résultats Google (SEO).