|
|
|
WP Rocket : les réglages qui accélèrent vraiment ton site

WP Rocket : les réglages qui accélèrent vraiment ton site

Tu as installé WP Rocket, vidé le cache et relancé PageSpeed Insights avec l’espoir de voir apparaître quatre jolis voyants verts. Pourtant, ton score mobile continue de faire la tête.

WP Rocket peut vraiment accélérer ton site WordPress, mais il ne suffit pas d’activer toutes les options et de croiser les doigts. Certains réglages apportent de vrais gains. D’autres peuvent casser ton menu, tes formulaires ou quelques animations au passage.

Voyons comment réussir ta configuration WP Rocket sans transformer ton site en laboratoire d’expériences.

Table des matières
Écran WordPress affichant les réglages WP Rocket pour améliorer la vitesse du site

Ce que WP Rocket fait déjà tout seul

WP Rocket n’attend pas que tu passes une heure dans ses réglages pour commencer à travailler. Dès son activation, le plugin applique plusieurs optimisations automatiques, notamment la mise en cache des pages.

Sans cache, WordPress doit interroger la base de données, charger le thème, exécuter les extensions et assembler la page à chaque nouvelle visite. Avec le cache, WP Rocket conserve une version déjà générée de cette page et peut la servir beaucoup plus rapidement.

C’est un peu comme préparer les commandes avant le coup de feu plutôt que de commencer à éplucher les pommes de terre lorsqu’un client s’assoit.

Le plugin applique également différentes optimisations liées au cache du navigateur, à la compression et à la manière dont certaines ressources sont servies. Le détail exact peut varier selon ton hébergement et sa configuration, mais tu bénéficies déjà d’un socle utile sans toucher à toutes les options.

WP Rocket précharge aussi le cache automatiquement. Il visite les pages du site afin de générer leur version mise en cache avant l’arrivée du lecteur. Celui-ci ne sert donc pas de cobaye chargé de fabriquer le cache avec sa première visite.

Les versions récentes vont plus loin avec l’optimisation automatique des images critiques. WP Rocket peut repérer l’image principale visible en haut de la page, la retirer du LazyLoad, lui ajouter une priorité élevée et demander au navigateur de la charger plus tôt.

Alors avant de modifier quoi que ce soit, laisse donc le plugin terminer ses traitements. Certaines optimisations sont asynchrones et ne produisent pas leur résultat dans la seconde qui suit l’activation.

Mesure avant de commencer

Tu veux savoir si ta configuration fonctionne ? Commence par mesurer le site avant de toucher aux réglages.

Si PageSpeed signale un problème de stabilité visuelle, le guide sur le CLS WordPress montre pourquoi le cache ne suffit pas lorsque l’image, la bannière ou l’iframe n’a pas réservé sa place.

Sinon, tu risques d’activer six options, de gagner huit points dans PageSpeed et de ne pas savoir laquelle a réellement fait la différence. Tu ne sauras pas davantage laquelle désactiver si ton menu mobile décide ensuite de prendre sa retraite.

Teste au minimum :

  • la page d’accueil ;
  • une page de service ;
  • un article de blog ;
  • une page contenant un formulaire ;
  • une fiche produit si tu utilises WooCommerce ;
  • une page particulièrement lourde.

Teste chaque page avec PageSpeed Insights sur mobile et ordinateur, mais ne t’arrête pas à la note générale. Le gros chiffre coloré attire forcément l’œil, pourtant ce sont les métriques détaillées qui t’expliquent ce qui ralentit réellement la page.

Attarde-toi sur :

  • le Largest Contentful Paint, qui mesure l’affichage de l’élément principal ;
  • l’Interaction to Next Paint, qui évalue la réactivité de la page ;
  • le Cumulative Layout Shift, qui repère les éléments qui bougent pendant le chargement ;
  • le temps de réponse initial du serveur ;
  • les ressources qui bloquent l’affichage ;
  • la quantité de JavaScript inutilisé.

Un test PageSpeed reste une photographie prise dans des conditions de laboratoire. Les données de terrain, lorsqu’elles sont disponibles, montrent ce que vivent réellement les visiteurs sur les 28 derniers jours. L’objectif n’est donc pas seulement de rendre un robot heureux pendant trente secondes.

Note les résultats de départ et active ensuite les options mais une famille à la fois. Tu testes, tu contrôles le site, puis tu poursuis.

C’est un peu moins grisant que de cocher toute la page d’un coup, mais beaucoup plus pratique lorsqu’il faut retrouver l’option qui a cassé quelque chose.

Supprime le CSS qui ne sert pas

Le CSS contrôle l’apparence de ton site. Ton thème, Elementor et tes extensions en chargent parfois beaucoup plus que nécessaire pour afficher la page consultée.

WP Rocket propose une option destinée à supprimer le CSS inutilisé. Le plugin analyse la page, conserve les règles dont elle a besoin et évite de charger une grande feuille de styles avant d’afficher le contenu principal.

Cette optimisation peut améliorer le rendu initial et le Largest Contentful Paint, notamment sur un site construit avec un thème ou un page builder assez généreux en CSS.

Dans WP Rocket, ouvre l’onglet consacré à l’optimisation des fichiers et active l’option de suppression du CSS inutilisé. Enregistre les changements, laisse le traitement se terminer, puis contrôle plusieurs pages.

Ne te contente pas de regarder la page d’accueil sur ton ordinateur. Vérifie aussi :

  • le menu sur mobile ;
  • les fenêtres pop-up ;
  • les formulaires ;
  • les accordéons ;
  • les tableaux de prix ;
  • les pages WooCommerce ;
  • les éléments affichés sous certaines conditions.

Si une mise en page perd son style, n’abandonne pas immédiatement toute l’optimisation. Cherche d’abord si le fichier ou la classe concernée peut être exclu du traitement.

Cette option ne réparera pas une page construite avec quarante widgets et huit niveaux de conteneurs. Si Elementor génère une structure beaucoup trop profonde, commence par réduire la taille du DOM au lieu de demander à WP Rocket de ranger seul tout le garage.

Diffère le JavaScript

Le JavaScript fait fonctionner ton menu, tes sliders, tes formulaires, tes animations et une bonne partie des interactions de ton site. Lorsque le navigateur doit télécharger et exécuter tous ces scripts avant de pouvoir afficher correctement la page cela peut casser..

WP Rocket propose deux réglages complémentaires.

Le premier consiste à charger le JavaScript en différé. Les fichiers sont téléchargés sans bloquer inutilement l’analyse du contenu HTML, puis exécutés au moment prévu.

Le second va plus loin en retardant l’exécution des scripts jusqu’à une interaction du visiteur ou jusqu’au moment où ils deviennent nécessaires. Cette option peut produire un gain important sur PageSpeed, car une partie du JavaScript ne vient plus occuper le processeur dès l’ouverture.

Active d’abord le chargement différé, vide le cache et teste les parcours importants. Active ensuite le retardement de l’exécution JavaScript et recommence les vérifications.

Concentre-toi sur les éléments interactifs :

  • le menu principal et son affichage mobile ;
  • le moteur de recherche ;
  • les formulaires et leurs messages ;
  • les boutons d’ajout au panier ;
  • les filtres WooCommerce ;
  • les galeries ;
  • les pop-ups ;
  • les outils de réservation ;
  • les bandeaux de consentement.

Si un élément ne fonctionne plus, identifie le script concerné et ajoute une exclusion ciblée. WP Rocket prévoit notamment des exclusions rapides pour certains modules Elementor lorsque le retardement du JavaScript perturbe leur chargement.

Cette optimisation peut également améliorer ton INP, car le navigateur exécute moins de scripts au démarrage. Si la page reste lente lorsqu’un visiteur ouvre le menu, utilise un filtre ou clique sur un bouton, il faudra optimiser l’INP de WordPress en repérant les scripts et les interactions qui monopolisent encore le navigateur.

Configure les images et les vidéos

Les images restent l’une des causes les plus courantes de lenteur. WP Rocket facilite leur chargement, mais il ne peut pas compresser magiquement une photo de 5 Mo simplement parce que tu as coché LazyLoad.

Le LazyLoad retarde le chargement des images qui ne sont pas encore visibles à l’écran. Le navigateur peut alors se concentrer sur le haut de la page avant de récupérer les visuels placés plus bas.

Tu peux généralement activer :

  • le LazyLoad des images ;
  • le LazyLoad des images d’arrière-plan CSS ;
  • le LazyLoad des iframes et des vidéos ;
  • le remplacement des vidéos YouTube par une image d’aperçu ;
  • l’ajout des dimensions manquantes aux images.

Le remplacement des vidéos YouTube produit souvent un gain très visible. Au lieu de charger immédiatement le lecteur, ses scripts et différentes ressources externes, WP Rocket affiche une image légère. Le véritable lecteur n’est chargé que lorsque le visiteur clique dessus.

L’ajout des dimensions manquantes aide le navigateur à réserver la bonne place avant le chargement de l’image. La page bouge moins et le CLS peut s’améliorer.

Fais attention à l’image principale placée au-dessus de la ligne de flottaison. Elle constitue souvent l’élément LCP et doit donc être chargée rapidement. WP Rocket peut optimiser automatiquement les images critiques en excluant le visuel principal du LazyLoad, en le préchargeant et en lui attribuant une priorité élevée.

Après le passage de WP Rocket, vérifie tout de même le code généré et le résultat PageSpeed. Un autre plugin d’images, ton thème ou Elementor peut déjà appliquer son propre LazyLoad. Deux outils qui essaient d’optimiser la même image finissent parfois par se marcher dessus avec beaucoup de bonne volonté.

Enfin, compresse tes fichiers avant leur envoi dans WordPress, choisis le bon format et évite d’afficher une image de 3 000 pixels dans une colonne large de 600 pixels.

WP Rocket organise le chargement. Il ne met pas une photo XXL au régime à ta place.

Allège les polices

Les polices peuvent retarder l’affichage du texte et provoquer un changement visuel pendant le chargement. C’est particulièrement vrai lorsque ton site appelle plusieurs familles Google Fonts avec cinq graisses chacune.

Dans l’onglet Média, WP Rocket peut proposer l’hébergement local des polices Google. Les fichiers sont alors servis depuis ton propre site au lieu d’être récupérés sur les serveurs de Google.

Cette option peut réduire certaines connexions externes et faciliter la maîtrise des ressources chargées. Elle ne t’autorise pas pour autant à conserver douze variantes « au cas où ».

Garde uniquement les graisses réellement utilisées. Dans beaucoup de cas, une graisse normale, une semi-grasse et une grasse suffisent largement. Ton lecteur ne distinguera probablement pas Montserrat 500 de Montserrat 600 au milieu d’un paragraphe, mais son navigateur devra quand même télécharger les deux.

WP Rocket permet également de précharger les polices importantes. Utilise cette option avec parcimonie. Précharger une ressource indique au navigateur qu’elle doit passer devant les autres. Si tu lui donnes dix priorités, tu ne lui donnes plus aucune priorité.

Précharge uniquement les fichiers WOFF2 nécessaires à l’affichage immédiat du haut de page. Vérifie ensuite que tu ne crées pas de doublon avec un préchargement déjà ajouté par ton thème ou un autre plugin.

Laisse le préchargement du cache travailler

Le préchargement permet à WP Rocket de générer les fichiers de cache sans attendre la première visite sur chaque page. Cette fonction est activée automatiquement et représente une partie importante du gain obtenu après l’installation.

Lorsque tu vides le cache, WP Rocket doit le reconstruire. Pendant cette période, certaines pages peuvent être un peu moins rapides jusqu’à la fin du traitement.

Évite donc de purger tout le cache toutes les cinq minutes simplement parce que tu viens de corriger une virgule. Tu peux parfois vider uniquement le cache de la page concernée.

Si tu actualises la page sans voir tes changements, commence par vider correctement les différents caches WordPress. WP Rocket, ton navigateur et ton hébergeur peuvent chacun conserver une version différente du site. Tu peux donc purger le premier cache avec beaucoup d’application pendant que le deuxième continue tranquillement de te montrer l’ancienne page.

WP Rocket propose aussi le préchargement des liens. Lorsque le visiteur survole ou touche un lien, le plugin peut anticiper la page qu’il semble vouloir ouvrir. La navigation paraît alors beaucoup plus rapide.

Cette fonction améliore surtout la sensation de fluidité entre les pages. Elle ne réduit pas forcément le temps de chargement de la première page visitée et ne remplacera jamais un bon temps de réponse serveur.

Sur un hébergement limité ou un site très fréquenté, surveille les ressources après son activation. Anticiper toutes les visites possibles peut être utile. Préparer des pages que personne n’ouvrira l’est déjà un peu moins.

Nettoie la base sans tout supprimer

WP Rocket te permet de nettoyer certains éléments accumulés dans la base de données :

  • les révisions d’articles ;
  • les brouillons automatiques ;
  • les contenus placés dans la corbeille ;
  • les commentaires indésirables ;
  • les transients expirés ;
  • certaines tables à optimiser.

Ce nettoyage peut réduire une base encombrée, mais il n’agit pas comme un turbo directement branché sur PageSpeed. Sur un petit site propre, supprimer vingt révisions ne fera pas soudainement gagner trente points.

Avant toute opération, effectue une sauvegarde complète de la base de données. Certaines suppressions sont définitives et tu peux regretter une ancienne révision bien plus vite que prévu.

Évite aussi de programmer un nettoyage agressif si tu utilises les révisions pour ton travail éditorial ou si certaines extensions conservent des données temporaires importantes.

Le nettoyage automatique peut être utile avec une fréquence raisonnable. Il ne doit pas devenir une manie. Une base de données n’a pas besoin d’être passée au Kärcher tous les matins pour fonctionner correctement.

Fais attention aux doubles optimisations

Beaucoup de problèmes apparaissent lorsque plusieurs outils essaient d’effectuer le même travail.

Ton hébergeur peut déjà gérer le cache serveur. Ton thème peut différer le JavaScript. Elementor peut optimiser le chargement de certains fichiers. Une extension d’images peut appliquer son propre LazyLoad. Puis WP Rocket arrive et ajoute une deuxième couche par-dessus.

Avant d’activer une option, vérifie si une autre solution ne s’en charge pas déjà.

Surveille notamment les doublons concernant :

  • la mise en cache des pages ;
  • la minification des fichiers ;
  • le LazyLoad ;
  • l’hébergement local des polices ;
  • le préchargement des ressources ;
  • l’optimisation de la base ;
  • le CDN.

Deux caches ne rendent pas forcément ton site deux fois plus rapide. Ils peuvent surtout te donner deux interfaces à vider lorsque quelque chose refuse de s’actualiser.

Le même principe s’applique au cache objet Redis et au cache serveur. Ils peuvent parfaitement compléter WP Rocket lorsqu’ils n’agissent pas au même niveau et que l’hébergement les configure correctement.

wprocket plugin wordpress

Et sur WooCommerce ?

WP Rocket détecte WooCommerce et exclut automatiquement du cache certaines pages sensibles, comme le panier, la commande et le compte client.

Ces pages contiennent des informations propres à chaque utilisateur. Servir le même panier mis en cache à tout le monde serait une expérience commerciale assez originale, mais franchement déconseillée.

Après l’activation, vérifie tout le tunnel :

  • ajout d’un produit au panier ;
  • modification des quantités ;
  • application d’un code promotionnel ;
  • choix du mode de livraison ;
  • connexion au compte ;
  • passage de la commande ;
  • confirmation du paiement.

Teste aussi les mini-paniers, filtres dynamiques, listes de favoris et systèmes de réservation. Ces fonctions utilisent souvent du JavaScript ou des requêtes AJAX qui peuvent réagir au retardement des scripts.

Si une page personnalisée joue un rôle dans le tunnel, ajoute-la aux exclusions de cache si nécessaire. Ne désactive pas tout WP Rocket au premier souci. Trouve précisément ce qui doit rester dynamique.

Pourquoi ton score reste moyen ?

Tu as activé le cache, supprimé le CSS inutilisé, retardé le JavaScript et optimisé les images. Pourtant, ton score mobile plafonne encore.

C’est possible, car WP Rocket n’a pas le pouvoir de reconstruire tout ton site.

Le plugin ne corrigera pas :

  • un serveur dont le temps de réponse est trop long ;
  • une page Elementor remplie de conteneurs inutiles ;
  • une extension qui lance des requêtes lentes ;
  • une image principale mal dimensionnée ;
  • une publicité externe très lourde ;
  • un outil de suivi qui monopolise le navigateur ;
  • une police chargée dans huit variantes ;
  • un thème qui embarque beaucoup trop de fonctions ;
  • une page qui essaie d’afficher toute ton entreprise en un seul écran.

Si ton site reste lent malgré une configuration propre, regarde plus loin. L’hébergement, le nombre de plugins, la construction des pages et les ressources externes comptent autant que le cache.

Si les performances se dégradent progressivement, ne te contente pas de modifier WP Rocket. Un temps de réponse qui augmente, des erreurs intermittentes ou une extension qui devient plus gourmande font partie des signaux faibles d’un site WordPress à contrôler avant que le ralentissement ne se transforme en vraie panne.

WP Rocket est un excellent outil. Ce n’est pas un service de chirurgie réparatrice pour WordPress mal construit.

La configuration que je recommande pour commencer

Il n’existe pas de configuration magique valable pour tous les WordPress. Un blog assez simple, une boutique WooCommerce et un site Elementor rempli d’animations ne chargent ni les mêmes fichiers ni les mêmes fonctionnalités.

Pour éviter de jouer à la loterie avec les cases à cocher, commence paractiver les optimisations essentielles de WP Rocket dans un ordre qui te permet de contrôler leur effet.

Garde la mise en cache automatique et le préchargement du cache, puis active la suppression du CSS inutilisé. Vérifie immédiatement les pages principales, le menu mobile, les formulaires et les modèles qui utilisent une mise en page particulière.

Passe ensuite au JavaScript. Active d’abord son chargement différé, teste le site, puis essaie le retardement de l’exécution. Si un élément ne répond plus, cherche le script concerné au lieu de désactiver toute l’optimisation. Ton menu n’a pas besoin de payer pour une animation qui refuse de patienter.

Dans l’onglet Média, active :

  • le LazyLoad des images situées plus bas dans la page ;
  • le chargement différé des iframes et des vidéos ;
  • le remplacement des vidéos YouTube par une image d’aperçu ;
  • l’ajout des dimensions manquantes aux images ;
  • l’hébergement local des polices Google si ton site les utilise.

Précharge uniquement les polices indispensables à l’affichage du haut de page. Ajouter dix fichiers dans la liste ne les rend pas tous prioritaires. Cela revient surtout à expliquer au navigateur que tout est urgent, ce qui ne l’aide pas beaucoup à choisir.

Tu peux ensuite tester le préchargement des liens et programmer un nettoyage raisonnable de la base de données après une sauvegarde. Ces réglages complètent la configuration, mais ils ne compenseront jamais un serveur lent, une page trop lourde ou une extension qui lance des requêtes dans tous les sens.

Une fois cette base appliquée, relance tes mesures. Si le score reste bloqué, n’active pas davantage d’options uniquement pour avoir l’impression d’avancer. Cherche ce qui ralentit réellement la page et corrige la cause, pas seulement le voyant PageSpeed.

Comment tester sans casser ton site ?

Effectue idéalement les réglages sur un environnement de préproduction. Si tu travailles directement sur le site en ligne, commence par une sauvegarde et choisis un moment calme.

Pour chaque famille d’options :

  1. relève les performances avant modification ;
  2. active un réglage ;
  3. vide le cache concerné ;
  4. attends la fin des traitements ;
  5. teste les pages importantes en navigation privée ;
  6. vérifie le site sur mobile ;
  7. contrôle les formulaires et les interactions ;
  8. relance PageSpeed Insights ;
  9. conserve ou annule le changement selon le résultat.

Teste le site en étant déconnecté de WordPress. Un administrateur connecté ne voit pas toujours la même version mise en cache qu’un visiteur.

Ne te contente pas non plus d’ouvrir la page. Clique sur le menu, envoie un formulaire de test, ajoute un produit au panier et déclenche les éléments interactifs.

Un score PageSpeed plus élevé ne compense pas un bouton « Demander un devis » qui ne répond plus. Ton visiteur ne t’appellera probablement pas pour te féliciter d’avoir gagné douze points en laboratoire.

En conclusion

Une bonne configuration WP Rocket ne consiste pas à activer toutes les options. Elle consiste à choisir les réglages adaptés au site, à mesurer leur effet et à vérifier qu’ils ne dégradent rien au passage.

Les gains les plus visibles viennent généralement de la suppression du CSS inutilisé, du chargement différé et retardé du JavaScript, du LazyLoad, de l’optimisation des vidéos, des polices et du préchargement du cache.

WP Rocket peut faire une vraie différence, mais il ne travaille pas seul. Ton hébergement, tes extensions, tes images et la construction de tes pages continuent de peser dans la balance.

Si tu ne sais plus quels réglages conserver ou si ton site reste lent malgré WP Rocket, je peux analyser ce qui bloque et mettre en place une optimisation adaptée à ton WordPress, sans jouer à pile ou face avec les cases à cocher.

À propos de l'auteur
Image de Xavier Taillebois
Xavier Taillebois

Je suis Xavier, fondateur de XT DESIGN WEB. Mon truc : transformer des offres parfois floues en solution WordPress claires, rapides et bien référencées. Mon parcours atypique (École Boulle → 21 ans chef de projet & architecte de solutions → 7+ ans webdesigner/webmaster) m’aide à marier esthétique et rigueur technique pour livrer des sites beaux, stables et faciles à gérer. J’accompagne les TPE/PME, indépendants et startups sur la création, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon. J'accompagne les TPE/PME, entrepreneurs et artisans sur la création de site WordPress, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon.

À propos de l'auteur
Image de Xavier Taillebois
Xavier Taillebois

Je suis Xavier, fondateur de XT DESIGN WEB. Mon truc : transformer des offres parfois floues en solution WordPress claires, rapides et bien référencées. Mon parcours atypique (École Boulle → 21 ans chef de projet & architecte de solutions → 7+ ans webdesigner/webmaster) m’aide à marier esthétique et rigueur technique pour livrer des sites beaux, stables et faciles à gérer. J’accompagne les TPE/PME, indépendants et startups sur la création, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon. J'accompagne les TPE/PME, entrepreneurs et artisans sur la création de site WordPress, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon.

Développement de site WordPress sur-mesure, réalisés pour vous.

Besoin d’un site web performant ou d’une refonte optimisée ? 🚀 Discutons ensemble de votre projet pour créer un site sur-mesure, alliant design, référencement et sécurité. Profitez de l’expertise d’un spécialiste pour booster votre présence en ligne et atteindre vos objectifs. Contactez-moi dès maintenant !

Poursuivre votre lecture avec un autre article