Faire configurer WP Rocket Avec Elementor est relativement simple. En revanche, il est un peu plus complexe de le configurer correctement pour obtenir des résultats optimaux.
Dans ce guide, je vais partager avec vous les paramètres optimaux pour WP Rocket. Certaines de mes recommandations peuvent ne pas être possibles en fonction de votre site web particulier, de vos choix de conception et des modules complémentaires utilisés.
Je vous suggère de suivre les recommandations ci-dessous aussi fidèlement que possible. Cependant, bien sûr, assurez-vous que tout fonctionne correctement à chaque étape du processus !
Idéalement, lorsque vous modifiez les paramètres, il est préférable de le faire sur un site de test ou de pré-production. Vous risquez en effet de rencontrer des problèmes lors de la mise au point des paramètres de configuration.
Je vous invite à consulter ma liste des meilleurs plugins de mise en cache pour WordPress, parmi lesquels WP Rocket est aujourd’hui le meilleur plugin d’optimisation disponible.
Allons-y !
comment configurer wp rocket et Elementor dans WordPress
1. Mise en cache
- Cache mobile : Accélérez votre site pour vos visiteurs mobile.
- Activez la mise en cache pour les appareils mobiles : Activé, toujours.
- Cache utilisateur : Activez si vous avez une zone de connexion qui ne pose pas de problèmes.
- Délai de nettoyage du cache : Entrez 0 ou 10. Testez d’abord avec ‘0’, et si tout fonctionne bien, gardez cette valeur.
Si des problèmes périodiques surviennent, passez plutôt à ’10’. En particulier, si vous avez un commerce électronique lié à AJAX, vous aurez probablement besoin d’avoir cette valeur à ’10’.
2. Optimisation des fichiers
- Minifier les fichiers CSS : Activer, toujours. Sauf dans de très rares cas, si cela casse quelque chose, peu probable.
- Combiner les fichiers CSS : Désactiver, toujours. Pas nécessaire avec HTTP/2, et en effet, cela ralentira un peu le temps de téléchargement.
- Exclure les fichiers CSS : Laissez vide.
- Optimiser la livraison des CSS : Cela vaut la peine d’essayer. N’utilisez que l’option Charger les CSS de manière asynchrone, car l’autre option (supprimer les CSS inutiles) n’est pas encore assez stable et provoque toutes sortes de problèmes, y compris des problèmes de serveur. Elle gonfle également la base de données, il est donc fortement recommandé de ne pas tester la fonction CSS inutile, sauf en phase de test.
L’activation de l’option Optimiser la livraison CSS entraîne souvent des problèmes de CLS (cumulative layout shift, l’une des principales caractéristiques du Web) si le chemin critique CSS généré automatiquement n’est pas complet. Faites-le si vous savez comment résoudre ce problème en remplissant correctement le champ CSS Critical Fallback. Sinon, il est préférable de laisser cette option désactivée si elle provoque des problèmes de CLS.
- Minifier les fichiers JavaScript : Activer, toujours. Sauf dans de très rares cas, si cela casse quelque chose.
- Combiner les fichiers JavaScript : Désactiver, toujours. Pas nécessaire avec HTTP/2, et en effet, cela ralentira un peu le temps de téléchargement.
- Exclure les fichiers JavaScript : Au cas où la minification pose des problèmes, vous pouvez ajouter les mauvais fichiers JavaScript ici pour éviter de désactiver la minification pour tous les fichiers.
- Chargement retardé de JavaScript : Activer. Cette fonctionnalité est très compatible avec l’installation par défaut d’Elementor et d’Elementor Pro et ne devrait pas poser de problèmes. Si votre installation est plus complexe, avec de nombreux plugins et addons, elle pourrait causer quelques problèmes. Essayez de la maintenir activée en ajoutant les fichiers JS gênants à la liste des fichiers JavaScript exclus.
- Retarder l’exécution de JavaScript : Activer. Il s’agit de la fonctionnalité de WP Rocket la plus importante en termes de performances. Entièrement compatible avec Elementor pro gratuit.
L’objectif de cette fonctionnalité est de l’utiliser avec le moins d’exclusions possible dans la liste. En particulier, nous ne voulons pas exclure jQuery ; son chargement, son analyse et son exécution pèsent lourdement sur les performances.
Cependant, cette exclusion interférera avec tout ce qui est lié à JS. Si la section du héros de chaque page de votre site Web a des dépendances JS, vous ne pourrez pas utiliser cette fonctionnalité dans toute sa mesure. Si, par exemple, vous avez des curseurs ou des carrousels dans votre section héroïque, ils ne pourront pas fonctionner avec cette option.
Même dans ces conditions, il est recommandé de l’activer et d’ajouter les exclusions recommandées par WP Rocket ici. Vous n’obtiendrez pas l’incroyable augmentation des performances, mais cela vous aidera quand même. Idéalement, concevez vos sites en tenant compte de JavaScript et placez tout ce qui dépend de JavaScript en dessous du pli.
Si des éléments dépendant de JavaScript, tels qu’un carrousel ou un slider, n’apparaissent que sur quelques pages, désactivez cette fonctionnalité pour ces pages uniquement.
3. médias
LazyLoad : Cela peut améliorer le temps de chargement réel et perçu car les images, les iframes et les vidéos ne seront chargées que lorsqu’elles entreront (ou sur le point d’entrer) dans la fenêtre. Réduit le nombre de requêtes HTTP.
Activez tout ici :
- Activez les images.
- Activer les iframes et les vidéos.
- Remplacer la iframe YouTube par une image de Prévisualisation.
- Images ou iframes exclues : C’est un paramètre très important. Vous devez ajouter vos images qui sont au-dessus du pli ici, en particulier votre logo. Il ne peut pas être laissé vide, sinon cela nuira à votre LCP (largest contentful paint, autre vitalité du web).
- Ajoutez les dimensions manquantes des images : Si vous avez des problèmes de CLS et des avertissements à ce sujet, vous pouvez l’activer pour voir si cela aide. Si votre CLS est à 0, ne l’activez pas.
Idéalement, vous devriez ajouter toutes les images qui se trouvent au-dessus du pli sur toutes vos pages.
Malheureusement, il n’y a pas de raccourci pour cela. Avec Elementor, nous ne pouvons pas ajouter un nom de classe directement aux éléments . Les noms de classe sont ajoutés à un élément parent.
Important : si vous êtes au-dessus du pli, les images sont définies comme des images d’arrière-plan ; elles ne seront pas chargées paresseusement de toute façon, donc pas besoin de les exclure.
4. Préchargement
- Activer le préchargement : Activer, toujours.
- Activer le préchargement du cache basé sur le plan du site : Activer.
- Si vous avez Rank Math ou Yoast seo comme autre plugin SEO, vous verrez également :
- Activer le préchargement des liens : Activer, toujours.
- Préchargement des requêtes DNS : Le préchargement des requêtes DNS peut permettre aux ressources externes de charger plus rapidement, surtout sur les réseaux mobiles. Ajouter des liens externe a Précharger.
- URLs à précharger : Ajoutez vos domaines externes ici. Vous n’avez aucune idée de ce que c’est ? Apprenez-en plus ici, ou ignorez-les, l’amélioration des performances est limitée.
- Rank Math XML sitemap : Activer.
- Polices à précharger : Ajoutez vos polices qui se trouvent au-dessus du pli ici. Pour connaître leur URL, visitez votre site en mode incognito dans Chrome, ouvrez les outils de développement (F12), allez dans l’onglet « Réseau », rafraîchissez la page, cliquez sur le filtre « Police », puis faites un clic droit > copier > copier l’adresse du lien.
Si vous obtenez une adresse comme celle-ci :
Il est externe (c’est-à-dire qu’il n’est pas auto-hébergé).
Vous devez donc ajouter cette partie :
//fonts.gstatic.com aux URL à prélever.
Si vous obtenez une adresse comme celle-ci :
Alors ajoutez seulement cette partie :
/wp-content/themes/votre-theme/assets/fonts/font-file.woff2
Ce paramètre (Fonts to preload) doit être utilisé avec précaution. Ne préchargez pas toutes les polices, seulement celles qui se trouvent au-dessus du pli, et idéalement, seulement la version WOFF2. Pour en savoir plus, cliquez ici.
5. Règles avancées
Cela dépend du site Web spécifique, de sorte que je ne donnerai pas de recommandations générales ici. Pour la plupart des sites web, vous n’avez rien à remplir ici.
6. Base de données
Un simple outil de nettoyage de la base de données. Utilisez-le librement, et idéalement, faites une sauvegarde avant de nettoyer votre base de données.
Vous trouverez ici une liste de meilleurs plugins de sauvegarde wordpress.
7. CDN
Recommandé si vous avez un public mondial. Si vous avez un public local et que votre serveur se trouve dans la même localité (ou à proximité), vous ne bénéficierez peut-être pas beaucoup d’un CDN.
Le RocketCDN proposé par WP Rocket est une bonne option ; cependant, je le trouve cher. Je préfère BunnyCDN, qui est 10x moins cher et tout aussi bon.
8. Heartbeat
Réduire ou désactiver l’activité de l’API Heartbeat peut permettre d’économiser certaines ressources de votre serveur. Activez Control Heartbeat si votre serveur a des ressources limitées. Gardez les valeurs par défaut ci-dessous.
9. Add-Ons
Activez-les selon vos besoins. La plupart de ces options sont assez explicites.
- Varnish : Si votre serveur utilise Varnish, vous devez activer cet add-on.
- Compatibilité WebP : WP Rocket créera des fichiers cache séparés pour servir vos images WebP afin d’améliore la compatibilité des navigateurs pour les images WebP.
- CloudFlare : Intégrez votre compte Cloudflare avec cet add-on. Il suffit d’entrez votre adresse e-mail, la clé API globale et le domaine de votre compte CloudFlare pour pouvoir purger le cache Cloudflare et bénéficier des réglages optimaux pour WP Rocket.
- Sucuri : Afin de de synchronisez le cache Sucuri avec cet add-on vous devez Fournir votre clé API pour vider le cache Sucuri lorsque le cache de WP Rocket est effacé.
10. Optimisation des images
Publicité glorifiée pour le plugin Imagify de la même équipe que WP Rocket. Je préfère de loin ShortPixel AI, c’est donc celui que je vous recommande de prendre à la place.
11. Outils
Très utile pour créer une sauvegarde de vos paramètres ou importer les paramètres d’un autre site web (par exemple, vous optimisez d’abord une version d’essai, puis importez les paramètres dans le site de production).
12. Tutoriels
Ici vous trouverez des vidéos a suivre pour chaque des précédentes étapes.
Comment Résoudre Les Problèmes de WP Rocket avec Elementor ?
Voici les problèmes connus lorsque vous avez activé la fonction Retarder JavaScript sans exclusions.
L’icône de navigation Elementor nécessite deux clics sur un appareil mobile.
L’icône de navigation nécessite deux clics au lieu d’un sur les appareils mobiles. Pour résoudre ce problème, ajoutez ce code à votre fichier functions.php ou à un nouveau code snippet (méthode recommandée).
Vous devrez ajuster la valeur « 58px » pour qu’elle s’affiche à l'emplacement correct pour votre conception. Il s’agit du décalage par rapport au haut de la fenêtre d’affichage. Testez-le, et vous comprendrez rapidement.
Ensuite, dans les exclusions du délai d’exécution JavaScript, ajoutez ‘ElementorNavFallBackFunction’.
function elementor_nav_fallback_js() {
?>
<script>
if (!window.elementorProFrontend){
let navToggle = document.querySelector('.elementor-menu-toggle');
let nav = document.querySelector('nav.elementor-nav-menu--dropdown');
navToggle.addEventListener('click', ElementorNavFallBackFunction);
function ElementorNavFallBackFunction(){
if (!window.elementorProFrontend){
navToggle.classList.add('elementor-active');
navToggle.setAttribute('aria-expanded','true');
nav.style.width = '100vw';
nav.style.position = 'fixed';
nav.style.left = '0';
nav.style.top = '58px';
nav.setAttribute('aria-hidden','false');
}
navToggle.removeEventListener('click',ElementorNavFallBackFunction);
}
}
</script>
<?php
}
add_action( 'wp_footer', 'elementor_nav_fallback_js');
Une table des matières n’est pas générée avec elementor.
S’il s’agit d’un site Web pour lequel vous n’utilisez pas cette fonctionnalité, ignorez cette partie. En revanche, si vous l’utilisez, vous devez corriger cette erreur.
La table des matières est une excellente fonction de référencement. Si elle n’est pas générée au chargement de la page, Google ne la verra pas et vous n’en tirerez aucun avantage en termes de référencement. Pour la réactiver, vous devez exclure à peu près tous les fichiers JS de votre site (ou tous ceux liés à Elementor, au moins, + jQuery).
Mais avec le code suivant, vous n’avez pas besoin d’exclure tous ces fichiers pour que la table des matières fonctionne. Ainsi vous pouvez éliminez les ressources qui bloquent le rendu et réduisez les ressources javascript inutilisées de votre site web.
Pour résoudre ce problème, ajoutez ce code soit dans votre fichier functions.php, soit dans un nouveau code snippet (méthode recommandée).
Vous devrez modifier cette ligne : scope : ‘.content_of_post’,
Remplacez .content_of_post par votre sélecteur, le même que celui que vous avez entré dans les paramètres de l’élément Table Of Content.
Ensuite, dans les exclusions du délai d’exécution JavaScript, ajoutez ‘TableofContentContainer’.
function elementor_table_of_content_fallback_js() {
?>
<script>
/*!
* jQuery-TOC
* Table of Contents Generator Plugin for (non-)jQuery
*
* @author Dolphin Wood <dolphin.w.e@gmail.com>
* @version 0.0.6
* Copyright 2015. MIT licensed.
*/
!function(e){"use strict";var t=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e},n=function(e,t){var n=[],r=document.querySelectorAll(t);return Array.prototype.forEach.call(r,function(t){var r=t.querySelectorAll(e);n=n.concat(Array.prototype.slice.call(r))}),n},r=function(e){if("string"!=typeof e)return 0;var t=e.match(/d/g);return t?Math.min.apply(null,t):1},o=function(e,t){for(;t--;)e=e.appendChild(document.createElement("ol")),t&&(e=e.appendChild(document.createElement("li")));return e},c=function(e,t){for(;t--;)e=e.parentElement;return e},i=function(e,t){return function(n,r,o){var c=n.textContent,i=t+"-"+o;r.textContent=c;var a=e?i:n.id||i;a=encodeURIComponent(a),n.id=a,r.href="#"+a}},a=function(e){var t=e.selector,a=e.scope,u=document.createElement("ol"),l=u,f=null,d=i(e.overwrite,e.prefix);return n(t,a).reduce(function(e,t,n){var i=r(t.tagName),a=i-e;a>0&&(l=o(f,a)),a<0&&(l=c(l,2*-a)),l=l||u;var p=document.createElement("li"),m=document.createElement("a");return d(t,m,n),l.appendChild(p).appendChild(m),f=p,i},r(t)),u},u=function(e){var n={selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"};e=t(n,e);var r=e.selector;if("string"!=typeof r)throw new TypeError("selector must be a string");if(!r.match(/^(?:h[1-6],?s*)+$/g))throw new TypeError("selector must contains only h1-6");var o=location.hash;return o&&setTimeout(function(){var e=document.getElementById(o.slice(1));e&&e.scrollIntoView()},0),a(e)};"function"==typeof define&&define.amd?define(function(){return u}):e.initTOC=u}(window);
let TableofContentContainer = document.querySelector('.elementor-toc__body');
if (TableofContentContainer){
let toc = initTOC({
selector: 'h2, h3, h4, h5, h6', /* Be careful, don't add H1 if there is no H1 Heading in your scope container. */
scope: '.content_of_post',
overwrite: false,
prefix: 'table-of-content'
});
TableofContentContainer.appendChild(toc);
}
</script>
<style>
.elementor-toc__body ol:not(.elementor-toc__list-wrapper), .elementor-toc__body li:not(.elementor-toc__list-item) {
margin: 0!important;
padding-top: 1px !important;
padding-bottom: 1px!important;
}
</style>
<?php
}
add_action( 'wp_footer', 'elementor_table_of_content_fallback_js');
configurer WP Rocket – Conclusion
j’espère que ce guide de configuration de WP Rocket avec Elementor vous aidera à optimiser votre site web pour une vitesse maximale. La mise en place de plugins d’optimisation est autant un art qu’une science et nécessite une bonne dose de patience.
Pour avoir un site web vraiment rapide, il faut travailler dur et utiliser les bons outils, comme WP Rocket !
Laissez-moi voir vos résultats !
