Cet article vous montre comment rendre WordPress plus rapide avec W3 Total Cache + CloudFlare à l’aide d’un exemple concret, celui que j’ai mis en place, en 2017,  pour le blog ASD! Si l’opération vous semble complexe, je vous invite à me contacter pour plus de renseignements ou pour une assistance pour la mise en place de ceci sur votre site, pour cela je vous donne rendez-vous directement à la fin de cette publication.

AVIS AU LECTEUR:
 Cet article a initialement été publié en 2017 sur le blog ASD, puis transféré sur Centre-Web pour enfin être repris début 2022 sur mon blog
Je me suis largement inspiré de cette publication http://www.bloggingwizard.com/w3-total-cache-cloudflare/ rédigée par Adam Connell 
qui m'a fourni son accord pour une reprise en français. Merci Adam !

Suite à l’installation de WordPress, moteur de publication du blog ASD, les performances relevées via GTmetrix sont les suivantes, ce qui est largement perfectible.

Vous êtes prets ?

Alors c’est parti. Je vous invite à prendre une tasse de café, de thé ou une bonne boisson, de prendre de quoi noter et de vous isoler tranquillement si vous voulez suivre toute ce tutoriel d’une manière efficace!

Comment W3 Total Cache et CloudFlare améliorent-ils la vitesse de chargement de vos contenus?

Au-delà du choix d’un hébergement de qualité, deux des plus grandes améliorations que vous pouvez apporter aux temps de chargement des pages de vos WordPress sont les suivantes:

• Une extension de mise en cache efficace.
  W3 Total Cache gère parfaitement ceci et accélère votre site en servant des fichiers statiques au lieu de contenus dynamiques. Cela signifie que votre serveur Web effectuera moins de travail et présentera donc votre contenu plus rapidement.
  
• Un CDN performant. CDN signifie Content Delivery Network ou Réseau de Distribution de Contenu.
  CloudFlare augmente la vitesse de votre site par une autre méthode: l’optimisation de la livraison de contenu grâce au CDN. Pour faire simple, sans CDN les visiteurs de votre site doivent télécharger tous vos fichiers à partir d’un emplacement unique: le serveur qui héberge votre site Web. Qu’ils soient situés à Paris, au Texas ou à Paris, en France, ils obtiennent les données de votre site Web du même endroit .  Les CDN modifient cela en créant plusieurs versions globales de vos données. Ensuite, les visiteurs peuvent télécharger des fichiers statiques comme des images et des vidéos à partir du centre de données le plus près d’eux, plutôt que depuis votre serveur Web éloigné. Cette proximité physique réduit les temps de téléchargement et accélère ainsi votre site Web.
  

Installez W3 Total Cache et CloudFlare, vous obtiendrez gratuitement de très bon temps de chargement.

Comment installer et configurer W3 Total Cache?

La plupart des plugins WordPress vous proposent simplement de les « activer puis de bénéficier de leurs fonctions. Cela est un peu plus complexe avec W3 Total Cache.

En effet, il y a plusieurs choses à régler via l’onglet Paramètres généraux pour que vos sites puissent tirer le meilleur parti de cette extension. La démarche peut paraître fastidieuse, mais je vous promets que le gain en vaut la peine .

Suivez les captures d’écrans suivantes, et les indications qui vont avec pour rendre le processus aussi simple que possible.

Après vous avoir montré comment configurer W3 Total Cache, je vous indiquerai ensuite la manière d’utiliser CloudFlare pour le faire fonctionner avec W3 Total Cache.

Étape 1: installez et activez W3 Total Cache.

Commencez par installer et activer W3 Total Cache disponible sur le répertoire de plugins wordpress.org. Vous pouvezl’installer directement à partir de votre tableau de bord WordPress en allant dans Plugins → Ajouter Nouveau et recherche:

Assurez-vous d’activer le plugin. Ensuite, dirigez-vous vers ses options de configuration en cliquant sur l’onglet Performance .

Étape 2: Configurez les paramètres généraux.

La première chose que vous devez configurer est le paramètre général du cache total de W3. Cet onglet permet / désactive toutes les fonctionnalités que vous configurerez plus en détail plus loin:

Voici l’ensemble des réglages à faire, dans l’ordre de haut en bas.W3 Total Cache + CloudFlare

1. Général

La première option vous permet d’activer automatiquement toutes les fonctionnalités de cache total W3. Malheureusement, vous n’aurez pas besoin de toutes les fonctionnalités, donc vous ne devriez pas utiliser cette option.

Cela vous permet également d’activer le mode Aperçu . En mode de prévisualisation, vous pouvez tester les modifications avant de les déployer sur votre site en direct. Personnellement, je n’utilise pas le mode Aperçu, car il est facile de désactiver le plugin si quelque chose ne va pas.

2. Cache de la page – ACTIVER

C’est la caractéristique la plus importante absolue de W3 Total Cache. Page Cache seul améliorera massivement les performances de votre site.

Définitivement, Activer le cache de la page. Pour la méthode, vous devez choisir l’option Disk: Enhanced , qui devrait être la valeur par défaut:

3. Minifier – NE PAS ACTIVER

La minification est une opération qui permet de réduire le code des pages et articles de votre site sans perdre ses fonctionnalités. Vous devez absolument « minifier » votre code pour améliorer les temps de chargement des publications. MAIS, comme CloudFlare prend en charge la minification, je vous recommande d’utiliser CloudFlare pour minimiser votre code.

Par conséquent, n’activez pas Minifier dans W3 Total Cache si vous prévoyez de suivre ce tutoriel complet et d’utiliser CloudFlare.

Laissez donc les valeurs proposées par défaut lors de l’activation de l’extension, puis passez à l’étape suivante.

4. Cache de base de données – NE PAS ACTIVER

Votre base de données est l’endroit où toutes les données réelles de vos publications, pages et tout ce qui est conservé sont enregistrées. Le cache de base de données peut améliorer les performances de votre base de données et réduire le temps nécessaire pour créer des publications, des pages et des flux RSS.

Si vous êtes sur un hébergement mutualisé (partagé), la mise en cache de la base de données peut ralentir votre site en générant un surplus de travail sur le processeur de votre serveur.

Donc, si pour des raisons économiques vous avez décidé d’héberger votre site sur un serveur mutualisé, je recommande de laisser le cache de base de données désactivé. Si vous avez un serveur dédié ou VPS, vous pouvez l’activer.

5. Cache d’objet (Object Cache) – ACTIVER

un Le cache d’objet est un autre oyen qui peut fonctionner correctement sur hébergement partagé. Cela vaut la peine d’essayer, mais si vous remarquez que votre tableau de bord d’administration de WordPress fonctionne plus lentement, alors vous pourrez revenir en arrière et le désactiver ultérieurement.

Mais pour l’instant, activez le cache d’objets et choisissez la méthode Disque :

6. Cache du navigateur – ACTIVER

Le cache du navigateur accélère votre site en mettant en cache des ressources statiques dans les navigateurs de vos visiteurs, éliminant ainsi la nécessité de recharger constamment le contenu statique.

Vous souhaitez absolument activer cette option:

7. CDN – NE PAS ACTIVER

Comme nous allons utiliser un CDN particulier (CloudFlare), ce n’est pas ici qu’il faut le configurer. Alors laissez CDN désactivé et ne vous inquiétez pas, je vais vous montrer comment gérer CloudFlare un peu plus loin dans cet article.

8. Reverse Proxy – NE PAS ACTIVER

Le proxy inverse est un concept avancé qui nécessite généralement un hébergement privé. Par conséquent, si vous etes sur un hébergement mutualisé vous pouvez laisser celui-ci Désactivé. Vous pouvez l’activer si vous disposez de votre propre serveur, en quel cas je suppose que vous avez un niveau technique suffisant pour le configurer. 

9. Suivi (Monitoring) – PAS D’ACTION

Vous n’avez pas besoin de configurer la surveillance pour augmenter les performances de votre site. Je vous conseille donc de ne pas le configurer pour l’instant.

10. Débogage (DEBUG) – NE PAS ACTIVER

Sauf si vous essayez activement de déboguer votre site, vous devez laisser toutes les options de débogage désactivées . Ils n’ajouteront que du code inutile à votre site.

C’en est fini de la configuration des paramètres généraux! Il peut y avoir quelques options supplémentaires ignorées dans le descriptif précédent, mais vous pouvez ignorer tout ce que je n’ai pas mentionné ci-dessus.

Ensuite, vous devrez configurer chaque méthode plus en détail. Vous pouvez accéder aux paramètres détaillés de chaque méthode en cliquant sur l’option concernée dans le menu de votre barre latérale:

Rappelez-vous: vous n’avez qu’à configurer les options que vous avez activées ci-dessus. Vous n’aurez donc pas besoin de configurer chaque élément de menu.

Étape 3: Configurer le cache de la page

Tout d’abord, accédez aux paramètres du cache de page. Ensuite, passez les différentes options de la page en suivant ces instructions. Si je ne mentionne pas une section, vous pouvez la laisser par défaut.

1. Général

Sous Général , assurez-vous de vérifier ces cases pour les activer:

• Mise en cache d’accueil
• Mise en cache de flux
• Cache SSL – CloudFlare offre des certificats SSL gratuits, afin que vous puissiez activer cette case, même si vous n’utilisez pas actuellement SSL.
• Ne mettre en cache les utilisateurs connectés

Vous pouvez laisser tout le reste désactivé (non contrôlé):

2. Préchargement du cache

Remplissez cette section en suivant ces paramètres:

• Amorcer automatiquement le cache de la page: Coché
• Intervalle de mise à jour: 900 secondes
• Pages par intervalle: 10
• URL du plan de site (sitemap): le lien réel vers votre sitemap si vous en avez un. Généralement, « yourdomain.com/sitemap.xml » pour la plupart des plugins SEO.
• Précharger le cache de publication lors des événements de publication: Coché

Vous pouvez en toute sécurité laisser tout le reste dans cette section comme valeur par défaut.

Étape 4: Configurer le cache d’objet

Étant donné que ni Minify ni le cache de base de données ne doivent être activés, vous pouvez passer directement aux paramètres du cache d’objets .

Vous devriez pouvoir laisser tout comme défaut ici – assurez-vous simplement que vous voyez ces chiffres:

• Durée de vie par défaut des cache objets: 180 secondes
• Intervalle de cillection Garbage: 3600 secondes

Etape 5: Configurer le cache du navigateur

C’est la dernière méthode que vous devez configurer!

1. Général

Sous les options générales, vous devez vérifier certaines cases supplémentaires. Assurez-vous de vérifier tous ces éléments:

• Définir le dernier en-tête de dernière modifié: Coché
• Définir l’expiration d’en-tête: Coché
• Définir le contrôle de mise en cache d’en-tête: Coché
• Définir l’étiquette d’entité (eTag): Coché
• Définir l’en-tête W3 Total Cache: Coché
• Activer la compression HTTP (gzip): Coché

Vous pouvez laisser toutes les autres options non activées:

Vous pouvez laisser toutes les autres sections sous cache du navigateur comme valeurs par défaut.

A ce stade nous avons maintenant terminé la configuration de W3 Total Cache.

Les résultats sont déjà perceptibles et GT Metrics montre une nette amélioration dès à présent comme le montre la capture suivante.

Mais cela peut, et doit encore être amélioré, ce qui va se faire avec l’utilisation du CDN CloudFlare !

Étape 6: Configurer l’extension CloudFlare pour W3 Total Cache.

Il n’est pas encoret emps d’affiner les réglages! Pour l’instant, la dernière chose que vous devez faire dans W3 Total Cache est aller à la page Extensions et Activer CloudFlare.

Comment configurer CloudFlare pour WordPress? 

J’ai de bonnes nouvelles …

Si vous avez suivi jusqu’à maintenant la section W3 Total Cache de ce tutoriel et avez réussi à le configurer sans problème alors, en comparaison, la mise en oeuvre de CloudFlare va ressembler à une promenade de santé!

Je vous rappelle, comme je l’écrivais en début de cet article, que si l’opération vous semble complexe, je vous invite à me contacter pour plus de renseignements ou pour une assistance pour la mise en place de ceci sur votre site, pour cela je vous donne rendez-vous directement à la fin de cette publication.

Vous êtes prêts à continuer par vous même ?

Parfait!

Prenez une nouvelle tasse de café, ou de thé (comme moi) et laissez moi vous guider pour la suite…

Étape 1: Inscrivez-vous pour un compte CloudFlare et sélectionnez votre site Web

Dirigez-vous sur le site CloudFlare pour vous y inscrire.

Une fois votre compte créé, CloudFlare vous demandera d’ajouter votre site. 

Entrez simplement le domaine de votre site Web et cliquez sur Begin Scan.

CloudFlare examine alors votre site

puis vous propose une fois l’opération terminée de procéder à la suite de la configuration en cliquant sur le bouton « continue setup »

Vous est alors présenté le résultat du scan et les différents enregistrements DNS analysés par CloudFlare.

Étape 2: vérifiez vos enregistrements DNS.

Vérifiez attentivement les informations affichées avant de cliquer sur le bouton « Continue ». A ce stade vous pouvez modifier ou ajouter des enregistrements (utilisateurs avertis!)

Assurez-vous de voir l’icône Orange CloudFlare à côté de votre nom de domaine réel. Cela signifie que CloudFlare accélérera le trafic pour ce domaine. Si vous utilisez des sous-domaines publics, vous devez également vérifier que vous voyez une icône orange à côté d’eux.

Dès que vous voyez l’icône orange, vous êtes prêt à continuer le processus d’accélération de votre site !

Étape 3: choisissez le niveau de votre plan

Parce que cette publication vise à accélérer votre site gratuitement, vous devriez choisir le plan gratuit. Pour la plupart des propriétaires de sites, le plan gratuit est plus que suffisant.

Cliquez sur le bouton « Continue »

Étape 4: mettez à jour vos serveurs de noms

Dans la dernière étape, vous devrez mettre à jour les serveurs de noms de votre domaine à partir de vos serveurs de noms actuels vers les nouveaux serveurs de noms fournis par CloudFlare.

Pour ce faire, vous devrez aller où vous avez enregistré votre nom de domaine et mettre à jour vos serveurs de noms avec votre bureau d’enregistrement. Si vous avez besoin d’aide, l’équipe de soutien de votre bureau d’enregistrement peut vous indiquer la marche à suivre. Vous pouvez également me contacter pour plus de renseignements ou pour une assistance pour la mise en place de ceci sur votre site, pour cela je vous invite à vous rendre directement à la fin de cet article.

Pour ma part, le blog ASD étant hébergé chez O2Switch, les changements proposés sont les suivants.

Mon domaine étant enregistré chez BookMyName, la modification des DNS s’est effectuée comme suit:

Une fois ceci fait, vous recevez un mail de confirmation de la prise en compte

Cela pourrait prendre 24 heures pour que les modifications prennent effet. Mais ne vous inquiétez pas – votre site n’aura aucun temps d’arrêt. Tout cela signifie que CloudFlare pourrait ne pas commencer à accélérer votre site pendant 24 heures.

Et vous avez fini avec la configuration de base!

Étape 5: Activer CloudFlare dans W3 Cache total

Maintenant, il vous suffit de revenir à W3 Total Cache et d’ajouter vos informations d’identification de connexion CloudFlare pour synchroniser les deux ensemble.

Dans votre tableau de bord WordPress, accédez à la partie Performance / Extensions puis cliquez sur le lien Réglages sous l’extension CloudFlare.

Cliquez sur le bouton Autoriser sous Credentials:

Une fenêtre pop-up s’ouvre alors dans laquelle vous n’aurez plus qu’à renseigner les informations nécessaires à l’autorisation de CloudFlare.

Entrez l’adresse e-mail de votre compte CloudFlare ainsi que votre clé CloudFlare API.

NB: Vous pouvez trouver votre clé API CloudFlare en allant dans Mon compte ( ce lien vous y conduit directement) et vous rendant dans la section clé API de la page :

Une fois que vous aurez renseigné vos informations d’identification, si vous avez plusieurs domaines enregistrés chez CloudFlare, vous avez accès à une nouvelle pop-up vous demandant quel est le domaine à utiliser. Choisissez le bon et continuez.sais

Vous revenez ensuite sur la fenêtre ou vous avez activé CloudFlare ce qui vous permet de vérifier que l’opération s’est correctement déroulée.

Vous avez maintenant accès à un nouvel écran avec plusieurs options paramétrables.

Étape 6: activer la minification via CloudFlare

Il suffit de faire défiler vers le bas dans ces paramètres et d’activer les trois niveaux de minification JS, CSS et HTML comme suit:

puis de cliquer sur le bouton d’enregistrement.

Et c’est tout!

Vous pouvez également configurer le SSL et les paramètres de sécurité sur cette page. Mais il est bon de les laisser comme défaut pour l’instant.

VOILA, c’est fini !

Le résultat montre une nette amélioration. En effet, une nouvelle mesure via GTMetrics donne le résultat suivant.

Quelques réglages complémentaires permettent encore d’améliorer ceci, notamment l’optimisation d’images, quelques modifications sur les javascripts etc …

Une fois ceux-ci effectués, le résultat final donne un score tout à fait accptable

Moins de 24H après la mise en place des réglages de cet article, la dernière mesure donne le résultat suivant.

J’ai également appliqué la même procédure d’optimisation sur Centre-Web, et le résultat est tout aussi probant.

Je sais que c’était beaucoup et que cette publication est très complète, voire indigeste pour certains. Mais vous n’avez qu’à suivre ce tutoriel pas à pas une seule fois!

Je vous rappelle que si  l’opération vous semble complexe, je vous pouvez me contacter pour plus de renseignements ou pour une assistance pour la mise en place de ceci sur votre site. Pour cela il vous suffit de me contacter.

Pour terminer, je vous invite à laisser vos impressions et commentaires ci-dessous, et à partager cette publication si elle vous a rendu service car mon but est d’aider un maximum de personnes 🙂