Vous venez d’installer le plugin de cache WP Rocket et vous souhaitez connaitre les meilleurs réglages à utiliser pour avoir un site ou blog WordPress qui se charge rapidement (moins de 2 secondes sur PC et mobile) ?
Pour découvrir les réglages qui offrent la meilleure performance, j’ai fait plusieurs tests de vitesse (manuellement et sur les sites comme Gtmetrix, WebPageTest, etc.) avant et après l’activation de chaque option.
Au long de cet article, vous verrez les options que je vous conseille d’activer et celles qui peuvent ralentir votre site ou blog WordPress.
Comme d’habitude, les tests ont été effectués sur une copie de mon blog voyage, qui a de nombreux articles et presque 30 plugins activés, ce qui permet d’avoir des résultats fiables.
Information : avant toute modification, je vous invite à désactiver le plugin WP Rocket et faire des tests de performance pour pouvoir comparer les résultats avant et après la modification des réglages.
Utilisez des sites comme GTMetrix, Pingdom, PageSpeed Insights, WebPageTest et GF.dev et faites des tests manuels sur votre navigateur.
Comment faire un test de vitesse manuellement sur Google Chrome ?
Ouvrez Google Chrome en navigation privée, cliquez sur le bouton droit de votre souris, puis sur « Inspecter ». Cliquez ensuite sur l’onglet « Network » ou « Réseau ». Collez le lien d’une page de votre site WordPress dans la barre de recherche, puis cliquez sur « Enter » sur votre clavier.
Tout en bas de votre navigateur dans « Load: » vous verrez le temps en secondes ou millisecondes que la page a mis à se charger.
Sommaire
Voici les options à activer pour bien configurer WP Rocket
Pour configurer WP Rocket, cliquez sur « Réglages » puis sur « WP Rocket » dans le tableau de bord de votre site WordPress. Vous arriverez sur le tableau de bord du plugin. Pour modifier les options, cliquez sur les onglets présents à gauche (cache, optimisation des fichiers, média, préchargement, etc.).
Cache
Dans l’onglet cache, cochez « Activer la mise en cache pour les appareils mobile« . Si vous avez un thème dédié au mobile, il faudra aussi cocher « Créer un fichier de cache à part pour les mobiles » (cas très rares).
Dans « Délai de nettoyage du cache« , par défaut toutes les 10 heures le cache sera supprimé, ce qui est un délai très court. Je vous conseille de l’augmenter à 24 heures au minimum et si vous avez un site ou blog statique comme le mien (pas de commentaires, pas de nouveaux articles tous les jours), choisissez 168 heures (7 jours) ou 0 heure pour que le cache ne s’efface jamais.
Information : si vous constatez des problèmes comme la validation d’un formulaire (ex. : page de contact) ou l’apparence de votre blog à cause d’un plugin, il faudra que le cache soit effacé toutes les 10 heures. Commencez par mettre un délai de 7 jours ou illimité (0), puis si vous constatez des erreurs 24 heures après la mise en cache, réduisez à 10h.
Information : Cliquez sur « Enregistrer les modifications » avant de passer à l’onglet suivant. Faites ceci pour chaque onglet.
Optimisation des fichiers
Les options dans cet onglet sont celles qui peuvent causer le plus de soucis comme des problèmes d’apparence ou une augmentation du temps de chargement (effet inverse de ce que l’on veut !).
Dans « Fichiers CSS » cochez seulement « Optimiser le chargement du CSS » puis « Load CSS Asynchronously« .
En activant l’option « Minifier les fichiers CSS », je n’ai vu aucune amélioration et en sélectionnant « Supprimer les ressources CSS inutilisées » dans « Optimiser le chargement du CSS » le temps de chargement est devenu plus long.
Information : avant de continuer, enregistrez les modifications, vérifiez qu’il n’y a pas de problèmes d’affichage et faites un test de performance.
Dans « Fichiers JavaScript » cochez seulement « Reportez l’exécution JavaScript« , ce qui va permettre de retarder le chargement des fichiers JavaScript jusqu’à l’interaction avec l’utilisateur.
Information : avant de continuer, enregistrez les modifications, vérifiez qu’il n’y a pas de problèmes d’affichage et faites un test de performance.
Si vous constatez des problèmes, dans « Fichiers JavaScript exclus » ajoutez ce code :
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)
Si vous ne souhaitez pas que tous les JavaScripts présents dans les dossiers wp-content ou wp-includes (où se trouvent tous les plugins et thèmes) soient exclus, il faudra ajouter manuellement chaque fichier JavaScript en commençant par les fichiers de votre thème, puis ceux des plugins qui posent problème.
Vous trouverez ici une liste des JavaScripts de plusieurs thèmes et plugins à exclure.
Si votre thème ou plugin qui pose problème ne figure pas dans la liste au-dessus, il faudra aller dans la partie « Waterfall » du site Gtmetrix ou WebPageTest pour connaitre les fichiers JavaScripts qui se chargent sur votre page. Vous pouvez aussi le faire à l’aide de votre navigateur (lisez le paragraphe situé au début de l’article « Comment faire un test de vitesse manuellement sur Google Chrome ? »).
Média
Dans cet onglet, sélectionnez le LazyLoad pour les iframes et vidéos « Activer sur les iframes et vidéos » puis cochez « Remplacer l’iframe YouTube par une image d’aperçu.
Si vous avez des vidéos YouTube dans vos articles, ces deux options vont considérablement améliorer le temps de chargement.
Vous pouvez laisser le LazyLoad pour les images désactivé, car WordPress le fait automatiquement depuis quelques versions (5.4).
Sélectionnez ensuite « Ajouter les dimensions d’image manquantes« , ce qui va permettre d’éviter les changements de mise en page.
Préchargement
Dans « Préchargement du cache » sélectionnez « Activer le préchargement » puis « Activer le préchargement du sitemap » et enfin « Sitemap XML …«
Information importante : activez les options de préchargement au-dessus après avoir fini de configurer tous les réglages du plugin WP Rocket et fait les tests de performance. Ces options consomment beaucoup de ressources du serveur, ce qui peut ralentir votre site et fausser les tests.
En fait, dans l’idéal pour que le préchargement ne ralentisse pas votre site, il faut activer les tâches CRON au niveau du serveur de votre hébergement. J’explique comment le faire dans cet article (étape 8, puis « Désactivez WP-Cron »).
Dans « Préchargement des liens » cochez « Activez le préchargement des liens » pour que lorsqu’un lecteur passe la souris sur un lien qui mène à un autre article sur votre site, la page se précharge avant que le lecteur clique, ce qui va permettre d’afficher la page instantanément.
L’option suivante est le « Préchargement des requêtes DNS » qui permet aux scripts hébergés sur d’autres serveurs comme Google, Facebook, etc., de charger plus rapidement, surtout sur les réseaux mobiles. Je vous le dis tout de suite, vous ne verrez pas une énorme différence lors du chargement de votre site, mais cela vous permet tout de même de gagner quelques millisecondes.
Pour connaitre les hôtes externes auxquels votre site se connecte, il suffit d’ouvrir la partie « Waterfall » du site Gtmetrix ou WebPageTest (après avoir testé une page de votre site WordPress) ou en utilisant la méthode manuelle sur votre navigateur (expliquée plus haut dans l’article).
Au moment d’ajouter un hôte externe, enlevez « https: » de l’url. Exemple : https://youtube.com, devient //youtube.com
Voici une liste des hôtes externes que vous pouvez ajouter (vous pouvez supprimer les hôtes que vous êtes sûr de ne pas utiliser) :
//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//use.fontawesome.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//googleads.g.doubleclick.net
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//youtube.com
//s3.buysellads.com
//api.pinterest.com
//assets.pinterest.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//referrer.disqus.com
//c.disquscdn.com
//cdnjs.cloudflare.com
//cdn.ampproject.org
//pixel.wp.com
//disqus.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//sitename.disqus.com
//stats.buysellads.com
//i.ytimg.com
//player.vimeo.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//stats.wp.com
//ajax.microsoft.com
//ajax.aspnetcdn.com
//s3.amazonaws.com
//code.jquery.com
//stackpath.bootstrapcdn.com
//github.githubassets.com
//ad.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
Dans « Préchargement des polices » ajoutez les polices que votre thème utilise pour aider les navigateurs à découvrir les polices contenues dans les fichiers CSS plus rapidement.
Vous trouverez ces informations à l’aide de « Waterfall » ou à l’aide de votre navigateur (expliqué plus haut).
Voici un exemple de police à ajouter :
/wp-content/uploads/omgf/astra-google-fonts/poppins-normal-400.woff2
Information : ajoutez les polices de votre thème au « préchargement des polices » seulement si vous n’utilisez pas le plugin OMGF qui permet d’avoir les polices de Google directement sur le serveur de votre site (ce plugin effectue déjà le préchargement).
Règles avancées
Dans cet onglet, vous n’avez rien à remplir, sauf si vous souhaitez que certaines pages ne soient jamais mises en cache (pages contact, connexion, etc.) ou qu’une page en particulier soit purgée à chaque fois qu’une page ou un article est mis à jour.
Base de données
Cette partie de WP Rocket est utile pour optimiser la base de données de votre site WordPress. De temps en temps (par exemple, une fois par mois), vous pouvez nettoyer les révisions ou brouillons autos, les transients (options temporaires), les commentaires indésirables et optimiser les tables de la base de données.
L’option « Nettoyage automatique » est intéressante pour ne plus avoir besoin de vous soucier du nettoyage, mais je vous conseille de le faire manuellement (tout comme les mises à jour automatiques des plugins et thèmes), car s’il y a un problème, vous risquez d’avoir un site HS plusieurs heures ou jours jusqu’à ce que vous en rendiez compte.
CDN
Si vous utilisez un CDN (utile seulement si vous avez de nombreux lecteurs éparpillés un peu partout dans le monde) pour vos images ou vos fichiers JS et CSS, cochez « Activez le Content Delivery Network » puis insérez l’url que votre fournisseur vous a donnée, en choisissant le type de fichiers que vous souhaitez qui soit prit en charge.
Heartbeat
Même si vous ne verrez pas de réduction sur le temps de chargement, cochez tout de même « Contrôler Heartbeat » pour réduire l’activité de cet API et ainsi économiser quelques ressources du serveur de votre hébergement.
Add-ons
Vous n’avez pas besoin de toucher à cette partie lorsque vous configurez WP Rocket, sauf si vous utilisez CloudFlare ou Sucuri.
Enregistrez les modifications, puis faites plusieurs tests de performance. Testez la même page que vous avez utilisée avant de configurer WP Rocket. Comme le préchargement est désactivé, ouvrez votre navigateur en mode privé et visitez votre site internet (la page à tester et d’autres pour vérifier qu’il n’y a aucun problème d’affichage ou qu’aucune fonctionnalité n’est HS) sur ordinateur et mobile.
Ouvrez au moins 3 fois la page testée en mode privée (fermez le navigateur et ouvrez à nouveau en mode privée) pour que le cache soit pris en compte.
Une fois que vous êtes content des résultats, activez le préchargement du cache.
Voici les résultats que j’ai obtenus après avoir mis en place les réglages de cet article :
Comme vous avez pu le voir sur les photos, les résultats obtenus sur les sites comme GTMetrix ou WebPageTest sont juste exceptionnels, sauf que les tests manuels sur Google Chrome sont loin d’être aussi bluffants !
Quand je fais le test manuellement sur un ordinateur, mon site se charge en 1,70 seconde, ce qui est très loin des résultats obtenus sur les sites au-dessus.
Cette différence entre vitesse réelle et vitesse théorique m’a fait tester d’autres plugins (j’utilisais WP Rocket depuis 2013) pour voir si j’arrivais à avoir une vitesse réelle plus rapide.
Après avoir testé plus d’une dizaine de plugins de cache, j’ai trouvé celui qui me donne les meilleurs résultats.
Le plugin en question s’appelle Breeze et il est gratuit !
Il appartient à l’entreprise CloudWays, hébergeur que j’utilise pour mes blogs. Sachez que si vous êtes chez un autre hébergeur, vous pourrez tout de même l’utiliser gratuitement.
Le seul inconvénient du plugin, c’est qu’il n’a pas toutes les options que dispose WP Rocket, comme le LazyLoad des vidéos.
Pour avoir les options mêmes options, il faudra installer d’autres plugins gratuits. Les voici :
Heartbeat Control par WP Rocket
Flying Scripts by WP Speed Matters (Breeze dispose d’une option semblable)
En ajoutant ces plugins au plugin de cache Breeze, j’ai réussi à diviser le temps de chargement par 3 (tests manuels), mais les tests sur les sites cités plus haut sont un peu moins bons qu’avec WP Rocket.
Conseil : si vous voyez une grande différence entre les tests manuels et les tests sur les sites comme WebPageTest, n’hésitez pas à tester les plugins gratuits cités plus haut.
Après de nombreuses années à utiliser WP Rocket, j’ai décidé de ne pas renouveler la licence annuelle, car dans mon cas personnel, les plugins gratuits font un meilleur boulot (tests manuels).
Ne vous focalisez pas sur les notes ou vitesses des sites comme PageSpeed Insights, mais sur les tests réels, la vitesse que Google Analytics vous donne et les données sur Search Console de Google (si votre site est lent, vous en serez informé).
Information importante : les plugins de cache comme WP Rocket vont vous aider à avoir un site qui se charge plus rapidement, mais ils ne peuvent pas faire de miracles si vous avez un site WordPress trop lourd (sous-optimisé).
Je vous invite à lire cet article qui vous montre comment accélérer un site WordPress lent. Le plugin de cache n’est qu’une des 10 étapes pour avoir un site avec une vitesse inférieure à 2 secondes !
