Tutoriel WP Rocket : optimiser la vitesse de votre site web

Qu'est-ce que WP Rocket ?

WP Rocket est un plugin né comme solution pour les différentes optimisations de cache dans WordPress. Aujourd'hui, c'est bien plus, et nous pouvons non seulement optimiser le cache, mais pratiquement tout ce qui concerne l'optimisation des performances de chargement du site web.

Pour démontrer son impact, jetez un œil aux performances de notre propre site AVEC et SANS WP Rocket :

Pourquoi utiliser WP Rocket ?

Bien que nous ayons dit qu'il existe d'autres alternatives pour l'optimisation WPO, et que chacun est libre d'utiliser celle qu'il juge appropriée, dans notre cas nous avons une préférence particulière pour WP Rocket. Son interface intuitive qui fonctionne d'un clic de case à cocher, les multiples options qu'il offre pour la configuration du cache et le chargement des ressources, font de WP Rocket notre favori parmi toutes les options.

Menu principal de WP Rocket

En supposant que nous n'avons eu aucun problème pour installer WP Rocket, commençons à expliquer son interface et les différentes options disponibles pour l'optimisation. Quand vous cliquez sur l'onglet du tableau de bord, l'écran suivant apparaît :

Un message de bienvenue et des options que nous pouvons initialement laisser tranquilles, mais que nous expliquerons ici.

Mon compte

Si vous avez acheté WP Rocket, la case « Voir mon compte » vous emmènera à la page utilisateurs de WP Rocket pour que, une fois là, vous puissiez compléter et vérifier tout ce qui concerne votre profil utilisateur : Données, facturation, etc.

RocketCDN

RocketCDN est un service CDN que WP Rocket propose depuis relativement peu de temps. L'objectif est de fournir les outils nécessaires pour atteindre la meilleure performance sans avoir à chercher des solutions en dehors du plugin. Il existe d'autres services CDN très populaires et tout aussi efficaces tels que Cloudflare ou Amazon CloudFront.

Mon statut

Dans cette option, nous avons deux interrupteurs à activer :

• ›

  Rocket Tester : c'est le programme d'améliorations WP Rocket pour tester leurs versions BETA. Vous devez les contacter par email.

• ›

  Rocket Analytics : Vous acceptez de partager anonymement les données de performance de votre WordPress avec l'équipe de développement pour aider à améliorer WP Rocket.

Il y a peu à dire ici, c'est une décision personnelle qui ne devrait pas affecter les performances.

Configuration du cache dans WP Rocket

Il est temps d'entrer dans les options de configuration et nous commencerons par le cache :

Dans le deuxième onglet du plugin, nous pouvons voir quelles options de cache il nous offre. Rappelons que dans WP Rocket nous optimisons le cache de page et, comme nous le verrons maintenant, nous avons aussi une option pour les utilisateurs connectés, mais nous devons être prudents avec cette option.

Cache mobile

Normalement, quand nous parlons de mobile nous incluons aussi les tablettes, mais cette fois nous parlons uniquement des appareils mobiles. WP Rocket détecte via l'user agent que nous naviguons depuis des smartphones.

Nous activerons toujours cette option, car en règle générale, les designs desktop et mobile sont différents, sauf si nous n'avons pas de version responsive, cette option sera toujours activée. Pour être clair, pourquoi voudrions-nous que 2 versions en cache nous soient livrées si le design était le même ? Autrement dit, si nous n'avions pas de version mobile, nous ne voudrions pas que ce cache soit traité différemment, n'est-ce pas ?

C'est ici qu'une exception est ajoutée. Quand nous avons une version mobile avec des ressources ou des éléments qui ne se chargent que dans cette version, nous enregistrerons les fichiers séparément.

Exemple :

• ›Nous avons une publicité qui sur mobile charge un JS que la version desktop n'a pas.

Dans ce cas, nous enregistrerions effectivement des fichiers séparés pour mobile.

Cache utilisateur

Le cache utilisateur est une option que WP Rocket fournit pour les utilisateurs qui naviguent en étant connectés.

En activant cette option, nous pouvons offrir une version de cache individualisée pour chaque utilisateur. Le mieux est de l'activer si les utilisateurs se connectent, mais il faut être particulièrement prudent quant aux pages qui sont mises en cache et celles qui ne le sont pas, car si l'utilisateur entre des données personnelles (par exemple des informations bancaires), les stocker en cache pourrait nous causer des problèmes juridiques.

Comment exclure une page du cache ?

Si vous voulez éviter ce type de problèmes, le mieux est d'aller directement à la page que vous voulez exclure et dans les options WP Rocket (barre latérale ou bas) sélectionner « ne jamais mettre cette page en cache ».

Durée de vie du cache

Dans cette section, nous devons simplement indiquer la durée que nous voulons pour les fichiers de cache générés. C'est-à-dire que WP Rocket génère un fichier sauvegardant la version de votre page, et ce fichier sera celui livré à l'utilisateur lors de l'accès au site web.

Via un gestionnaire de processus (CRON), les fichiers générés qui dépassent la durée indiquée seront supprimés et de nouveaux seront créés.

Choses à garder à l'esprit

WP Rocket prend déjà en compte certains processus pour supprimer et générer de nouveaux fichiers de cache, qui sont les suivants :

• ›

  Génération de nouvelles entrées, pages, catégories, taxonomies ou modifications

• ›

  Génération et édition de nouveaux modules, widgets ou tout élément du site web

• ›

  Quand les configurations WP Rocket qui affectent le frontend sont modifiées.

Sinon, vous devez garder à l'esprit que stocker des fichiers de cache prend de la place sur votre serveur et cet espace est limité. Il est aussi conseillé de vider le cache depuis WP Rocket pour qu'il soit mis à jour et qu'aucun fichier qui n'est plus nécessaire ne reste.

Quant au temps, vous pouvez laisser la valeur par défaut.

Optimisation des fichiers dans WP Rocket

Après avoir brièvement passé en revue la configuration du cache, il est temps de travailler sur l'optimisation des fichiers. L'optimisation des fichiers se fait pour alléger le chargement et le rendu du HTML. Comment pouvons-nous travailler sur cette optimisation ?

De plusieurs façons :

• ›

  En réduisant le poids des fichiers

• ›

  En supprimant les fichiers inutiles, et

• ›

  En exécutant les fichiers progressivement à mesure qu'ils sont nécessaires.

Fichiers CSS

Les fichiers CSS sont responsables de la partie visuelle du site web. Les feuilles de style qui donnent forme, couleur et style à notre WordPress. Dans cet aspect, un design attrayant peut ne pas être un design optimisé, parce que le designer, en construisant le CSS, peut ne pas avoir suivi une série de règles d'optimisation basiques.

Parmi les problèmes les plus courants que nous rencontrons habituellement avec les feuilles de style :

• ›

  Fichiers CSS lourds

• ›

  Fichiers CSS qui se chargent sur des pages qui n'utilisent pas ces styles

• ›

  Fichiers CSS mal construits

• ›

  Charger trop de CSS externes

• ›

  Utiliser @import pour importer des feuilles de style externes

En bref, il y a tout un monde de pratiques souvent utilisées qui ne sont pas conseillées pour l'optimisation d'un bon design, mais venons-en à ce que WP Rocket nous offre.

Minifier les fichiers CSS

Cette option vise à réduire le poids des fichiers CSS en supprimant les espaces et les sauts de ligne. WP Rocket l'implémente en activant la case à cocher.

Astuce SEO Alive : Chaque fois que nous effectuons une action, c'est une bonne idée d'essayer de charger le site web pour voir si tout est correct, faites-le en mode incognito du navigateur.

Le processus est représenté dans l'image suivante prise depuis l'outil minifier.org.

Combiner les fichiers CSS

Cette fonctionnalité effectue une sorte de « copier-coller » du code d'un CSS dans un autre pour éviter de charger plusieurs fichiers CSS et n'en avoir qu'un seul.

Il est conseillé de continuer à tester car cela dépend beaucoup de la façon dont le thème a été développé, parce que si j'ai un fichier CSS qui ne se charge que sur un type spécifique de page, ce que je ne veux pas, c'est que ce code soit chargé dans un seul fichier sur toutes les pages.

L'idéal est de charger le code utilisé par l'URL. Cochez la case et testez avec un outil comme GTMETRIX pour voir si vous avez amélioré la vitesse de chargement.

L'avantage de combiner les fichiers CSS est de réduire les requêtes au serveur.

Optimiser le chargement CSS

WP Rocket a été mis à jour en tenant compte des recommandations fournies par divers outils Google pour l'optimisation de la vitesse de chargement. Si nous avons déjà de l'expérience avec ces outils, nous avons sûrement rencontré l'avertissement « Éliminer les ressources qui bloquent le rendu ». En activant cette case, nous empêchons le CSS de bloquer le chargement en le faisant charger de manière asynchrone.

C'est-à-dire que le rendu HTML ne s'arrête pas quand il doit télécharger le fichier CSS ; ce fichier se charge en arrière-plan, empêchant le processus de chargement d'être interrompu. Donc cela vaut la peine de l'activer.

Fichiers JS (JavaScript)

JavaScript a été l'un des grands problèmes que Google a rencontrés lors du traitement du HTML. Sans entrer trop en profondeur dans ce type de langage, WP Rocket a conçu 5 actions basiques pour optimiser ce type de fichier. Jetons un œil !

Supprimer jQuery Migrate

jQuery Migrate est une bibliothèque JavaScript qui permet la compatibilité avec le code jQuery développé pour les versions de jQuery antérieures à 1.9. Cette bibliothèque vient nativement dans WordPress mais n'a pratiquement aucune utilité (certains plugins peuvent en avoir besoin).

Avec cette action, nous voulons éviter une requête inutile et le chargement d'un JS qui ne sera pas utilisé. Désactivez-le et naviguez sur votre site web pour voir si tout fonctionne correctement !

Minifier les fichiers JavaScript

Tout comme ce qui a été expliqué avec les fichiers CSS, cette action s'appliquerait aux fichiers JS, réduisant légèrement la taille des fichiers JS.

Combiner les fichiers JavaScript

Une autre action similaire au module d'optimisation CSS. Rappelez-vous que lorsque nous activons ces cases, nous devons vérifier si tout fonctionne comme avant.

Charger les fichiers JavaScript en différé

La case à cocher sur cette action apporte deux améliorations en performance :

• ›

  Elle ajoute l'attribut « defer » au JS pour empêcher le rendu HTML de s'arrêter en raison d'un chargement JS. Avec cette action, il se télécharge en parallèle et s'exécute à la fin du traitement HTML.

• ›

  Elle déplace le JS qui bloque le rendu initial.

WP Rocket nous avertit que ce type d'activation peut causer des problèmes, c'est pourquoi il introduit un mode sécurisé pour éviter les problèmes de chargement des éléments essentiels pour la visualisation correcte de la page.

Retarder l'exécution de JavaScript

Une autre option pour retarder l'exécution de JavaScript qui n'est pas essentiel jusqu'à ce que l'utilisateur interagisse avec la page. Cette action ne semble pas très importante, mais elle nous permet de gagner du temps pour que le chargement se fasse plus rapidement. L'interaction peut être un clic, un scroll, un mouvement de souris...

Optimisation des médias

Dans cet onglet, nous couvrirons l'optimisation des éléments clés dans les premières étapes de l'optimisation WPO. Nous parlons des images, vidéos, iframes, et éléments intégrés à WordPress dont la fonctionnalité est, pour le moins, discutable.

Lazyload

Une action essentielle dans toute optimisation de la vitesse de chargement. La fonction Lazyload fait que les éléments comme les images, vidéos et iframes ne se chargent pas tant qu'ils ne sont pas essentiels à l'affichage.

Laissez-moi vous donner un exemple. Au fur et à mesure que nous faisons défiler, les images se chargent. Imaginez ce que serait le chargement de cette page si 30 images se chargeaient toutes à la fois, surtout si l'utilisateur ne les regarde même pas au début.

Emoji

Les navigateurs incluent déjà leurs propres emojis, donc nous pouvons économiser cette requête qui est faite si nous n'activons pas cette case. Ma recommandation est que vous l'activiez.

Contenu intégré

Empêche d'autres personnes d'intégrer du contenu de votre site et empêche aussi que vous intégriez du contenu d'autres sites non autorisés. Les requêtes faites avec ce JS sont réduites.

Compatibilité WebP

WebP est un format relativement nouveau que Google a introduit autour de 2010, pour la compression avec perte de graphiques 24 bits sur le web, améliorant la fourniture de ces ressources pour accélérer leur chargement.

Actuellement, tous les navigateurs ne le prennent pas en charge, donc vous devrez être prudent et savoir quel navigateur utilisent vos utilisateurs lorsque vous travaillez avec ce format. Activez cette option si vous travaillez avec des images WebP.

Configuration du préchargement du cache

Nous devons bien comprendre comment les fichiers de cache de WP Rocket sont générés pour comprendre la fonction Preload.

Lorsqu'un utilisateur visite une page de notre site pour la première fois, c'est à ce moment que la page est mise en cache et qu'un fichier en cache est généré qui sera livré aux utilisateurs suivants. La même chose se produit lorsque le cache expire (le temps que nous avons déterminé) et que la version en cache est éliminée, ou lorsque nous-mêmes vidons le cache de toutes nos URLs.

Préchargement du cache

En activant l'option Preload, ce que nous ferons, c'est charger une version précédemment mise en cache pour que même le premier utilisateur ait une version plus rapide de notre site. Cette action est effectuée via les liens du sitemap, donc nous aurons besoin d'un sitemap.

Le sitemap est un fichier généré où sont affichées les URLs de notre site. Avec des plugins comme « Rank Math » ou « Yoast » nous pouvons le générer facilement. Si vous voulez voir comment créer un sitemap avec Rank Math, ici nous vous montrons.

Préchargement des liens

C'est une fonction que WP Rocket a incorporée dans ses dernières versions. Le but est d'anticiper le chargement des « prochaines pages que l'utilisateur va visiter ». Lorsqu'on survole avec le curseur, le préchargement de la page a lieu au cas où l'utilisateur cliquerait sur le lien.

WP Rocket a adopté cette fonction que des plugins spécifiques comme « Flying Pages » implémentaient déjà pour améliorer la fluidité de navigation au sein du site (expérience utilisateur). Cela dit, ce n'est pas un facteur qui améliore le temps de chargement, et vous ne verrez pas l'amélioration dans les métriques d'outils d'audit WPO.

Préchargement des requêtes DNS

Le préchargement des requêtes DNS est très utile lorsque nous utilisons des ressources tierces comme YouTube, Facebook, des polices ou des iframes que nous demandons fréquemment.

Lorsque nous faisons une connexion sur Internet, une requête DNS est faite qui doit être résolue et envoyée au serveur. Cela a une durée que nous pouvons améliorer si nous ajoutons les URLs des ressources nécessaires dans cette boîte que WP Rocket nous fournit.

Comme nous pouvons le voir dans l'exemple, il suffit d'utiliser le nom de domaine //youtube.com //facebook.com

La résolution DNS prend environ 20 à 120 millisecondes, comme l'indique GTMETRIX, le navigateur ne téléchargera rien depuis l'hôte avant que ce processus ne soit terminé.

Préchargement des polices

Le préchargement des polices nécessite une étape préalable, qui est de télécharger les polices et de les avoir sur notre serveur. Une fois là, nous pouvons faire la même action que nous avons faite avec le préchargement du cache, en faisant une version beaucoup plus rapide du fichier de polices et en la fournissant à l'utilisateur lorsqu'il se connecte à notre page.

Une fois les polices hébergées, nous indiquerons à WP Rocket le chemin exact des polices utilisées. Il est recommandé de ne pas abuser des différentes polices sur nos pages car elles nécessitent des téléchargements différents. Notez aussi que les requêtes au serveur sont faites avec les différentes variations de la police, laissez-moi vous expliquer :

• ›

  Police Bold --> 1 requête

• ›

  Police soulignée --> 1 requête

• ›

  Police majuscule --> 1 requête

Configuration des règles avancées de WP Rocket

Ne jamais mettre ces URLs en cache

Il existe certaines URLs qui, en raison de leur unicité, nous ne voulons pas qu'une version en cache soit sauvegardée. Depuis cet onglet, WP Rocket nous permet d'entrer une liste d'URLs que nous ne voulons jamais mettre en cache.

Ne jamais mettre ces cookies en cache

WP Rocket nous donne un autre outil de contrôle au-delà de le faire par URLs. De nombreux plugins fonctionnent avec leurs propres cookies ou nous pouvons même installer les nôtres pour identifier certains utilisateurs ; il existe de nombreuses façons d'utiliser ces petits fichiers.

Avec WP Rocket, nous pouvons arrêter de mettre en cache les URLs identifiées par l'ID de cookie, une fois téléchargées dans le navigateur de l'utilisateur, personnalisant ainsi davantage le type d'URLs que nous voulons mettre en cache.

Ne jamais mettre ces user agents en cache

L'user agent est un champ descriptif au sein du protocole HTTP, utilisé pour fournir des informations sur l'appareil effectuant une requête. Connaissant cette information, nous pouvons empêcher que les pages en cache soient livrées à ces user agents.

Par exemple, l'un des user agents de Google est Googlebot, donc en l'indiquant dans cette partie du web, chaque fois qu'il accède à notre site web, nous offrirons les pages sans mise en cache.

Toujours purger ces URLs

Cette option est très intéressante pour un type d'URL pour lequel, par exemple, vous avez intérêt à toujours faire supprimer son fichier cache lors d'une mise à jour.

Par exemple, j'ai des URLs avec des résultats sportifs et ce que je ne veux pas, c'est livrer une version en cache à l'utilisateur, puisque les résultats sont mis à jour très fréquemment.

Mettre en cache ces query strings

Les query strings sont des données qui sont envoyées lors d'une requête à une page web via l'URL.

Elles sont généralement identifiées par le symbole point d'interrogation « ? » et en règle générale WP Rocket ne met pas ce type d'URL en cache. Dans cette option, nous pouvons le forcer à le faire.

Configuration de la base de données avec WP Rocket

Comme nous l'avons dit à plusieurs reprises tout au long de l'article, WP Rocket a cessé d'être juste un plugin de cache pour devenir un plugin pour optimiser la vitesse de chargement de notre site web. Dans cette section de configuration, nous pouvons approfondir l'optimisation de la base de données.

Au fur et à mesure que nous travaillons sur notre contenu dans WordPress, nous générons d'autres types d'informations qui ne sont pas utiles et nuisent à la performance de notre site web. Pour cela, WP Rocket nous fournit cet outil pour faire un nettoyage plus ou moins approfondi.

Nettoyage des posts

Comme nous pouvons le voir sur l'image, il y a 3 éléments qui peuvent prendre de la place dans la base de données sans que nous nous y intéressions. Quand nous mettons à jour le contenu, une version précédente est sauvegardée, un brouillon automatique de ce que nous éditons est aussi généré, et les entrées rejetées.

Si nous supprimons ces éléments, nous libérerons de l'espace dans notre base de données.

Nettoyage des commentaires

Cette partie est importante car parfois notre base de données se remplit de commentaires « spam », c'est pourquoi WP Rocket a introduit cette option pour nettoyer ce type d'élément.

Nettoyage des transients

Quand nous travaillons dans WordPress, certains éléments transitoires sont générés que nous pouvons supprimer sans problème car ils seront régénérés.

Nettoyage de la base de données

À la fois ce point et le suivant, je recommande de faire une sauvegarde de la base de données car, bien que rien ne devrait se passer, approfondir les actions au sein de la base de données comporte toujours ses risques, donc ce n'est pas une mauvaise idée de faire une sauvegarde.

Activer cette case effectuera un nettoyage des tables de la base de données. Ce processus peut être automatisé.

Configuration du CDN avec WP Rocket

Avant d'approfondir la configuration des CDN avec WP Rocket, je veux expliquer ce qu'est un CDN et pourquoi il est utilisé.

Qu'est-ce qu'un CDN ?

Un CDN (Content Delivery Network) est un service dont l'objectif est d'améliorer la vitesse de transfert du contenu vers l'utilisateur. Pour cela, il crée un réseau de distribution de contenu sur différents serveurs à travers le monde pour raccourcir les temps dans la requête de ressource de l'utilisateur. C'est-à-dire que si l'utilisateur est au Brésil, un CDN offre le contenu hébergé sur un serveur plus proche de lui que le serveur d'hébergement web réel.

Images prises depuis la page de WP Rocket

Comment fonctionne un CDN ?

Il fonctionne via ces autres serveurs qui stockent une copie en cache du site web, et lorsque l'utilisateur demande ce contenu/ces ressources, un serveur plus proche effectue le transfert.

Ces types de services sont très utiles lorsque vous avez du contenu lourd tel que images, audios, vidéo et/ou de nombreuses visites. Si vous avez initialement un site web avec peu de visites, vous ne devriez pas vous inquiéter de cet aspect.

RocketCDN

WP Rocket nous offre la possibilité d'engager son CDN à un prix de 7,99 dollars par mois, moins de 7 euros.

CDN

Lorsque nous engageons un CDN, nous recevons des informations pour l'utiliser. L'un de ces éléments fournis est le CNAME, bien que s'il n'est pas fourni, nous pouvons l'obtenir.

Le CNAME est un type d'enregistrement DNS qui mappe un nom de domaine source à un nom de domaine cible

Pour utiliser cette fonction, nous n'aurons qu'à indiquer ce CNAME et lui dire pour quels fichiers nous le voulons.

Exclure des fichiers du CDN

L'option suivante, comme on s'y attend, est d'exclure les fichiers que nous ne voulons pas faire passer par le CDN.

Optimisation de la fonction Heartbeat de WordPress

Le heartbeat de WordPress est un transfert de données de contrôle pour établir la communication entre le backend et le frontend de WordPress et le serveur. Ce type de processus peut être l'une des raisons pour lesquelles vous pouvez ressentir une lenteur dans votre WordPress.

Parmi les actions qui peuvent être limitées :

• ›

  Sauvegarde automatique et révisions dans l'éditeur de post.

• ›

  Notifications dans le panneau d'administration WordPress.

• ›

  Information sur qui est en train d'éditer.

• ›

  Données en temps réel.

Si notre WordPress fonctionne correctement, je ne recommande pas de faire quoi que ce soit à ce stade, mais si nous remarquons une lenteur, nous pouvons essayer de limiter l'activité dans les différentes options.

Configuration des add-ons WP Rocket

Il existe certains éléments tels que les scripts Google Analytics et Facebook, que simplement en les activant dans cette partie de la configuration, nous pouvons obtenir une version en cache et améliorer les performances. Cette action répond directement à l'une des demandes habituellement indiquées dans les audits de vitesse de chargement comme Pagespeed « Tirer parti du cache du navigateur ».

Optimisation des images

L'optimisation des images est un processus qui, en raison de sa complexité, pourrait avoir son propre guide. WP Rocket propose un plugin indépendant pour travailler avec ces ressources. Depuis WP Rocket, nous pouvons accéder au téléchargement de sa version « gratuite ».

Outils WP Rocket

Les configurations WP Rocket peuvent être sauvegardées et importées pour éviter d'avoir à passer du temps sur ce processus à nouveau. Il nous donne aussi l'option d'effectuer un « Rollback », c'est-à-dire de revenir en arrière en termes de version installée.

Tutoriels WP Rocket

Pour terminer ce guide WP Rocket, le plugin lui-même fournit une série de vidéos donnant des informations sur les différentes actions qui sont effectuées et comment les réaliser.

Conclusions

Comme vous l'avez vu, WP Rocket est plus qu'un plugin de cache ; nous avons à notre disposition une suite complète pour optimiser la vitesse et la performance de notre site web, donc maintenant tout ce que nous avons à faire est d'essayer les différentes options. Qu'attendez-vous pour faire voler votre WordPress ?

Connaissiez-vous WP Rocket ? Avez-vous pu améliorer vos performances avec ce guide ? Avez-vous des questions ? Nous vous attendons dans les commentaires !