Prêt à configurer les meilleurs paramètres de WP Rocket ?
WP Rocket est certainement le meilleur plugin de cache pour WordPress. En parti car c’est celui qui est livré avec plus de fonctionnalités d’optimisation de la vitesse que tout autre plugin de cache.
C’est pourquoi il donne généralement de meilleurs résultats dans PageSpeed Insights et GTmetrix.
Ce guide va au-delà de la configuration des paramètres de WP Rocket. Il vous montre comment utiliser WP Rocket pour servir les actifs statiques avec une politique de cache efficace, précharger le code tiers, précharger les polices et optimiser les polices, retarder JavaScript, le meilleur choix pour les CDN, et supprimer les anciennes tables de plugins.
Si vous n’avez pas encore acheté WP Rocket, vous pouvez obtenir jusqu’à 30% de réduction en cliquant ici.
Sommaire
Comment paramétrer et configurer WP Rocket pour maximiser les performances de votre site web ?
Avant de commencer, gardez toujours à l’espris que sache site est construit différenement, et que certains paramètres ont donc une efficacité qui varie d’un site à l’autre.
Je vous recommande de toujours tester les paramètres et de vérifier leurs effets site votre site.
Voici un apperçu des différentes sections de paramétrage de WP Rocket.
Il y en a un packet alors commençons sans plus tarder.
1. Tableau de bord – WP Rocket
Laissez les deux options désactivées, sauf si vous voulez être un bêta-testeur ou laisser WP Rocket collecter vos données de manière anonyme, ce qui entraîne une (très faible) diminution des performances.
RocketCDN est couvert dans la section CDN que je recommande d’utiliser à la place de Cloudflare.
Vous pouvez vider le cache ou régénérer les CSS critiques si vous effectuez des modifications de mais qu’elles n’apparaissent pas sur votre site.
2. Cache – WP Rocket
Ce sont de bons paramètres de cache tant que vous n’utilisez pas de plugin pour votre site Web mobile et que vous ne permettez pas à plusieurs utilisateurs de se connecter à votre site.
J’ai augmenté la durée de vie du cache de 10h à 20h afin que le cache n’ait pas à être rafraîchi aussi souvent, ce qui économise un peu les ressources du serveur.
Cache mobile – active la mise en cache pour les appareils mobiles. N’activez « separate cache files for mobile devices » que si vous utilisez un plugin pour votre site Web mobile (comme la version gratuite de WP Touch).
Cache utilisateur – laissez cette option désactivée, sauf si des utilisateurs se connectent à votre site Web (bbPress, par exemple) et qu’il existe un contenu spécifique à l’utilisateur. Cela donne à chaque utilisateur sa propre version du cache.
Durée de vie du cache – un nombre plus faible signifie que le cache sera rafraîchi plus fréquemment, mais il consomme plus de ressources. Une durée de vie du cache avec un chiffre plus élevé signifie qu’il ne sera pas rafraîchi aussi fréquemment, mais qu’il économise des ressources. Vous préoccupez-vous davantage du rafraîchissement fréquent de votre cache ou de l’économie des ressources du serveur ? Personnellement, 20h est plus adapté à mes besoins.
3. Optimisation des fichiers – WP Rocket
Tous les paramètres HTML, CSS et JavaScript doivent être activés individuellement lorsque vous testez votre site pour détecter les erreurs visibles.
Ce sont les paramètres d’optimisation des fichiers que j’utilise et qui m’ont donné les meilleurs résultats dans GTmetrix, mais vous devez tester votre rapport GTmetrix pour vérifier l’impact de chaque paramètre.
Minifier les fichiers – permet de réduire les fichiers HTML, CSS et JavaScript. Vérifiez que votre site ne présente pas d’erreurs de réduction après avoir activé chacune de ces options. Si vous en voyez, consultez votre code source, trouvez les fichiers CSS ou JavaScript problématiques et excluez-les de la réduction. De cette façon, vous bénéficiez toujours des avantages de la réduction (mais pas pour ce fichier). Sinon, ils doivent tous être activés.
Combiner les fichiers – La question de savoir si vous devez combiner les fichiers CSS et JavaScript est discutable. D’un côté, cela peut améliorer les résultats de Lighthouse. D’un autre côté, cela peut ralentir ou détruire votre site. Je recommande toujours de l’activer, en particulier pour les sites plus légers, mais les résultats doivent être testés.
Exclure CSS + JS – si, pour une raison quelconque, une option de minification perturbe la mise en page de votre site, localisez le fichier problématique et ajoutez-le ici. Voir l’article de WP Rocket sur la résolution des problèmes de minification.
Optimiser la livraison CSS – votre page commencera à se charger sans les styles CSS qui sont un élément déprécié dans PageSpeed Insights. WP Rocket génère automatiquement ceci pour vous, mais souvent, cela ne fonctionne pas correctement. Suivez ces étapes pour vous assurer que la livraison CSS optimisée fonctionne correctement.
- Recherchez « rocket-critical-css » dans votre code source pour vous assurer qu’il fonctionne.
- S’il n’apparaît pas, régénérez le CSS critique dans WP Rocket et les constructeurs de pages (si besoin).
- Passez votre site dans PurifyCSS.
- Téléchargez le CSS combiné, purifié et minifié.
- Collez le code CSS dans le champ « fallback critical CSS ».
- Désactivez la livraison optimisée de CSS sur des pages/postes individuels si nécessaire.
- Excluez les fichiers problématiques de la livraison CSS.
Remove jQuery Migrate – supprime le fichier jQuery migrate qui se charge automatiquement dans WordPress (et crée une requête supplémentaire) mais qui n’est généralement pas nécessaire sur la plupart des sites Web.
Load JavaScript Deferred – charge JavaScript après que la page ait fini d’être analysée. C’est l‘une des meilleures façons d’éliminer les ressources qui bloquent le rendu.
Safe Mode For jQuery – à activer uniquement si vous voyez des erreurs sur votre site Web lorsque vous activez l’option précédente (chargement différé de JavaScript). Cela exclut le fichier jQuery du chargement différé.
Charger le JavaScript en différé – cette fonction à elle seule a réduit le temps de chargement de mon blog d’environ 1s sur chaque article en retardant les commentaires et les Gravatars.
4. Médias – WP Rocket
La plupart des sites devraient tout activer, notamment dans les paramètres de lazyload.
Si vous utilisez des vidéos YouTube intégrées sur votre site, le remplacement de l’iframe YouTube par une image de prévisualisation peut réduire de moitié les temps de chargement, car les vidéos sont très lourdes.
Vous aurez également toujours besoin d’un plugin pour créer des images WebP comme WebP Converter for Media.
Lazy Load – retarde le chargement des images, des iframes et des vidéos jusqu’à ce que vous fassiez défiler la page et qu’elles deviennent visibles. Cela réduit considérablement les temps de chargement initiaux et les requêtes HTTP, mais le chargement constant des images lorsque vous faites défiler la page peut être gênant (testez-le vous-même). Chargez toujours les vidéos paresseusement et remplacez les iframes par une image de prévisualisation, car les vidéos intégrées sont très lourdes.
Ajouter les dimensions d’image manquantes – WP Rocket ajoutera les attributs largeur + hauteur manquants aux images HTML, ce qui devrait corriger presque toutes les erreurs de dimension d’image spécifiées dans les outils de test de vitesse.
Disable WordPress Embeds – similaire à la prévention des liens chauds de Cloudflare, cela empêche les autres sites d’intégrer votre contenu sur leur site, ce qui consomme de la bande passante et sollicite votre serveur.
WebP Caching – activez cette option si vous utilisez des images WebP. Si vous n’utilisez pas encore d’images WebP, vous devriez le faire car elles se chargent plus rapidement et sont plus belles que les images JPEG et PNG. L’utilisation de WebP corrige également l’élément « servir les images au format next-gen » dans PageSpeed Insights. Vous aurez toujours besoin d’un plugin qui convertit les images en WebP. J’utilise le plugin WebP Converter For Media mais Imagify ou encore ShortPixel ont une option pour convertir les images en WebP.
5. Préchargez – WP Rocket
Le préchargement est effectué automatiquement par WP Rocket lorsque vous l’activez avec votre sitemap XML.
Le prefetching et le preloading sont particulièrement importants pour l’optimisation des polices et des scripts tiers..
Préchargement – indique aux navigateurs de commencer à récupérer les ressources qui seront bientôt nécessaires.
Préchargement des liens – selon l’article de WP Rocket, cette fonction fait en sorte que si un utilisateur survole ou touche un lien pendant 100 ms ou plus, le HTML de cette page sera récupéré en arrière-plan, de sorte que lorsqu’il clique sur le lien, la page semble se charger presque instantanément.
Préchargement des requêtes DNS – exécutez votre site à travers GTmetrix et regardez la section Reduce DNS Lookups dans votre rapport YSlow. Vous verrez tous les scripts tiers se charger sur votre site, qu’il s’agisse de Google Fonts, de Google Analytics, de Maps, d’ASense, de Tag Manager, de YouTube ou même de plateformes de médias sociaux si vous intégrez des messages sociaux ou utilisez des boutons de partage social sur votre blog.
Préchargement des polices – copiez vos fichiers de polices depuis GTmetrix Waterfall (il y a un onglet pour les fichiers de polices) et collez-les dans le champ de préchargement des polices de WP Rocket. Retestez votre site web et ils devraient se charger plus rapidement.
6. Règles avancées – WP Rocket
Les règles avancées sont principalement destinées aux sites de commerce électronique, cependant WP Rocket est déjà compatible avec la plupart des solutions comme WooCommerce et BigCommerce.
Mais si vous avez des problèmes avec les widgets de panier, la mise en cache, ou quelque chose lié à l’eCommerce, WP Rocket a une documentation pour cela.
Sinon, laissez ce champ vide.
Ne jamais mettre en cache ces URL(s) – si vous utilisez un panier d’achat eCommerce qui n’est pas pris en charge par WP Rocket, ajoutez votre panier et vos pages de paiement ici, ce qui exclura ces pages du cache.
Ne jamais mettre en cache ces Cookies – même principe que l’option précédente, mais basé sur les cookies.
Ne jamais mettre en cache ces User Agents – empêche Googlebot ou d’autres agents utilisateurs de mettre les pages en cache.
Toujours purger ces URL(s) – disons que vous avez une liste de blogs sur votre page d’accueil. Si vous créez un nouvel article, vous voulez que cette liste de blogs soit immédiatement mise à jour en vidant le cache de la page d’accueil. C’est ce que fait ce paramètre, mais WP Rocket vide automatiquement le cache de votre page d’accueil, des catégories et des balises dès qu’un nouveau contenu est créé… il n’est donc généralement pas nécessaire de le faire.
Cacher les Query String(s) – principalement utilisé pour mettre en cache les pages de résultats de recherche + les filtres de prix sur le commerce électronique.
7. Base de données – WP Rocket
La planification des nettoyages de la base de données permet de maintenir la rapidité de votre site et de votre administration. Il suffit de savoir ce que vous supprimez.
- Révisions – anciennes versions de vos messages qui sont enregistrées lorsque vous cliquez sur « Publier ».
- Brouillons auto – ersions de vos messages enregistrées automatiquement si vous ne cliquez pas sur « Publier ».
- Contenus dans la corbeille – messages et brouillons que vous avez supprimés.
- Commentaires indésirables – commentaires marqués comme spam.
- Commentaires à la corbeille – commentaires marqués comme mis à la corbeille.
- Tous les transients – stocke les données qui prennent beaucoup de temps à récupérer (par exemple, les comptes sociaux sur les blogs)..
- Optimiser les tables – optimise les tables de la base de données pour un fonctionnement plus efficace.
- Planifier le nettoyage automatique – à quelle fréquence vous souhaitez que WP Rocket nettoie votre base de données.
Une chose que WP Rocket ne fait pas est de vous permettre d’aller dans vos tables de base de données individuelles et de supprimer les tables laissées par les anciens plugins qui ne sont plus installés.
Je recommande d’installer WP-Optimize et de passer en revue vos tables de temps en temps, surtout si vous avez supprimé des plugins.
8. CDN – WP Rocket
Les CDN sont excellents si vous avez des visiteurs éloignés de votre serveur d’origine. Ils reflètent votre site sur plusieurs centres de données, ce qui réduit la distance géographique entre votre serveur et les visiteurs.
Quel est le meilleur CDN ?
- StackPath – C’est le meilleur CDN pour WordPress. Il offre des serveurs rapides comme l’éclair qui délivrent le contenu en 20 ms.
- Cloudflare – gratuit, mais pas un vrai CDN puisque Cloudflare ne sert pas les actifs à partir d’une URL CDN. Idéal pour les petits sites Web, mais il existe des CDN plus performants. Si vous utilisez Cloudflare, il vaut la peine de payer 5 $/mois pour leur APO.
- RocketCDN – CDN payant, le plus facile à configurer via WP Rocket, utilise les centres de données de StackPath, mais RocketCDN n’est pas toujours performant et peut même augmenter les TTFB.
Les CDN ont des centres de données dans le monde entier. Si l’un d’entre eux est fortement concentré dans la zone que vous souhaitez, cela vaut la peine de l’envisager.
L’onglet CDN est destiné à RocketCDN, et aux CDN qui utilisent une URL CDN. Il n’est pas destiné à Cloudflare, qui nécessite de modifier les dns, puis d’utiliser l’onglet Cloudflare.
- Étape 1 : S’inscrire à un CDN.
- Étape 2 : Créez une zone d’attraction et choisissez les emplacements que vous voulez.
- Étape 3 : Copiez votre URL CDN.
- Étape 4 : Collez l’URL CDN dans le champ CDN CNAME(s) de WP Rocket.
Test des CDN – étant donné que Cloudflare est configuré différemment et nécessite de changer les serveurs de noms, le « content delivery network » dans GTmetrix sera toujours rouge (mais il sera vert pour les autres CDN). Cela ne signifie pas que Cloudflare ne fonctionne pas ; utilisez l’extension Claire Chrome pour vous en assurer.
Exclure les fichiers du CDN – vous permet de servir les fichiers localement au lieu du CDN. Habituellement, ces fichiers proviennent de plugins conçus pour ne pas tenir compte de la charge inter-domaines. Dans la plupart des cas, ce n’est pas nécessaire.
9. Heartbeat
Au lieu d’utiliser le plugin Heartbeat Control, WP Rocket l’a intégré.
L’API WordPress Heartbeat vous indique quand d’autres utilisateurs modifient une page/un article et vous montre les notifications du plugin en temps réel. Vous souhaitez généralement désactiver complètement Heartbeat, ou du moins le réduire, car il consomme des ressources et contribue aux surcharges du processeur.
10. Add-Ons
Si vous utilisez l’un de ces services, activez son add-on.
Google Tracking – résout le problème de la « mise en cache du navigateur » pour Google Analytics dans votre rapport GTmetrix en hébergeant Google Analytics localement. Si ce n’est toujours pas 100%, essayez Flying Analytics.
Facebook Pixel – si vous utilisez Facebook Pixel, activez-le pour l’héberger localement. Si vous utilisez Facebook Pixel, n’oubliez pas de l’optimiser dans l’onglet Préchargement.
Varnish – configuré automatiquement selon que votre hébergeur utilise ou non Varnish (Cloudways, Flywheel, WP Engine). Sinon s’ils n’utilisent pas Varnish, cela sera désactivé automatiquement.
Cloudflare – activez si vous utilisez Cloudflare.
Synchroniser le cache de Sucuri – activez si vous utilisez Sucuri. Cela efface automatiquement le cache de Sucuri chaque fois que vous effacez le cache de WP Rocket, ce qui permet de garder votre contenu synchronisé. Pour la clé API de Sucuri Firewall (pour le plugin), connectez-vous à Sucuri ici, sélectionnez votre site Web, allez à l’onglet API, puis copiez votre clé API (pour le plugin) et collez-la dans WP Rocket lorsque vous développez le champ Sucuri.
11. Cloudflare
Cette section ne s’applique que si vous utilisez Cloudflare au lieu d’un autre CDN.
12. Image Optimization
WP Rocket recommande Imagify parce que c’est leur plugin.
13. Tools
Importez et exportez vos paramètres WP Rocket, ou revenez à la version précédente de WP Rocket.
Export Settings – exportez vos paramètres pour les utiliser sur plusieurs sites.
Import Settings – importez vos paramètres pré-configurés ici.
Rollback – si vous mettez à jour une nouvelle version de WP Rocket et qu’elle pose des problèmes, vous pouvez revenir à la version précédente.
Enable Google Font Optimization – combine les polices en un seul fichier, garantit que le texte reste visible pendant le chargement des polices et préconnecte les polices. N’oubliez pas de préextraire et de précharger les polices dans l’onglet Préchargement et soyez minimal avec le nombre de polices, les poids et les icônes de police. Tous ces éléments ont un impact sur les temps de chargement de vos polices.
Pour résumer : Comment configurer WP Rocket
Voici comment configurer WP Rocket pour améliorer la vitesse de votre site WordPress :
1. Installez et activez le plugin WP Rocket sur votre site WordPress.
2. Accédez à l’onglet « Général » dans les réglages de WP Rocket et activez les options suivantes :
- Mise en cache des pages pour les visiteurs
- Mise en cache des pages pour les utilisateurs connectés
- Optimisation du CSS
- Optimisation du JavaScript
- Optimisation des Google Fonts
3. Accédez à l’onglet « Fichiers statiques » et activez l’option « Mise en cache des fichiers statiques ».
4. Accédez à l’onglet « Performance » et activez les options suivantes :
- Optimisation de la base de données
- Optimisation de Google Fonts
- Optimisation de l’empreinte du serveur
- Optimisation du cache des pages
5. Accédez à l’onglet « CDN » et entrez les informations de votre fournisseur de CDN (si vous en utilisez un).
6. Accédez à l’onglet « Avancé » et activez les options suivantes :
- Optimisation de la mémoire cache
- Optimisation de la compression Gzip
- Optimisation de l’expiration des en-têtes
7. Cliquez sur le bouton « Enregistrer les modifications » pour enregistrer les réglages de WP Rocket.
8. Vérifiez que toutes les options sont activées et que les réglages sont corrects. Vous pouvez également ajuster d’autres paramètres selon vos besoins, tels que l’exclusion de certains fichiers ou dossiers de la mise en cache.
9. Vérifiez la vitesse de votre site en utilisant un outil de test de vitesse comme GTmetrix ou Pingdom. Ces outils vous montreront les éléments qui ralentissent votre site et vous indiqueront comment les optimiser.
WP Rocket: Le meilleur plugin de mise en cache
WP Rocket est livré avec de nombreuses fonctionnalités que la plupart des plugins de cache n’ont pas.
Cela signifie que si vous deviez utiliser d’autres plugins de cache, vous auriez besoin d’installer environ 5-10 plugins supplémentaires pour obtenir ces fonctionnalités alors que WP Rocket les a déjà intégrées.
C’est aussi pourquoi WP Rocket donne de meilleurs résultats dans GTmetrix/Pingdom.
Vous pouvez consulter ma revue complète de WP Rocket pour savoir en détail pourquoi je l’utilise et je vous le recommande.
Si vous ne l’avez pas encore acheté et installé voici un coupon de réduction de 10% sur WP Rocket
