Démarrer votre site WordPress en quelques minutes

Comment installer un CDN et configurer W3 Total Cache pour débutants

Dernière mise à jour le 20 décembre 2021 Publié le 7 janvier 2015
w3-total-cache

Nous avons reçu quelques compliments de la part des utilisateurs concernant la rapidité de chargement de notre site. Vous voulez connaître notre secret pour avoir un site WordPress rapide. En plus d’utiliser un bon service d’hébergement WordPress et des plugins correctement codés et configurés, vous devez être certain d’activer le caching sur votre site et d’avoir un bon CDN (content delivery network). Pour notre installation, nous utilisons une extension appelée W3 Total Cache. Suite à vos nombreuses demandes, nous avons décidé de rédiger un guide étape par étape qui explique comment installer et configurer W3 Total Cache pour les débutants. Dans cet article, nous vous expliquerons comment configurer correctement le plugin afin de maximiser les bénéfices. Nous vous montrerons également comment combiner W3 Total Cache à un service CDN pour que votre site charge encore plus rapidement.

Avant de commencer, nous vous recommandons grandement de vérifier les performances de votre site en utilisant Google Page Speed et Pingdom Tools. Vous pourrez, de la sorte, comparer les résultats avant et après installation. Ci-dessous, la capture d’écran de nos résultats sur Pingdom (bon… il y a encore place à amélioration!) :

wpnuls-pingdom

Qu’est-ce que W3 Total Cache ?

W3 Total Cache est l’extension la plus rapide et la plus complète pour évaluer les performances sur WordPress. De nombreux sites de renoms l’utilisent : AT&T, Mashable, Smashing Magazine et des millions d’autres. W3 Total Cache améliore l’expérience de l’utilisateur sur votre site en augmentant les performances de votre serveur. L’extension met en cache les éléments de votre site, réduisant le temps de chargement et fournissant une intégration CDN vraiment facile à réaliser.

Installer W3 Total Cache dans WordPress

Avant d’installer W3 Total Cache, veuillez désinstaller toutes les autres extensions de caching (par exemple, WP Super Cache). Si vous ne le faites pas avant l’installation, vous aurez des problèmes lors de l’activation. Allez sur votre panneau d’administrateur WordPress et cliquez sur Extensions > Ajouter. Cherchez « W3 Total Cache ». Vous devriez tomber sur une page semblable à celle ci-dessous. Cliquez sur « Installer maintenant », et ensuite, « Activer ».

installer-w3totalcache

Paramétrage et configuration de W3 Total Cache

Paramètres généraux

Vous pouvez trouver les paramètres généraux en cliquant sur le bouton Performance dans le menu de votre panneau d’administration WordPress. C’est ici que vous pourrez configurer les paramètres de base de l’extension.

w3totalcache-reglages

Qu’est ce que le Page Cache?

La première option que vous trouverez est le Page Cache. Cette option est responsable de créer des pages en cache statiques pour chaque page qui est chargée sur votre site web. Celles-ci ne seront donc plus rechargées dynamiquement lors de chaque visite. Si vous activez l’option, vous allez réduire le temps de chargement d’une façon drastique (on aime!). Voyez l’image ci-dessous pour voir comment fonctionne le Page Cache :

page cache wordpress

Comme vous pouvez le voir, normalement quand un utilisateur visite votre site, WordPress lance des scripts PHP et des demandes MySQL à votre base de données afin de trouver la page demandée. Le code du fichier PHP décompose les données et génère une page. La procédure demande des ressources au serveur. Une fois le caching de la page activé, le chargement du serveur est obsolète puisqu’une copie en cache est envoyée à l’utilisateur lorsqu’il revient sur la page.

Pour les hébergements WordPress mutualisés, qui sont souvent utilisés par les débutants, il est vivement recommandé d’utiliser la méthode Disk:Enhanced. Vous devriez cocher Enable Page Cache et ensuite sauvegarder les paramètres.

w3totalcache-diskenhanced

Pour la plupart des gens, cette manipulation leur suffit pour obtenir un bon caching des pages. Puisque ce guide est destiné aux débutants, nous passerons la configuration des paramètres avancés, les options par défaut étant suffisantes. Nous passerons également les options Minify, Database Cache et Object Cache. La raison étant que tous les serveurs ne fournissent pas des résultats optimisés pour ces options.

Qu’est-ce que le Browser Cache?

Chaque fois qu’un utilisateur visite un site, afin d’améliorer l’expérience de l’utilisateur, le navigateur télécharge dans son dossier de fichiers temporaires toutes les images, les fichiers CSS, JavaScripts et autres fichiers statiques. De cette façon, lorsqu’un utilisateur visitera la page suivante, celle-ci chargera beaucoup plus vite parce que tous les fichiers statiques seront déjà dans le cache de son navigateur. Autre option hyper performante.

L’option Browser Cache de W3 Total Cache se fixe une limite dans le temps. Partant du principe dont vous ne changerez pas votre logo tous les jours, il n’y aura aucun problème qu’un tel fichier soit mit en cache pour 24 heures. Cochez simplement Enable sous l’option Browser Cache et cliquez sur Save all settings. A présent cliquez sur Performance » Browser Cache pour plus de paramètres.

w3totalcache-browser

Comme vous pouvez le voir dans l’image ci-dessus, nous avons presque tout activé, sauf l’option des erreurs 404. Une fois que vous sauvez les paramètres, toutes les autres options vont être automatiquement mises à jour d’elles-mêmes.

Qu’est-ce qu’un CDN ?

CDN, qui veut dire Content Delivery Network, vous permet de gérer votre contenu statique depuis plusieurs serveurs en réseau, plutôt que de n’utiliser que votre serveur qui vous héberge pour fournir vos fichiers. Cela permet de réduire le temps de chargement du serveur et d’accélérer votre site WordPress.

W3 Total Cache est compatible avec StackPack (anciennement MaxCDN), Amazon S3, Rackspace Cloud et Amazon Cloud Front. Ce paragraphe ne concerne que les sites qui utilisent un CDN ou qui souhaitent en utiliser un. Si vous pensez que vous utiliserez un CDN, nous vous recommandons StackPack (utilisez le code “daily” pour bénéficier d’une réduction de 25%). C’est super facile à utiliser et très efficace. Voici comment faire.

La première chose que vous devez faire est de créer un Pull Zone dans votre tableau de bord StackPack. Connectez-vous à votre compte StackPack, cliquez sur Manage Zones et ensuite sur Create Pull Zone.

Max CDN

Sur la prochaine page, il vous sera demandé de fournir les détails de votre pull zone:

  • Pull Zone Name : Donnez simplement un nom à cette zone afin que vous puissiez l’identifier dans votre panneau StackPack.
  • Origin Server URL : Entrez l’URL de votre site WordPress, en commençant par https:// et en ajoutant un slash / à la fin.
  • Custom CDN Domain : Entrez n’importe quel sous-domaine. Par exemple : cdn.wppourlesnuls.com
  • Label : Inscrivez une description pour ce pull zone.
  • Compression : Permettre la compression vous fera économiser de la bande passante, il est donc recommandé que vous cochiez cette case.

cdn label

Cliquez sur Create et StackPack créera la Pull Zone. Sur la page suivante se trouvera une URL comme celle-ci : wpb.wppourlesnuls.netdna-cdn.com. Copiez et sauvez cette URL dans votre bloc-notes afin de l’utiliser plus tard. Maintenant que nous avons créé un Pull Zone, la prochaine étape est de configurer des zones de contenu. Vous pouvez le faire en allant sur le tableau de bord de votre StackPack. Cliquez sur Manage, à côté du Pull Zone que vous venez de créer. Sur la page suivante, cliquez sur Settings. Le but de créer des zones de contenu est d’ajouter des sous-domaines afin d’améliorer l’expérience de l’utilisateur en mettant en attente du contenu de différents sous-domaines dans le navigateur de l’utilisateur. Pour ça, cliquez sur Custom Domains et ajoutez différents sous-domaines. Voir la capture d’écran :

cdn custom domain

Une fois que vous avez ajouté des domaines personnalisés, cliquez sur « Update ». À présent, nous allons configurer les registres CNAME pour les sous-domaines. La plupart de nos fournisseurs recommandés pour l’hébergement WordPress, tels que EX2, fournissent un cPanel à leurs clients. Celui-ci permet de gérer différentes options d’hébergement. Nous allons vous expliquer comment configurer un registre CNAME dans le cPanel pour votre CDN. Connectez-vous à votre tableau de bord cPanel et cliquez sur Simple DNS Zone Editor sous Domains.

cname

Sur la page suivante, vous trouverez un formulaire avec deux champs. Entrez le nom du sous-domaine que vous avez donné lorsque vous avez créé la zone de contenu dans StackPack. Par exemple, vous aviez écrit cdn pour cdn.wppourlesnuls.com. cPanel va automatiquement compléter le domaine. Dans le champ CNAME, entrez l’URL fournie par StackPack quand vous avez créé le pull zone. Il s’agit de l’URL que vous avez dû sauver dans votre bloc-notes.

cpanel cname

Répétez la procédure pour tous les sous-domaines, par exemple cdn1, cdn2, etc. Rappelez-vous que seulement le nom du champ changera à chaque fois et que le champ CNAME sera toujours l’URL fournie par StackPack pour votre Pull zone. Une fois que vous avez créé vos registres CNAME pour tous les sous-domaines, il est temps de retourner dans votre WordPress et de configurer StackPack avec W3 Total Cache.

Dans W3TotalCache, cliquez sur Performance » General Settings. Descendez jusqu’à ce que vous arriviez à CDN configuration. Cochez Enable et sélectionnez StackPack depuis le menu déroulant CDN Type. Cliquez sur Save All Settings.

Activation du CDN

Vous verrez alors une notification qui vous demandera de fournir les informations de votre « Authorization Key » et de remplacer le nom de l’hébergeur par défaut (« Replace default hostname with ») par les champs et de sélectionner un pull zone. Cliquez sur « Specify it here » et W3 Total Cache vous mènera sur la page du CDN.

Ensuite, cliquez sur le bouton « Authorize ». Vous serez dirigé vers le site StackPack où sera générée une clé d’autorisation. Copiez-collez cette clé et retournez sur W3 Total Cache. Dans « Replace site’s host name with » entrez le sous-domaine que vous avez créé précédemment. Enregistrez tous les paramètres. C’est tout. Votre site est à présent configuré pour fournir des dossiers statiques utilisant StackPack. Maintenant, si vous chargez votre site, les images de l’URL seront fournies depuis le sous-domaine CDN au lieu du domaine actuel de votre site. Par exemple, https://www.wppourlesnuls.com/wp-content/uploads/2010/08/w3totalcachecdnconfig.gif sera remplacé par : https://cdn.wppourlesnuls.com/wp-content/uploads/2010/08/w3totalcachecdnconfig.gif.

Si aucun de vos fichiers statiques n’est chargé avec le CDN, c’est que vous ne les avez probablement pas spécifiés dans les paramètres de la liste des fichiers personnalisés dans W3 Total Cache. Si vous allez sur la page des paramètres CDN, vous verrez les options avancées ci-dessous :

CDN - Options avancées

Ajoutez simplement tous les fichiers ou dossiers que vous voulez inclure en CDN. Remarquez également la présence d’une liste de fichiers rejetés. Si jamais vous faites une mise à jour de votre design, votre feuille de style CSS (style.css) ne sera pas mise à jour immédiatement. Vous pouvez donc la placer dans la liste de fichiers rejetés, durant le temps où vous faites des changements. Si vous voulez la purger occasionnellement, vous pouvez le faire depuis votre tableau de bord StackPack.
Tous les points que nous avons parcourus jusqu’à présent fonctionneront parfaitement avec la grande majorité des hébergeurs. Cependant, W3 Total Cache possède encore plusieurs autres options hyper puissantes. En voici quelques-unes :

  • Minify: Minify réduit la taille de certains de vos fichiers statiques.
  • Database Caching: Le Database caching réduit le temps de chargement du serveur en traitant les demandes SQL en cache. Cela permet d’éliminer le temps de procédure des demandes vers la base de données. Lorsque nous avons commencé à utiliser cette fonction, il nous a semblé que la procédure prenait plus de temps qu’à l’habitude. Notre hébergeur nous a recommandé de ne pas l’activer. À la place, ils ont fini par nous activer le caching SQL de leur côté. Vous pouvez essayer le database caching et voir comment l’option influence votre temps de téléchargement. Ensuite, désactivez-le si vous ne remarquez pas de changement significatif. La plupart des hébergeurs mutualisés (partagés) ne conseillent pas cette option.
  • Object Caching: Si votre site est très dynamique, alors l’Object Caching pourrait vous aider. Il est principalement utilisé lorsque vous avez des demandes complexes à régénérer fréquemment dans votre base de données. Pour les débutants, oubliez cette fonction.

Comment transférer les scripts minifiés par W3 Total Cache dans le footer

Pour transférer les JavaScripts dans le footer, vous devez seulement ajouter ceci <!— W3TC-include-js-head —> dans le footer.php de votre thème, juste avant la fermeture de la balise </body> .

<!– W3TC-include-js-head –>
</body>

Pour conclure

Maintenant que tout est installé dans W3TotalCache, il est temps de créer une sauvegarde de vos configurations. Vous devrez retourner à la page des Paramètres généraux. Il existe une section Import/Export. Cliquez sur « Download the settings file » from your server.

Nous espérons que vous avez trouvé cet article utile. Pour ceux qui ne sont toujours pas convaincus par le concept du CDN, nous vous conseillons vraiment de l’utiliser. Le CDN et votre hébergeur travaillent ensemble pour améliorer grandement le temps de chargement et augmenter les performances de votre WordPress.

Source : Cet article est notre traduction francophone d’un post paru sur WpBeginner.com

Commentaires

  1. Jacques Nadeau a écrit

    Wow! Merci pour cette information. Le vitesse de chargement des sites web que l’on a conçu sur WordPress a toujours été un problème et je ne savais pas trop quoi faire pour, omis un sous-traitant qui offre ce service pour 500 $. Mais comme je viens de voir, une fois que l’on sait comment faire, ça ne semble pas si compliqué que cela… encore merci 😉

  2. Catherine a écrit

    Combien peut coûter MaxCDN par mois svp ? Merci!

  3. Louis-Philippe Dea a écrit

    Bonjour Catherine, en fait ça dépend de l’achalandage sur le site Internet où tu veux implanter cette stratégie. Ça peut être que quelques dollars par mois (nous avons plusieurs sites qui ne sont qu’à 1, 2 ou 3$/mois), comme ça peut être beaucoup plus. Par exemple, un de nos clients à environ 3-4 millions de visiteurs par mois, ça lui coûte environ 50 à 60 $ / mois dépendamment des mois.

  4. Hamdi Bouafoura a écrit

    Merci pour ce tuto, j’utilise le CDN sur mon site et je recommande vivement de l’utiliser, ça aide à améliorer la vitesse de chargement de votre site.

  5. Breackdown a écrit

    Bonjour,
    Merci pour ce super article. J’ai un site sur lequel j’ai une carte qui reference des lieux. Malheureusement j’ai un temps de réponse énorme. Je pense installer W3 TOTAL mais j’ai lu que l’installation de ce plugin peut briser le site. La video de presentation d’ailleurs parle ne pas l’installer si on a pas finit certaines configuration mais lesquelles ??? Merci pour votre aide.

    • Louis-Philippe Dea a écrit

      Bonjour,
      En fait, le fait d’installer et d’activer l’extension peut possiblement occasionner des erreurs de la même façon qu’installer un nouveau plugin peut le faire. Si c’est le cas, vous avez toujours la possibilité de désactiver celle-ci. Une bonne pratique serait toujours d’avoir un backup de la base de données avant d’effectuer ces manoeuvres. Pour votre information, il y a aussi le plugin de caching WP Rocket qui est devenu une référence dans le monde WordPress! Bonne suite!

  6. Pascal a écrit

    Merci, merci, merci finalement un article en français là j’ai réussie l ‘instalation sans obtenir de bogue et mon nouveau score est de 85% yahooou

    • Louis-Philippe Dea a écrit

      Félicitations Pascal!

  7. Marius a écrit

    Bonjour,

    Lorsque j’active mon plugin w3 total cache. Mon menu de mon site https://www.voyageconom.com/ ne s’affiche pas correctement dès la première fois. Au niveau des pages secondaire (nos offres / devenir partenaire / contact).

    Si je désactive le plugin cela fonctionne correctement.

    Si vous pouvez m’aider s’il vous plaît je suis débutant… :/ Merci beaucoup
    Marius

    • Louis-Philippe Dea a écrit

      Bonjour Marius,
      Cela est dû parfois aux options cochés dans W3 Total Cache. Par exemple, l’association des fichiers CSS ou/et JavaScript. Vérifiez chacune des options une par une et vous trouverez ce qui cause la problématique.

Ajouter un commentaire

Étant donné que chaque site WordPress est différent (versions, thèmes, plugins, etc.) et que WP Pour les Nuls est un site gratuit, le module de commentaire n'est pas un service d’assistance technique WordPress gratuit.