WP Rocket : Le guide ultime pour accélérer votre site WordPress

Vous avez peut-être entendu dire que WP Rocket était le meilleur plugin de cache sur le marché et vous souhaitez suivre un tutoriel complet pour le configurer efficacement ?

Alors vous êtes au bon endroit.

Saviez-vous que l’amélioration de la vitesse de chargement de votre site web est essentielle non seulement pour offrir une expérience utilisateur satisfaisante, mais aussi pour booster votre référencement ?

Selon Google, 53% des visiteurs abandonnent un site sur mobile s’il prend plus de 3 secondes à charger.

Dans ce guide complet sur WP Rocket, nous allons explorer en détail comment cette extension peut vous aider à améliorer les performances de votre site WordPress.

Nous commencerons par comprendre l’importance de la vitesse de chargement pour l’expérience utilisateur et le référencement, puis nous passerons à l’installation et à la configuration de WP Rocket.

WP Rocket en quelques mots

Pourquoi un site web a besoin d’un plugin de cache ?

Installation de WP Rocket

Configuration de WP Rocket : Réglages de tous les onglets

Tarif et solutions alternatives à WP Rocket

Annonce : Certains liens de cet article peuvent être des liens affiliés. Autrement dit, une compensation pourra être reçue suite à un achat fait via ce lien (sans aucune majoration du prix du produit ou service). Avoir recours à des liens affiliés aide à rentabiliser le site pour continuer à vous fournir du contenu de qualité.

WP Rocket est un plugin de cache développé par WP Media, la même société française, responsable d’Imagify, le plugin dédié à l’optimisation de vos images.

WP Rocket est souvent salué comme l’un des meilleurs plugins de mise en cache pour WordPress. À tel point que de nombreux experts WordPress n’hésitent pas à recommander le plugin à leurs clients.

Et voici quelques-uns des avantages de ce plugin qui, à mes yeux, justifient pleinement chaque centime investi dans WP Rocket :

1 – Facilité d’utilisation : L’interface utilisateur est intuitive et facile à utiliser, ce qui facile grandement la configuration du plugin.

2 – Compatibilité : Dès la première version de WP Rocket en 2013, l’objectif était déjà que le plugin soit compatible avec les sites multilingues et e-commerce. Aujourd’hui, WP Rocket est le seul plugin de cache compatible avec 99% des hébergeurs sur le marché.

3 – Support : Pour chaque option à activer, une rubrique d’aide est disponible pour expliquer un peu plus en détails ce qu’implique la fonctionnalité concernée.

5 – Optimisé pour Google : Sans même avoir à configurer le plugin, son activation en elle même intègre plus de 80% des bonnes pratiques de performance web.

Il suffit de faire une analyse avant et après activation du plugin avec PageSpeed Insights pour observer une nette amélioration des indicateurs des Core Web Vitals :

• Largest Contentful Paint (LCP qui mesure la performance de chargement)
• First Input Delay (FID qui mesure l’interactivité)
• et le Cumulative Layout Shift (CLS qui mesure la stabilité visuelle).

Score de Pinroo sur PageSpeed Insights – après activation de WP Rocket

Avant de commencer à configurer WP Rocket, cherchons à comprendre le principe d’un plugin de cache et ce qu’il apportera à votre site.

Quel est le principe d’un plugin de cache pour un site WordPress ?

Imaginons le processus : chaque fois qu’un visiteur accède à votre site, le serveur doit générer dynamiquement la page à partir d’éléments tels que les fichiers CSS, JavaScript, et les données stockées dans la base de données.

Cette opération consomme du temps et des ressources du serveur.

C’est là qu’intervient le cache.

Lorsque d’autres utilisateurs visitent la même page par la suite, le serveur fournit simplement cette version statique au lieu de générer dynamiquement la page à nouveau.

En évitant d’interroger sans cesse la base de données pour qu’un visiteur puisse accéder à une page, le temps de chargement de la page est considérablement raccourci, vu que les ressources du serveur ne sont pas utilisées pour reconstruire la page à chaque visite.

Pourquoi devriez-vous vous soucier de la vitesse de votre site web ?

On vit dans un monde où l’attention des utilisateurs est limitée, chaque seconde compte. Une expérience utilisateur fluide et rapide est devenue un critère essentiel pour maintenir l’intérêt des visiteurs.

Si votre site met une éternité à se charger, les visiteurs risquent de se frustrer et de quitter votre site. Mais qu’en est-il de l’impact réel sur votre chiffre d’affaires ?

Selon des études de Portent, il existe une corrélation directe entre les temps de chargement et les taux de conversion. Un site B2B qui se charge en une seconde peut avoir un taux de conversion trois fois supérieur à celui d’un site qui prend cinq secondes pour se charger.

Il est donc impératif de fournir des pages qui se chargent rapidement et offrent une expérience utilisateur sans accroc.

Mais ce n’est pas seulement vous qui vous souciez de l’expérience utilisateur ; les moteurs de recherche, notamment Google, y attachent également une grande importance.

À tel point, que depuis 2021, la vitesse de chargement des pages web est devenu un des critères de référencement de Google avec l’ergonomie mobile, suite à sa mise à jour sur l’expérience utilisateur.

Mesure des performances avec PageSpeed Insights

Pour évaluer ces métriques et analyser les performances de votre site, on s’aidera de PageSpeed Insights, un outil gratuit développé par Google.

Il analyse la structure de votre site, vous attribue un score et vous fournit des recommandations pour améliorer vos performances.

Entre 2017 et 2020, l’entreprise s’est consacrée à proposer de nouvelles versions axées sur l’optimisation des performances web pour les fichiers CSS et JS.

En étant ainsi à l’écoute des recommandations de Google, les nouvelles versions ont ainsi pu permettre d’améliorer le score PageSpeed Insights pour ordinateur de bureau et mobile.

Étape 1 : Achat de la licence sur le site officiel

Pour se procurer le plugin, il sera nécessaire d’acheter la licence sur leur site officiel.

Vous aurez le choix entre 3 offres : pour 1, 3 ou un nombre illimité de sites.

Notez bien qu’il s’agit d’un abonnement annuel pour pouvoir bénéficier des mises à jour régulières et du support.

Sachez par contre que WP Rocket n’offre pas de version gratuite pour tester le plugin avant l’achat, mais propose une politique de remboursement de 14 jours.

Rien ne vous empêche donc de faire un test de performances avec PageSpeed Insights avant l’achat.

Achetez WP Rocket et configurez le à l’aide de ce tutoriel.

Puis refaites un test avec PageSpeed Insight et vous verrez que WP Rocket règle en général 80% des problèmes à lui tout seul.

Si, malgré cela, vous n’êtes toujours pas satisfait, n’hésitez pas à demander un remboursement. En fin de compte, vous n’avez strictement rien à perdre.

Honnêtement, le tester c’est l’adopter. Personnellement je ne regrette pas une seule seconde mon achat. Avant, j’utilisais W3 Total Cache, un plugin gratuit, et franchement, c’est le jour et la nuit en comparaison.

Étape 2 : Installation du plugin WP Rocket

Une fois que vous avez obtenu la licence, il vous suffira de cliquer sur Se connecter pour accéder à votre espace personnel.

Une fois téléchargé, vous aurez le plugin sous forme d’un fichier zip.

Téléversez-le sur WordPress via l’onglet Extensions > Ajouter, puis cliquez sur le bouton Téléverser une extension en haut de l’écran.

Une fois activée, vous retrouverez un raccourci de WP Rocket dans la barre supérieure de votre tableau de bord WordPress.

Cliquez sur Réglages pour commencer à configurer le plugin.

Navigation dans le tableau de bord

Avant de commencer la configuration, au niveau de votre tableau de bord, vous pourrez directement vous connecter à votre compte pour ajouter ou supprimer des sites si vous avez opté pour la Licence Plus ou Infinite.

Dans le tableau de bord, vous trouverez également de la documentation et des vidéos pour vous familiariser avec l’extension.

Il vous sera également possible de contacter le support pour toute question lié au fonctionnement du plugin.

N’hésitez pas à faire un test sur PageSpeed Insights pour comparer vos performances avant l’installation.

Au niveau de la barre latérale gauche, vous trouverez toutes les fonctionnalités clés pour personnaliser les performances de votre site.

Sans plus tarder, attaquons nous aux différents onglets du plugin pour commencer à configurer WP Rocket.

Onglet Optimisation des fichiers

Commençons avec l’onglet Optimisation des fichiers pour s’occuper des fichiers CSS et Javascript.

Nous verrons chaque point l’un après l’autre, mais prenez conscience que cocher certaines cases pourra entrainer des dysfonctionnement sur votre site.

Après tout chaque site est différent et ne réagira pas de la même façon.

C’est d’ailleurs la raison pour laquelle WP Rocket préconise de ne cocher qu’une seule case à la fois, puis d’observer si des anomalies sont apparues sur votre site avant de passer à d’autres optimisations.

Si c’est le cas, il suffira tout simplement de décocher l’option activée pour revenir à la normale.

Je ne le répéterai pas à chaque fois, mais après avoir coché une case, assurez-vous de deux choses :

• Premièrement, vérifiez qu’aucun problème n’est survenu sur votre site en visitant celui-ci dans une fenêtre de navigation privée. Pour l’optimisation des fichiers CSS, observez attentivement si les éléments visuels s’affichent correctement sur plusieurs pages de votre site, tandis que pour l’optimisation des fichiers JavaScript, concentrez-vous sur les aspects dynamiques de vos pages, tels que votre menu, par exemple.
• Deuxièmement, assurez-vous de constater une amélioration en effectuant plusieurs tests de performances sur PageSpeed Insights après chaque modification.

La section Fichiers CSS vous permettra de traiter les recommendations de PageSpeed Insights :

• Réduisez la taille des ressources CSS
• Réduisez les ressources CSS inutilisées
• et Éliminez les ressources qui bloquent le rendu

Les options de cette section sont conçues pour améliorer votre FCP (First Contentful Paint) et votre LCP (Largest Contentful Paint).

Rappelons que le LCP est l’un des Core Web Vitals utilisés par Google pour évaluer l’expérience utilisateur, parmi d’autres critères de référencement pour vos pages.

Minifier les fichiers CSS

Dans cette section nous commencerons par cocher la case Minifer les fichiers CSS pour réduire leur taille puis enregistrer les modifications.

  La minification est le processus qui vise à réduire la taille des fichiers source tels que le CSS, le JavaScript et l’HTML en éliminant les espaces, les commentaires et d’autres caractères inutiles sans altérer leur fonctionnalité.

En minifiant ces fichiers, on peut considérablement réduire leur taille, ce qui permet de réduire la quantité de données transférées sur le réseau et d’améliorer ainsi les performances du site web.

Ici après avoir valider la minification des fichiers CSS, vérifiez l’état de votre site web.

Combiner les fichiers CSS

Si tout va bien, passons à l’option Combiner les fichiers CSS pour réduire le nombre de requête HTTP.

Pour vérifier si votre site tourne sous HTTP/2, rendez-vous sur le site keycdn, entrez l’URL de votre site et vérifiez le résultat.

Si c’est le cas, ne cochez pas la case pour la concaténation des fichiers CSS.

Optimiser le chargement du CSS

La dernière option, Optimiser le chargement du CSS, a pour vocation de traiter de la recommandation PageSpeed Insights Éliminer les ressources qui bloquent le rendu dans le but d’améliorer le FCP et LCP.

Bien que l’idéal soit de donner la priorité au CSS critique, des outils automatisés comme des plugins peuvent parfois ne pas garantir une optimisation parfaite, ce qui peut laisser place à des erreurs potentielles.

Par ailleurs, le CSS non critique peut être différé pour améliorer le temps de chargement. La suppression du CSS inutilisé est également recommandée pour optimiser davantage les performances.

WP Rocket simplifie cette optimisation en offrant des options pour aligner le CSS critique, reporter le CSS non critique, et supprimer facilement le CSS inutilisé.

Cela permet d’optimiser la distribution du CSS et d’assurer un chargement rapide et efficace de votre site web.

WP Rocket recommande d’utiliser tout d’abord l’option Supprimer les ressources CSS inutilisées et d’utiliser le Chargement Asynchrone du CSS, si et seulement si la première option a causé des problèmes sur votre site.

Le JavaScript joue un rôle crucial en apportant de l’interactivité à votre site. Cependant, le téléchargement et l’exécution des fichiers JavaScript peuvent entraîner un ralentissement du site, car cela nécessite des ressources du navigateur.

Une solution recommandée est de différer l’exécution du JavaScript, ce qui permet de télécharger le fichier pendant l’analyse HTML, tout en le retardant jusqu’à la fin de cette analyse.

Cette approche vise à optimiser la vitesse du site en minimisant l’impact des ressources qui bloquent le rendu

Cependant, il est important de noter que cette approche peut parfois perturber l’ordre des choses et causer des erreurs sur le site.

• Réduisez la taille des ressources JS
• Réduisez les ressources JavaScript inutilisées
• et Éliminez les ressources qui bloquent le rendu.

Minifier les fichiers JS

Encore une fois on testera toujours un outil à la fois.

Pour la minification des fichiers JS pour réduire leur taille, on cochera, enregistrera les modifications et vérifiera sur notre site si des problèmes surviennent.

Cela nous permettra de s’occuper de la recommandation Réduisez la taille des ressources JavaScript de PageSpeed Insights.

Combiner les fichiers JavaScript

Pour la concaténation des fichiers JavaScript, encore une fois si votre site utilise HTTP/2, ce n’est pas recommandé. Ne cochez donc pas cette case si vous êtes concerné.

Charger le JavaScript en différé

Le chargement du JavaScript en différé permet d’améliorer le temps de chargement de vos pages et d’éliminer les ressources qui bloquent le rendu sur votre site.

Reporter l’execution JavaScript

En cochant cette case, vous pourrez améliorer vos performances si vous aviez reçu des recommandations suivantes de la part de PageSpeed Insights :

• Supprimez les ressources JavaScript inutilisés
• Minimiser le travail du fil principal
• et Réduire le temps d’exécution du JavaScript

• Total blocking time (TBT)
• Time to interactive (TTI)
• First contentful paint (FCP).

Onglet Medias

Au niveau de l’onglet Media, on retrouve 2 sections.

  Le lazy loading, également appelé chargement différé, est une technique qui vise à améliorer le chargement des images sur un site web. Plutôt que de charger toutes les images dès le début, cette approche permet de différer le chargement des ressources jusqu’à ce qu’elles soient nécessaires.

Sans LazyLoad, tous vos fichiers médias sont chargés dès le chargement de la page, ce qui ralentit son temps de chargement.

En activant les options liées à la section LazyLoad, vous répondez à la recommandation de PageSpeed Insights : Différez le chargement des images hors écran.

Pour ce qui est des dimensions des images, il est important de cocher la case Ajouter les dimensions des images manquantes.

Pour comprendre pourquoi, sachez que typiquement le code HTML d’une image ressemble à ca :

À l’intérieur d’une balise image, on retrouve :

• la source pour localiser l’image (src)
• l’attribut alt pour décrire l’image si celle-ci ne s’affiche pas
• et les dimensions de l’image (width et height).

En précisant dans le code la largeur (width) et la hauteur (height) d’une image, le navigateur peut “réserver” l’espace nécessaire pour que l’image puisse être affiché sur la page. Puisqu’en général les images mettent plus de temps à charger que le reste du document.

Par contre, lorsque les images manquent d’attributs de largeur et de hauteur, elles sont souvent redimensionnées via CSS.

Le problème c’est que cette pratique peut entraîner des modifications dans la mise en page pendant le téléchargement, ce qui peut perturber l’expérience utilisateur et contribuer à un score médiocre de CLS (Cumulative Layout Shift).

Le déplacement de contenu provoqué par le chargement tardif des images constitue une cause courante du décalage de la mise en page.

Pour éviter ce problème, Wp Rocket se charge pour vous d’ajouter les dimensions manquantes au niveau de chaque image.

Onglet Préchargement

L’onglet Préchargerment comprend 4 sections.

Le préchargement du cache avec WP Rocket garantit donc des performances optimales dès la première visite des utilisateurs, grâce à un préchargement automatique complet des URLs du site. Cela permet d’améliorer l’expérience utilisateur et d’accélérer le temps de chargement des pages.

En effet, dès qu’un utilisateur survole un lien, le code HTML de la page en question est préchargé en arrière-plan. Ainsi, lorsque l’utilisateur clique sur le lien, la page semble se charger instantanément, même si en réalité, elle était en cours de chargement au moment du survol.

Comme c’est indiqué dans la documentation : “Si vous avez du contenu tiers sur votre site Web (par exemple des polices chargées depuis Google, ou une vidéo depuis YouTube), vous pouvez ajouter son domaine d’origine à l’option  Préchargement des requêtes DNS.”

Onglet Règles avancées

Au niveau des règles avancées, vous pouvez taper des URLs de votre site qui ne seront pas mises en cache.

Onglet Base de données

Au niveau de l’onglet Base de données, il s’agira ici de l’optimiser en

• supprimant les révisions, brouillons automatiques et contenus dans la corbeille
• ainsi que les commentaires indésirables

  Attention ! Veillez bien à sauvegarder votre base de données avant de procéder au nettoyage.

Vous pourrez programmer un nettoyage automatique en choisissant la fréquence que vous jugerez utile, pour ne plus avoir à y penser à l’avenir.

Dans ce cas la, je vous conseillerai aussi d’opter pour des sauvegardes automatiques en utilisant un plugin spécialisé comme UpdraftPlus.

Onglet CDN

Un réseau de diffusion de contenu (CDN) est une solution efficace pour optimiser la distribution de fichiers statiques en les dispersant sur des serveurs répartis à travers le monde.

Cette approche réduit la distance physique entre le serveur et l’utilisateur, ce qui contribue à améliorer la vitesse de chargement.

© leaseweb

Lorsque votre audience est mondiale, l’utilisation d’un CDN est particulièrement utile, puisqu’elle rapproche votre site des utilisateurs finaux grâce à un réseau mondial de serveurs.

Cela se traduit par des temps de chargement nettement plus rapides par rapport à une distribution depuis un seul serveur central.

Notez que si vous avez opté pour un hébergeur web français et que votre public cible est exclusivement géolocalisé en France, un CDN ne vous servira strictement à rien.

Onglet Heartbeat

Il vous est possible de cocher l’option Contrôler Heartbeat puis de choisir de réduire l’activité, désactiver ou ne pas limiter l’API.

Par contre, comme c’est indiqué dans la documentation : “Notez que la désactivation complète de l’API Heartbeat pourrait affecter les fonctionnalités des plug-ins et des thèmes qui en dépendent.”

Onglet Add-ons

Dans l’onglet Add-ons, vous pourrez éventuellement étendre de certaines fonctionnalités.

• Add-on Varnish : à activer si votre serveur utilise Varnish. Notez que si vous êtes hébergé chez WP Serveur, WP Engine ou FlyWheel, l’Add-on sera activé automatiquement.
• Add-on Compatibilité WebP : à activer si vous diffusez des images au format WebP à l’aide d’un plugin dédié comme Imagify. WP Rocket créera alors des fichiers de cache séparé pour servir vos images WebP.
• Add-on Cloudflare : à activer si vous avez un compte Cloudflare dans le but de purger le cache Cloudflare.
• Add-on Sucuri : à activer si vous utilisez Sucuri pour vider le cache Sucuri lorsque le cache WP Rocket est effacé.

Onglet Outils

Et enfin, l’onglet Outils permettra d’importer ou exporter vos réglages au format JSON pour les utiliser sur un autre site, ou encore de restaurer la précédente version de WP Rocket dans le cas où la version actuelle aurait posé problème.

Alternatives à WP Rocket à considérer

Bien que WP Rocket soit le meilleur plugin de cache sur le marché, il existe d’autres plugins et alternatives qui pourraient correspondre à vos besoins. Parmi les plugin de cache les plus connus, on retrouve :

1. WP Super Cache : Développé par Automattic, le groupe derrière WordPress.com, Jetpack, Gravatar, WooCommerce et Akismet, ce plugin propose une solution de mise en cache simple et efficace.
2. W3 Total Cache : Un plugin de mise en cache gratuit avec des fonctionnalités avancées pour optimiser la vitesse de votre site.
3. LiteSpeed Cache : Fonctionne avec n’importe quel serveur web (LiteSpeed, Apache, NGINX, etc) mais offre des fonctionnalités exclusives pour les sites hébergés sur LiteSpeed.

En examinant ces alternatives gratuites, vous pouvez choisir la solution qui correspond le mieux à vos besoins, à votre budget et à la configuration de votre site.

Je vous laisse avec un petit comparatif des fonctionnalités de WP Rocket, W3 Total Cache et WP Super Cache.

Grille tarifaire de WP Rocket

WP Rocket fonctionne par système d’abonnement annuel et propose 3 types de licence :

• Single : pour un seul site à 59$
• Plus : pour 3 sites à 119$
• Infinite : pour un nombre illimité de sites à 299$

En optant pour une licence WP Rocket vous bénéficiez d’un an de support et de mises à jour du plugin.

Sachez que WP Rocket propose régulièrement des offres promotionnelles (que je ferai apparaitre dans la barre latérale – le cas échéant).

Je l’ai déjà mentionné mais il n’existe pas de période d’essai pour tester le plugin mais WP Rocket propose un politique de remboursement sur 14 jours.

Comme dit, les tarifs proposés concernent des abonnement annuels. Mais sachez déjà qu’en activant le renouvellement automatique à partir de son compte client, il sera possible de bénéficier d’une réduction par rapport au prix payé initialement.

Conclusion

Donc au final, qu’est ce qu’il faut retenir du plugin WP Rocket ?

Dans ce guide complet sur WP Rocket, nous avons exploré les différentes fonctionnalités et options offertes pour optimiser les performances de votre site WordPress. De l’importance cruciale de l’optimisation des performances web à l’installation et à la configuration détaillées de WP Rocket, en passant par les tarifs proposés, nous avons couvert un large éventail de sujets.

Maintenant, tout ce qui vous reste à faire, c’est passer à l’action.

Installez WP Rocket dès maintenant et commencez à accélérer les performances de votre site web.

Vous offrirez à vos visiteurs une expérience de navigation plus rapide, et présenterez à Google des pages web optimisées selon ses propres recommandations pour gagner des places dans les résultats de recherche.

N’attendez plus, donnez à votre site web le coup de boost dont il a besoin avec WP Rocket !

Soutenez Pinroo en partageant :

LES ÉPINGLES PINTEREST LIÉES À L’ARTICLE