Optimiser WordPress avec le CDN CloudFlare

Cloudflare est un réseau de distribution (CDN) qui permet d’accélérer la vitesse de chargement des pages de votre site WordPress.
Pour cela, il propose :

• Des centres de données (datacenter) partout dans le monde pour être au plus proche des visiteurs
• Des fonctionnalités de mise en cache pour bénéficier de la puissance des serveurs Cloudflare
• Automatic Platform Optimization (APO) pour lutter contre les lenteurs causées par des problèmes courants tels que la congestion de l’hébergement partagé, la lenteur des recherches dans les bases de données ou le mauvais fonctionnement des plugins
• Des fonctionnalités de minimisation automatique du code source, Turbo TCP, redimensionnement des images, …

Ainsi, Cloudflare propose beaucoup d’autres fonctionnalités pour améliorer les performances et accélérer WordPress.
Ce tutoriel vous guide pour optimiser WordPress avec le CDN Cloudflare.

Introduction

Vous ne le savez peut-être pas mais la vitesse de votre site internet est important pour deux raisons :

• Lorsqu’un site internet est trop lent, les visiteurs abandonnent et le quittent. En améliorant le temps de réponse, vous pouvez réduire votre taux de rebond
• Google prend en compte la vitesse de votre site pour le référencement. C’est un élément important dans la stratégie SEO

Si vous ne l’avez pas encore fait pour la mise en place du CDN Cloudflare sur WordPress, suivez ce tutoriel :

Ensuite, évitez d’activer toutes les options d’un coup mais par lots tout en mesurant les impacts sur votre site.
Pour cela, utilisez les deux services suivants :

• PageSpeed de Google
• GTMetrix

Le premier lien permet de mesurer votre site selon les différents critères de vitesses de Google : First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS).

Optimiser WordPress avec le CDN CloudFlare

Activer Automatic Platform Optimization (APO)

L’extension Cloudflare pour WordPress propose les fonctionnalités suivantes.

• Apply Recommended Cloudflare Settings For WordPress : applique les réglages recommandés par Cloudflare pour WordPress. Voir plus bas.
• Optimisez Cloudflare pour WordPress (Automatic Platform Optimization) – activez-le en cliquant sur le bouton «Appliquer». Cela va utiliser le système APO pour booster les performances de votre site WordPress
• Purger le cache – activez ce service uniquement après avoir mis à jour votre WordPress ou la conception de votre site Web. Ce paramètre effacera tout le contenu mis en cache de votre site.
• Gestion automatique du cache – effacez automatiquement le cache Cloudflare chaque fois que vous changez ou modifiez le thème.

Voici les réglages automatiques opérées par l’extension.

Réglages	Valeur
Security level	Moyen
Caching level	Standard
Auto Minify	Activer la réduction automatique pour JS, CSS et HTML
Browser Cache TTL	4 H
Always Online	On
Development Mode	Désactiver
IPV6 Compatibility	Off
WebSockets	On
IP Geolocation	On
Email Address Obfuscation	On
Server-side Excludes	On
Hotlink Protection	Off
Image optimization (Polish and Mirage)	Off (unless on Pro or higher plan)
Rocket Loader	Off

Cela ne sert à rien de les appliquer car nous allons les modifier directement dans la configuration Cloudflare.
Par contre, il faut activer Automatic Platform Optimization pour bénéficier de la plateforme d’optimsation de Cloudflare.

Pages rules

• Cliquez sur l’onglet Pages Rules
• Puis cliquez sur Créer une règle de configuration
• En haut saisissez www.votredomaine/* pour appliquer les pages rules à toutes les pages de votre sites. Par exemple si votre site est www.supersite.com alors saisissez www.supersite.com
• Puis cliquez sur ajouter un paramètre afin de créer un à un les paramètres suivants avec les valeurs

Réglages	Valeurs
Minimisation automatique	HTML / CSS / JS
Niveau de mise en cache	Tout mettre en cache
Durée TTL du cache Edge	Un mois
Contourner le cache en présence d’un cookie	wp-*|wordpress.*|comment.*

Les réglages Speed de Cloudflare

Ensuite cliquez sur Speed pour activer certains fonctionnalités d’optimisation pour accélérer WordPress et améliorer les performances.
On en retrouve certains déjà activées depuis pages rules.

Optimisation de la taille de fichier

Ces réglages visent à réduire la taille du code et des images afin que le site soit moins lourd.
Un site moins lourd va se charger donc plus rapidemnet surtout pour les mobiles.
Veillez bien à tester chaque paramètre et leur impact et vérifier la taille du site. GTMetrix vous donne ces indications.

• Redimensionnement des images. Redimensionner des images, les convertir au format WebP et ajuster leur qualité à la demande. Paramètres à tester avant de l’activer
• Polish : Améliorez le temps de chargement des images en optimisant les images hébergées de votre site WordPress. Deux réglages sont possibles :
  • Sans perte (Lossless) : Réduire la taille des fichiers d’images sans nuire à la qualité visuelle.
  • Perdant (Lossy) : les images JPEG sont encore plus compressées, ce qui peut réduire la qualité visuelle mais permet de réduire leur taille.
• Minimisation automatique : Réduisez la taille de fichier du code source sur votre site web

Notez que les optimisations de code comme la minimisation peuvent se faire du côté de WordPress avec des extensions de cache tel que WP Rocket, Total Cache, Autoptimizer, NitroPack, WP Fastest Cache, etc.
De même que pour la réduction automatique des images, il existe des extensions payantes comme reSmush.it, EWWW Image Optimizer, ShortPixel Image Optimizer, WP Smush, Imagify, …

• Brotli : Accélérez les temps de chargement de la page correspondant au trafic HTTPS de vos visiteurs en appliquant la compression Brotli. Celle-ci compresse mieux que gzip généralement activé par défaut

Optimisation autour de la distribution optimisée

• Automatic Platform Optimization pour WordPress : C’est dans cette partie que Cloudflare vous confirme si APO est bien actif pour votre site WordPress
• Définition améliorée des prioritées HTTP/2 : Optimise l’ordre de distribution des ressources, indépendamment du navigateur
• Turbo TCP : Réduisez la latence et le débit à l’aide d’optimisations TCP personnalisées. Activé automatiquement pour les clients des offres Pro, Business et Entreprise.

• Mirages : Accélérez le temps de chargement des pages qui contiennent des images sur les appareils mobiles lorsque les connexions réseau sont lentes
• Rocket Loader : Améliorez la durée Paint des pages qui comprennent du code JavaScript. Je vous conseille vraiment de tester son impact car il peut au final ralentir votre site

Comment vérifier que les réglages Cloudflare sont bien appliqués à WordPress

Pour s’assurer qu’APO et la compression Brotli sont bien actifs pour votre site WEB.

• Ouvez Google Chrome sur une page de votre site
• Puis appuyez sur CTRL + ALT + I pour ouvrir les outils de développement de Chrome
• Ensuite cliquez sur l’onglet Network
• Puis double-cliquez l’URL de votre site
• Un volet à droite s’ouvre sur le header, ce qui va afficher les en-tête HTTP de la requête WEB
• Assurez-vous que :
  • cf-apo-via sur cache – la page est bien dans le cache d’APO
  • cf-cache-hit sur HIT – la page web est bien cachée par Cloudflare
  • content-encoding sur br – la page est bien compressée par l’algorithme brotli

Optimiser WordPress

D’autres conseils pour optimiser son site WordPress sont donnés dans cet article :

Pourquoi s’arrêter en si bon chemin dans l’optimisation WordPress ?
Cloudflare est aussi une solution de sécurité avec des fonctionnalités de Waf (Web Application Firewall).
Pour plus de détails :