Configurer WordPress avec W3 Total Cache et CloudFlare CDN dans LAMP

Ce guide vous montrera comment augmenter la vitesse de chargement d’un site WordPress avec le plugin W3 Total Cache et un compte gratuit CloudFlare CDN. Dans ce tutoriel, le système CMS WordPress est installé sur une pile LAMP (Linux + serveur HTTP Apache + SGBD MariaDB et PHP) sur une machine virtuelle auto-hébergée Debian 9, mais la même procédure peut être appliquée avec quelques modifications mineures sur n’importe quel site WordPress, qu’il soit déployé sur un serveur dédié, un VPS ou dans un environnement d’hébergement partagé.

EXIGENCES

• Un site WordPress disponible sur un domaine public enregistré. Si vous souhaitez déployer votre propre site WordPress sur une pile LAMP, vous devriez envisager de lire les instructions de ce tutoriel : https://www.howtoforge.com/tutorial/install-wordpress-on-lamp-in-debian-9/
• Plugin W3 Total Cache installé et activé dans WordPress
• Un compte CloudFlare gratuit

Note initiale :

Si votre site WordPress est installé sur un serveur dédié sur une pile LAMP, la première chose à vérifier est si vous pouvez installer de nouveaux plugins depuis le tableau de bord WordPress sans qu’un serveur FTP soit installé localement. Si l’on vous demande d’entrer un compte FTP pour installer de nouveaux plugins, vous devez activer la méthode d’écriture directe du système de fichiers WordPress. Pour activer cette fonctionnalité WordPress, ouvrez le fichier wp-config.php situé dans le répertoire racine de votre site web et ajoutez la ligne de code suivante n’importe où dans le contenu du fichier.

define('FS_METHOD', 'direct');

Vous pouvez également exécuter la commande suivante pour obtenir le même résultat, sans mettre à jour manuellement le fichier wp-config.php, comme illustré dans la capture d’écran ci-dessous.

echo "define('FS_METHOD', 'direct');" | tee -a /path/to/website/wp-config.php

Avant de configurer le plugin W3 Total Cache avec CloudFlare CDN, visitez le site GTmetrix à l’adresse suivante https://gtmetrix.com et effectuez un test de performance pour votre domaine afin de comparer les résultats après l’intégration du CDN.

Partie 1 - Installer W3 Total Cache

• Pour installer le plugin W3 Total Cache, connectez-vous au tableau de bord WordPress et cliquez sur le lien Plugins -> Ajouter Nouveau. Dans le champ de recherche, écrivez W3 Total Cache et cliquez sur le bouton Installer Maintenant pour commencer le processus d’installation comme illustré dans l’image suivante.

• Après que le plugin W3 Total Cache ait terminé son installation, cliquez sur le bouton Activer le plugin W3 Total Cache pour activer le plugin.

Partie 2 – Configurer le plugin W3 Total Cache

1. Pour configurer le plugin W3 Total Cache, naviguez vers le tableau de bord WordPress et allez dans Plugins -> Plugins installés depuis le menu de gauche et cliquez sur le lien Réglages du W3 Total Cache pour commencer le processus de configuration.

2. Ensuite, allez dans Réglages généraux et activez l’option Cache de page. Utilisez la méthode de cache de page Disque : Amélioré et faites défiler vers le bas pour passer à l’option suivante.

3. Ensuite, faites défiler vers le bas et désactivez Minify, Cache de base de données et Cache d’objet, car CloudFlare CDN s’occupera de minifier vos fichiers javascript, CSS et HTML et fournira également son propre mécanisme de mise en cache.

Vous devez désactiver le cache de base de données si le site WordPress est installé dans un environnement d’hébergement partagé.

4. Ensuite, faites défiler vers le bas et activez le Cache du navigateur comme illustré dans l’image ci-dessous.

5. Faites défiler vers le bas et désactivez l’option CDN et Proxy inverse, puis allez dans l’onglet Divers et activez l’option suivante : Vérifier les règles de réécriture. Assurez-vous de désactiver toutes les autres options comme présenté dans l’image ci-dessous.

6. Ensuite, faites défiler vers le bas et désactivez toutes les options de débogage. Enfin, cliquez sur le bouton Enregistrer tous les réglages pour appliquer la configuration. Vous avez également la possibilité d’exporter la configuration du plugin W3 Total Cache ou de réinitialiser le plugin aux paramètres par défaut en cas de problème.

7. Les prochaines configurations couvriront l’option Cache de page dans le menu de gauche. Allez dans l’onglet Général et activez les options suivantes comme illustré dans la capture d’écran ci-dessous.

• Mettre en cache la page d’accueil

• Mettre en cache les flux : site, catégories, tags, commentaires

• Mettre en cache les requêtes SSL (https)

• Ne pas mettre en cache les pages pour les utilisateurs connectés

• Ne pas mettre en cache les pages pour les rôles d’utilisateur suivants : Administrateur, Éditeur, Auteur, Contributeur et Abonné.

8. Ensuite, faites défiler vers le bas et activez l’option Mettre en cache les noms d’hôtes alias. Écrivez tous vos alias de site web (avec ou sans www) dans URLs supplémentaires et faites défiler vers le bas pour passer à l’option suivante.

9. Dans l’onglet Préchargement du cache, activez Prémanger automatiquement le cache de page. Ne changez pas les valeurs pour l’intervalle de mise à jour et les pages par intervalle. Vous devez également ajouter un sitemap XML pour le site web. Assurez-vous d’activer l’option Prémanger le cache des articles lors des événements de publication.

10. Ensuite, faites défiler vers le bas et activez les options Page d’accueil, Page d’article, Flux de blog, Pages de commentaires d’article et rss2 de l’écran Politique de purge : cache de page comme décrit dans l’image ci-dessous.

11. Enfin, faites défiler vers le bas jusqu’à l’onglet Avancé et activez uniquement l’option Mode de compatibilité. Laissez toutes les autres options par défaut et cliquez sur le bouton Enregistrer tous les réglages pour appliquer les modifications effectuées jusqu’à présent.

12. Ensuite, naviguez vers le menu Cache du navigateur et dans l’onglet Général, assurez-vous d’activer les options suivantes comme présenté dans la capture d’écran ci-dessous.

• Définir l’en-tête last-Modified

• Définir l’en-tête expires

• Définir l’en-tête de contrôle du cache

• Définir l’étiquette d’entité

• Définir l’en-tête W3 Total cache

• Activer la compression HTTP gzip

13. Continuez à faire défiler vers le bas et activez les options suivantes pour les onglets CSS & JS, XTML & XML et Médias & Autres fichiers comme décrit ci-dessous :

• Définir l’en-tête last-Modified

• Définir l’en-tête expires

• Définir l’en-tête de contrôle du cache

• Politique de contrôle du cache définie sur cache avec max-age et validation (“max-age=EXPIRES_SECONDS, public, must-revalidate, proxy-revalidate”)

• Définir l’étiquette d’entité (ETag)

• Définir l’en-tête W3 Total cache

• Activer la compression HTTP gzip

14. Enfin, cliquez sur le bouton Enregistrer tous les réglages pour appliquer la configuration du plugin W3 Total Cache. Cependant, vous devriez ajuster les paramètres du plugin W3 Total Cache et effectuer des tests pour déterminer les meilleures options pour votre site web.

Partie 3 – Configurer CloudFlare CDN

15. Pour activer le plugin CloudFlare dans WordPress, naviguez vers Performance - > Extensions - CloudFlare et cliquez sur le lien Activer comme illustré dans l’image suivante.

16. Pour configurer le plugin CloudFlare, cliquez sur le lien Réglages dans le menu Extensions comme présenté dans la capture d’écran ci-dessous.

17. CloudFlare est un service de réseau de distribution de contenu (CDN) qui agit comme un accélérateur reverse-proxy pour les sites web. Parmi d’autres fonctionnalités, dont certaines sont payantes, CloudFlare offre des services DNS et de sécurité intégrés pour les sites web mis en cache. Pour intégrer un site web au CDN CloudFlare, il vous suffit de vous inscrire pour un compte gratuit à l’adresse suivante https://www.cloudflare.com/a/login et d’ajouter votre domaine à leurs réseaux comme illustré dans la capture d’écran ci-dessous.

18. Attendez environ une minute que CloudFlare scanne les enregistrements DNS de votre domaine et cliquez sur le bouton Continuer pour passer à l’écran des enregistrements DNS. Sur l’écran des enregistrements DNS détectés, vérifiez si tous vos enregistrements de domaine sont découverts. Si tous vos enregistrements DNS sont présents dans la liste, cliquez sur le bouton Continuer pour procéder. Utilisez les captures d’écran ci-dessous comme guide.

19. Ensuite, vous devez choisir un plan CloudFlare pour votre domaine et cliquer sur le bouton Continuer pour passer à l’écran suivant. Dans ce tutoriel, nous choisirons un plan de site web gratuit.

20. Sur l’écran suivant, notez les serveurs de noms DNS de CloudFlare et mettez à jour vos serveurs de noms de domaine en conséquence. Vous devez vous connecter au panneau de votre registraire de domaine pour changer vos serveurs de noms de domaine et les nouveaux enregistrements doivent être mis à jour le plus rapidement possible. Les serveurs de noms de domaine doivent pointer exactement vers les serveurs de noms de CloudFlare et aucun autre enregistrement ns. Lorsque vous avez terminé, cliquez sur le bouton Continuer pour terminer le processus d’intégration. Cependant, vous pouvez cliquer sur le bouton Continuer et mettre à jour les enregistrements ns DNS chez votre registraire plus tard.

21. Après avoir modifié vos serveurs de noms de domaine, cliquez sur le bouton Vérifier les serveurs de noms pour forcer le processus d’activation. La propagation DNS du domaine dans le cloud Internet prend jusqu’à 24 heures pour se compléter. Cependant, pendant ce temps, votre site web ne sera pas affecté de quelque manière que ce soit. Pas de temps d’arrêt !

22. Ensuite, naviguez vers le panneau web CloudFlare et cliquez sur le bouton Vitesse. Ici, activez l’option Auto Minify pour JavaScript, HTML et CSS comme illustré dans l’image ci-dessous. Ce paramètre compressera tous les fichiers javascript, CSS et HTML afin de réduire leur volume et de les livrer plus rapidement aux navigateurs des clients finaux.

23. Faites défiler vers le bas et activez le mode Automatique pour Rocket Loader comme illustré ci-dessous.

24. Ensuite, cliquez sur le bouton Crypto et définissez le chiffrement SSL sur Complet. Ensuite, allez à l’écran principal pour obtenir la clé API et activer l’extension CloudFlare de WordPress. Cliquez sur le lien Obtenez votre clé API, sélectionnez Clé API globale et cliquez sur le bouton Afficher la clé API. Une nouvelle fenêtre contextuelle devrait s’ouvrir. Copiez la chaîne de la clé API depuis le presse-papiers et fermez la fenêtre contextuelle.

25. Revenez au site WordPress et allez dans Performance -> Extensions -> CloudFlare et cliquez sur le lien Réglages. Dans l’écran CloudFlare, cliquez sur le bouton Autoriser et ajoutez l’adresse e-mail avec laquelle vous vous êtes inscrit à CloudFlare et la clé API que vous avez copiée depuis la clé API globale. Lorsque vous avez terminé, cliquez sur le bouton Suivant pour continuer.

26. Sélectionnez votre zone de domaine et cliquez sur le bouton Suivant pour terminer le processus d’autorisation. Ensuite, vous pouvez commencer à gérer les paramètres CloudFlare CDN pour votre domaine via le plugin CloudFlare dans WordPress.

27. Si vous avez déjà mis à jour les enregistrements ns DNS chez votre registraire, vous pouvez attendre quelques heures puis vous connecter au panneau CloudFlare. Le site web devrait être activé avec succès sur CloudFlare.

Attendez quelques jours pour que le service CDN CloudFlare mette complètement en cache le contenu de votre site web et analysez à nouveau la vitesse de votre site web sur le site https://gtmetrix.com. Comparez les résultats avec le rapport initial afin de déterminer le bénéfice en performance fourni par CloudFlare CDN.