WordPress : Accélérer le Thème Divi avec WP Rocket (tutoriel complet)

Vous êtes tombé sous le charme du Thème Divi ? Nous aussi, ça tombe bien !

Par contre, vous avez peut-être remarqué que son constructeur de pages, le Divi Builder, avait tendance à ralentir la vitesse de chargement du site ?

Rassurez-vous, c’est normal !

Pour profiter d’un site WordPress rapide avec Divi, il est nécessaire d’utiliser les bons réglages, et encore une fois, ça tombe bien ! Ci-dessous, nous vous partageons nos Settings parfaits, notamment pour WP Rocket, permettant de jouir d’un thème Divi qui ne souffre pas de lenteurs au chargement.

En 2022, Divi est-il un thème lent ou rapide à charger ?

Effectivement, depuis le mois d’août 2021 et la sortie de Divi 4.10, le thème Divi et son Divi Builder figurent parmi les solutions les plus performantes pour créer rapidement un beau site WordPress rapide ! Nous avons rédigé un avis complet sur le thème Divi, d’ailleurs.

Grâce aux efforts de l’équipe Elegant Themes, il est à présent possible de s’approcher d’un score de 100/100 sur Google PageSpeed Insights et GTmetrix, avec des pages de vente complexes réalisées avec Divi.

Bien sûr, un site Web n’est pas l’autre et beaucoup de facteurs peuvent influencer votre score de performance.

Utiliser (abondamment) le Divi Builder peut-il rendre WordPress lent ?

Effectivement, la mise à jour de performance réalisée via Divi 4.10 se base sur un chargement sélectif des ressources. Autrement dit, Divi va charger intelligemment, tous les scripts nécessaires pour votre page, en fonction des modules Divi que vous aurez effectivement choisi d’utiliser.

✅ Donc, si vous réalisez une belle page de vente avec peu de modules Divi ayant une nature différente, il y aura peu de scripts à inclure dans votre code source. Dans ce cas, Divi et donc votre page seront plus rapides à charger.

⛔️ En revanche, si vous utilisez de très nombreux types de modules Divi sur une même page, cela pourrait avoir une incidence négative sur votre temps de chargement et Divi pourrait à nouveau être assez lent.

Comment améliorer les performances de Divi grâce à WP Rocket et ses réglages parfaits ?

Tutoriel WordPress : comment optimiser la vitesse de Divi ?

Par défaut, le thème Divi peut vous offrir un score PageSpeed Insights assez médiocre…

• surtout si vous utilisez le Divi Builder n’importe comment (en activant tous les modules)
• surtout si vous n’avez effectué aucun des réglages ci-dessous (dans WP Rocket, Divi, etc)
• surtout si vous intégrez d’énormes images non compressées dans vos pages (sans lazyload)
• et ainsi de suite…

Des solutions existent pour rendre Divi rapide !

Grâce à quelques plugins d’optimisations, dont WP Rocket, KeyCDN et surtout, grâce à beaucoup de tests, nous avons pu obtenir un score très satisfaisant sur différents outils de mesure de performance tels que…

• GTmetrix
• KeyCDN SpeedTest
• PageSpeed Insights

Voyez par exemple le score PageSpeed de 99/100 pour le site EasyHoster-avis.com, entièrement réalisé avec Divi et le Divi Builder.

Bien sûr, il s’agit ici d’un site très simple, mais bénéficier d’un tel score avec le Thème Divi et son Page Builder, cela reste très encourageant ! 

Configuration pas à pas de Divi et WP Rocket pour obtenir les meilleures performances !

En suivant les 5 grandes étapes ci-dessous, vous devriez obtenir une excellente vitesse de chargement, ainsi qu’un excellent score PageSpeed et GTmetrix, pour votre site WordPress avec Divi et WP Rocket.

1. Configuration de Divi 

Dans le Tableau de bord WordPress > Divi > Options du thème > Général.

Dans les versions inférieures à Divi 4.10, nous laissions activées la minification et concaténation par défaut de Divi.

Dans le Tableau de bord WordPress > Divi > Options du thème > Créateur > Avancé.

“FOUT” : “flash of unstyled text”, ou “glitch » comme on dit chez nous 😊

Nous activons la Génération de fichiers CSS statiques. Cela corrige les ”flash / glitch / shift” de Divi et diminue les problèmes de CLS (Content layout shift) signalés par PageSpeed.

– Mémorisez l’emplacement du bouton Clear cache (“Clair” en français). Il vous permettra de vider le cache des fichiers CSS statiques de Divi. Cela peut être utile pour que vos dernières modifications de CSS dans Divi soient reflétées publiquement en Front End.

– Si vous utilisez l’Éditeur de blocs Gutenberg, n’hésitez pas à désactiver la dernière option « Activer l’éditeur classique » (Classic Editor).

Dans le Tableau de bord WordPress > Divi > Options du thème > Général > Performance.

Dans les versions de Divi 4.10 et supérieures, voici notre configuration de Performance.

– La Critical Threshold Height ici est configurée sur « Medium » pour éviter le CLS. Pour plus de performances, vous pourriez tester la valeur « Low », mais vous risquez de voir des glich / shift de polices d’écriture ou de boutons Divi (bordure bleue) au chargement des pages non mises en cache. À l’inverse, en cas de flash / shift trop importants sur certaines mises en page complexes, vous n’aurez pas d’autre choix que de pousser le Threshold à « High ».

– Les Emojis peuvent être aussi désactivés ici, allez-y ! Mais aujourd’hui, par défaut, WP Rocket se charge aussi pour nous de désactiver les Emojis de WordPress. N’hésitez pas à activer Disable WordPress Emojis si vous le souhaitez, cela ne risque rien.

– Le chargement différé de jQuery “Defer jQuery And jQuery Migrate”, de son côté, est une optimisation plus sensible qui sera particulièrement utile aux sites “simples”. De notre côté, avec un site relativement complexe placé derrière un CDN, et déjà optimisé avec WP Rocket (voir nos Réglages WP Rocket ci-dessous), nous obtenions des erreurs dans la console JavaScript à cause du chargement asynchrone de jQuery, ce qui nous a contraints à désactiver “Defer jQuery And jQuery Migrate”.

Si vous choisissez malgré tout d’activer le “Defer jQuery And jQuery Migrate”, testez scrupuleusement toutes les zones importantes de votre site en étant déconnecté du Tableau de bord WordPress, et en affichant votre console JavaScript dans Google Chrome.

---

Comment afficher la Console JavaScript de Google Chrome via les Options pour les développeurs ?

En cas de besoin, pour afficher la console de débugage JavaScript de Google Chrome, cliquez sur Afficher > Options pour les développeurs > Console JavaScript. Ensuite, en bas de votre écran s’afficheront : l’outil de développement du navigateur, la console JavaScript et plusieurs autres onglets, comme le montre cette capture d’écran.

---

Pour en finir avec Divi, voici quelques conseils et bonnes pratiques à garder à l’esprit lorsque vous construisez des pages avec le Divi Builder. Ces idées vous permettront de ne pas endommager vos performances et votre score PageSpeed, lorsque vous allez créer vos pages de vente.

Comment bien utiliser le Divi Builder pour améliorer son score PageSpeed ?

Voici donc quelques points essentiels à prendre en compte lorsque vous créez des pages de vente avec le Divi Builder :

• Optimisez le contenu qui s’affiche sans défilement (« above-the-fold », en haut de page) pour qu’il puisse “bien travailler” avec le « Divi’s built-in Critical CSS ». C’est-à-dire, le « CSS Critique » qui sera chargé en priorité, pour que l’affichage du « haut de la page » se passe comme prévu. Autrement dit, veillez à garder un haut de page relativement sobre, sans le charger de trop d’éléments inutiles avant défilement.
• Utilisez des Classes CSS au lieu de code CSS “inline” grâce aux « Divi Presets ». Ces Presets sont une collection de styles prégénérés qui peuvent être utilisés pour tirer parti de la « Divi’s built-in smart styles feature ». Si vous les utilisez judicieusement, cela permettra aux éléments de partager des bouts de code CSS communs, regroupés en Classes CSS. Donc, un seul bloc de code CSS peut être utilisé pour plusieurs éléments, grâce aux classes. Cela sert à réduire la nécessité, pour chaque élément, d’avoir son propre bloc de CSS individuel et donc, réduit le code CSS de la page.

• Limitez si possible les types de modules que vous employez pour construire la page. Divi ne chargera aucun module dont vous n’avez pas besoin (cela inclut tout leur code JS & CSS), et ce, grâce au « Divi’s dynamic framework ». Donc par exemple, s’il est possible d’obtenir un résultat identique avec deux modules « Texte » (un seul type de module), plutôt qu’un module « Texte » et un module « Blurb » (deux types de modules différents), il est préférable de n’utiliser qu’un seul type de module. Donc, deux modules « Texte ».
• N’utilisez les animations sur vos pages que si elles sont nécessaires. Si vous ne les utilisez pas, Divi ne chargera pas les codes JS & CSS nécessaires aux animations, et ce, grâce à ses révolutionnaires « Divi’s dynamic features ». Moins vous activez d’animations, plus votre page se chargera rapidement. À vous de voir si vous voulez privilégier le bling-bling ou l’expérience utilisateur.

Conclusion sur les options de Performance de Divi

Essentiellement, toutes les optimisations de Divi 4.10 devraient pouvoir être activées, sauf pour certains sites plus complexes ou utilisant un CDN. Ceux-ci devront peut-être se passer de “Defer jQuery And jQuery Migrate”.

Ensuite, puisque maintenant vous comprenez parfaitement le fonctionnement des performances du Divi Builder, vous êtes prêt à faire une utilisation responsable des modules qui vous sont offerts par Divi.

2. Configuration de WP Rocket pour optimiser Divi

Dans le Tableau de bord WordPress > Réglages > WP Rocket > Cache.

Passons maintenant aux réglages de WP Rocket !

– Cache de WP Rocket

• Activer la mise en cache pour les appareils mobiles :
  Oui
• Créer un fichier de cache à part pour les mobiles :
  Oui (aide le responsive du Divi Builder)
• Activer la mise en cache pour les utilisateurs WordPress connectés :
  Non
• Délai de nettoyage du cache :
  10 heures (un délai plus long risque de casser certaines fonctions JavaScript, cf. “Nonces (security tokens) and WordPress Cache Lifespan of 10 hours”)

– Optimisations des fichiers CSS & JS avec WP Rocket

Dans le Tableau de bord WordPress > Réglages > WP Rocket > Optimisations des fichiers.

• Minifier les fichiers CSS :
  Oui
• Combiner les fichiers CSS :
  Non (tous les serveurs EasyHoster sont HTTP/2 et la concaténation des fichiers n’est ni recommandée ni utile pour les sites hébergés en HTTP/2)
• Optimiser le chargement du CSS :
  Non, malgré notre insistance (cela fait flasher le webdesign de Divi, dommage)
• Removed Unused CSS (version bêta) :
  Non pour nous, car la bêta cassait notre config
  (mais testez-là, car le gain PageSpeed à prévoir est énorme)
  Mise à jour 14 juillet 2022 :
  suite à plusieurs tests sur des sites basés sur les Thèmes Divi & Extra d’ElegantThemes, la fonctionnalité Remove Unused CSS (toujours en bêta, mais plus pour longtemps 😉) offre maintenant d’excellents résultats pour la plupart des sites (à vérifier sur Purify CSS Online), sans détériorer leur webdesign (donc vraiment, testez-là !)
  Note de compatibilité WP Rocket RUCSS et Divi +4.10 : en théorie compatible avec le “Critical CSS”, mais nous avons personnellement eu des soucis avec lui. Donc, en cas de souci, désactivez-le et laissez plutôt faire WP Rocket. Pareil pour la fonction ”Dynamic CSS”, WP Rocket optimisera lui-même ce code source (voir Divi > Theme Options > Onglet Performance).
  

• Minifier les fichiers JS :
  Oui
• Combiner les fichiers JavaScript :
  Non (même remarque que ci-dessus sur le HTTP/2)
• Charger le JavaScript en différé :
  Oui (aucun souci)

• Reporter l’exécution JavaScript :
  Oui, mais possible altération du tracking du pixel Facebook, à confirmer.
  Fichiers JavaScript exclus : 
  /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/Divi/js/scripts.min.js (sinon, casse les images avec animations)

– Optimisation des médias (images, etc) avec WP Rocket

Dans le Tableau de bord WordPress > Réglages > WP Rocket > Média.

• Lazyload pour les images, iframes et vidéos :
  Non, aucun (malheureusement, trop de bugs avec le LazyLoad de WP Rocket et les modules du Divi Builder :
  par exemple, images manquantes sur mobile avec le module “Image” de Divi partiellement “Désactivé” sur Desktop via Hide feature (test avec iPhone iOS 13 sous Safari/Chrome).
  Voir plus bas, l’alternative via le LazyLoad du plugin Smush.
• Ajouter les dimensions d’image manquantes :
  Oui

Pour les anciennes versions de WP Rocket ~ 3.9.1 :

• Désactiver les [ embeds ] internes et prévenir des embeds extérieures :
  Non (on aime les embeds)
• Compatibilité WebP :
  Non (utile uniquement si vous êtes passé sur des images en WebP, de notre côté, on préfère toujours les bonnes vieilles JPEG et PNG, à condition qu’elles soient bien compressées via TinyPNG)

– Configuration du Préchargement de WP Rocket

Dans le Tableau de bord WordPress > Réglages > WP Rocket > Préchargement.

• Activer le préchargement :
  Oui
• Activer le préchargement du sitemap :
  Oui
• Sitemap XML Yoast SEO :
  Oui (aussi compatible All-in-one SEO, etc)
• Préchargement des URLs au survol du lien :
  Oui
• Préchargement des requêtes DNS, pour nous :
  //cdn.easyhoster.com
//fonts.gstatic.com
//fonts.googleapis.com
  (a priori, assez exhaustif pour les ressources arrivant tôt dans la page, faites vos tests)

Un mot sur le préchargement des polices et icônes telles que Font Awesome

Nous avons finalement abandonné le préchargement des polices, car les résultats sur nos performances et nos différents scores étaient trop aléatoires. Mais voici tout de même nos précédents réglages au cas où vous souhaiteriez tester…

• Préchargement des polices et icônes Divi :
  /wp-content/themes/Divi/core/admin/fonts/modules.ttf
  Nous avons notre propre installation de Font Awesome (intégrée en balise <head>).
  Certaines ne sont pas utilisées dans le haut du site (voir console Firefox), mais voici toute la liste au cas où :
  /wp-content/fontawesome/webfonts/fa-light-300.woff2
/wp-content/fontawesome/webfonts/fa-regular-400.woff2
/wp-content/fontawesome/webfonts/fa-brands-400.woff2
/wp-content/fontawesome/webfonts/fa-solid-900.woff2
/wp-content/fontawesome/webfonts/fa-light-300.ttf
/wp-content/fontawesome/webfonts/fa-regular-400.ttf
/wp-content/fontawesome/webfonts/fa-solid-900.ttf

Dans votre child-theme, votre police d’icônes peut être intégrée de façon asynchrone, grâce à un attribut onload, comme ceci :

<link rel="stylesheet" media="print" onload="this.media='all'" href="https://www.example.com/wp-content/fontawesome/css/all.css">

Ensuite, vérifiez bien que le préchargement de Font Awesome (par exemple) ne fait pas trop baisser votre score Google PageSpeed.

– Configuration d’un CDN (KeyCDN) via WP Rocket

Dans le Tableau de bord WordPress > Réglages > WP Rocket > CDN.

• Activer le Content Delivery Network (CDN) : 
  cdn.easyhoster.com
  (notre CDN préalablement configuré chez KeyCDN, voir ci-dessous pour les détails)
• Exclusion obligatoire pour la Génération de fichiers CSS statiques de Divi :
  /wp-content/et-cache/(.*)/et-core-unified-(.*).min.css
  (sinon, erreur de cross-origin dans la console JavaScript)

Bravo !

En suivant ces quelques étapes, vous venez d’économiser une ou deux journées de travail à chercher les réglages parfaits pour WP Rocket avec Divi ! 😊

3. Configuration d’un CDN (KeyCDN) avec Divi et WP Rocket

• Origin Shield :
  enabled (sécurité)
• Max Expire (min) :
  4320
• Ignore Query String :
  enabled
• Cache Brotli :
  enabled (tous les serveurs EasyHoster sont compatibles Brotli)
• Expires and Cache-Control response headers (minutes) :
  525000 (1 an, pour faire plaisir à PageSpeed)
• SSL :
  Let’s Encrypt
• Force SSL :
  Oui (pourquoi pas)
• Zone alias :
  cdn.easyhoster.com
  (c’est notre sous-domaine ; vous, configurez votre CNAME dans vos zones DNS avancées)

Un CDN gratuit en alternative à KeyCDN ?

Si vous ne pouvez pas vous offrir les services de KeyCDN actuellement, malgré leurs tarifs très attractifs, il vous est possible de vous orienter vers le CDN gratuit de WordPress.com accessible via le plugin Jetpack.

4. Configuration du lazyload des images via Smush

En complément des solutions précédemment citées, nous utilisons aussi le plugin Smush pour gérer le LazyLoad de nos images.

Actuellement et d’après notre expérience, Smush fonctionne mieux que WP Rocket pour le chargement asynchrone des images de Divi.

En effet, pendant nos derniers tests, le lazyload de WP Rocket faisait planter certaines images sur mobile, par exemple lorsque le masquage de modules responsives était activé. Alors que de son côté, le lazyload de Smush (plugin gratuit) fonctionne à merveille avec Divi.

Pour utiliser Smush en synergie avec WP Rocket, il vous suffit…

• dans WP Rocket, de désactiver le Lazy load
• et dans Smush, de n’activer que le Lazy load

Voici notre configuration Smush pour le lazyload :

• Media Types :
  tout sauf SVG
• Output Locations :
  tout sauf les Widgets

• Display & Animation :
  None
• Class & IDs exclusion :
  #logo
  (pour ne pas faire flasher notre logo intégré à Divi)

Bien sûr, n’hésitez pas à mettre votre nouvelle configuration de Lazy load à l’épreuve, en scannant votre site Avant / Après, avec PageSpeed et via des visites réelles, depuis vos différents périphériques Desktop & Mobile.

5. Configurations bonus (sous le capot, côté serveur cPanel, etc)

Last but not least…

En guise de bonus, voici la configuration sous le capot et côté serveur que vous pouvez notamment retrouver (ou reproduire) chez tout Hébergeur cPanel tel qu’EasyHoster.

– Asset CleanUp

Installez le plugin WordPress Asset CleanUp. Il vous permet de désactiver sélectivement les plugins inutiles sur vos meilleures pages. Lorsque Asset CleanUp est bien utilisé, le gain pour vos scores PageSpeed, GTmetrix (et votre expérience utilisateur) peut être considérable !

– Remplacer les CRONs de WordPress

Cela peut se faire, soit grâce au module WordPress Toolkit ; soit via la directive define('DISABLE_WP_CRON', 'true') de votre fichier wp-config.php.

Il est très sain de désactiver les CRONs PHP de WordPress pour les remplacer par de véritables tâches CRONs (serveur), d’un simple clic via WordPress Toolkit ou via le module Cron Jobs de cPanel.

Pour passer automatiquement votre site WordPress sur des tâches CRONs optimisées côté serveur, rendez-vous dans cPanel > WordPress Toolkit et cliquez sur « Prendre le contrôle sur wp-cron.php ».

– Contrôle du Heartbeat WordPress

Soit grâce à WP Rocket > Réglages > Heartbeat ; soit grâce au plugin gratuit Heartbeat Control, il est très utile de réduire la fréquence des battements de cœur de WordPress.

Ces requêtes régulières servent notamment à l’enregistrement automatique de vos contenus, en Brouillon, lorsque vous êtes en cours de rédaction dans WordPress.

Par défaut, ces battements de cœur sont trop réguliers et peuvent consommer inutilement beaucoup de ressources serveur, saturer votre hébergement et périodiquement ralentir votre site. Réduisez-les.

– Réduire les révisions de WordPress

WordPress enregistre, en base de données, toutes les versions de vos articles en cours de rédaction. Cependant, si vous passez beaucoup de temps à rédiger dans votre Tableau de bord WordPress, ce nombre de Révisions peut vite s’envoler et surcharger gravement votre base de données MySQL.

Heureusement, cela peut facilement être corrigé via votre fichier wp-config.php. Vous pourriez par exemple y ajouter les lignes de code suivantes, à adapter selon vos préférences.

// Réduit les révisions de WordPress
define('AUTOSAVE_INTERVAL', 300); // Une révision toutes les 5 minutes (300 secondes)
define('WP_POST_REVISIONS', 12); // Conserver uniquement 12 versions précédentes pour les pages et articles

– Interdire l’accès au XML RPC

Ce protocole XML RPC est obsolète depuis 2016, suite à la création de l’API REST pour WordPress.

Si votre hébergeur ne bloque pas déjà l’accès au XML RPC afin d’améliorer votre sécurité et économiser les ressources de votre compte d’hébergement, vous pouvez le faire vous-même en installant le plugin “Disable XML-RPC” ou en ajoutant ces lignes de code en haut de votre fichier .htaccess :

# Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
order deny,allow
deny from all
</Files>

– Déplacer la page de login (obligatoire)

Tous les sites WordPress (même les plus jeunes), reçoivent d’innombrables tentatives de connexion automatique sur leur page wp-login.php. Il s’agit de pirates qui tentent de deviner votre mot de passe pour manipuler votre site et, par exemple, y intégrer du spam.

Ces tentatives de connexion illicites, cela s’appelle des attaques Brute Force ou Attaques par force brute.

Les bons hébergeurs bien protégés (comme EasyHoster 😊) vont automatiquement bloquer les tentatives de connexion litigieuses et répétées au script wp-login.php. Cependant, les pirates utilisent de multiples adresses IP pour deviner vos identifiants, ce qui rend les attaques plus difficiles à bloquer. Laisser wp-login.php accessible à tous ces pirates peut donc surcharger votre compte d’hébergement et générer des lenteurs sur votre site Web.

Il est donc indispensable, dès que vous installez un site WordPress, de déplacer votre page wp-login.php vers une URL plus difficile à deviner pour les robots.

Pour se faire, nous vous recommandons l’utilisation du plugin Change wp-admin login.

Installez-le et rendez-vous dans Réglages > Permaliens pour personnaliser votre URL de login.

– Vérifier vos scripts de sauvegarde

Les plugins de Backups WordPress se chargent de compresser l’ensemble de votre site dans une archive (.zip) avant d’envoyer vos sauvegardes dans le cloud (Dropbox, Google Drive, Amazon S3, etc).

Les sauvegardes via un plugin WP sont très consommatrices de ressources.

Certains hébergeurs disposent d’une liste de plugins WordPress interdits sur leur infrastructure, où figure en premières positions, les meilleurs plugins de Sauvegarde WP.

En effet, par définition, ces scripts de sauvegarde sollicitent beaucoup le Processeur CPU et la Mémoire RAM du Serveur Web, à tel point que certains hébergeurs interdisent officiellement (ou officieusement 😉) leur utilisation, allant même parfois jusqu’à désactiver l’hébergement du client si le script de backup consomme trop de ressources.

Bien sûr, chez EasyHoster, nous n’interdisons aucun plugin et préférons assister nos utilisateurs pour configurer leur plugin de sauvegarde de façon optimale. De plus, nous proposons aux clients qui le souhaitent de souscrire à des backups complémentaires et indépendants, en passant par notre partenaire CodeGuard.

CodeGuard offre une technologie de sauvegarde de fichiers inédite.

Sa méthode d’aspiration incrémentielle des fichiers via SFTP offre une consommation de ressources très réduite par rapport aux méthodes utilisées par les plugins WordPress de backup tel que UpdraftPlus.

Cependant, si vous ne pouvez vous passer d’un tel plugin, afin de réaliser vos propres backups autonomes sur votre hébergement mutualisé, nous recommandons de régler les backups des Bases de données MySQL sur Toutes les 24h, et les backups de Fichiers sur Tous les 7 jours. Cela est tout à fait possible via un plugin tel que UpdraftPlus (que nous aimons beaucoup), et de tels délais de sauvegarde périodique ne devraient pas alerter votre hébergeur sur votre consommation de ressources serveur.

– Munissez-vous d’un bon pare-feu

L’idéal serait de choisir un Hébergeur Web avec plusieurs dispositifs de protection contre les attaques Brute Force et les attaques DDoS.

La plupart des solutions d’hébergement cPanel devraient au moins disposer de cPHulk et CSF (ConfigServer Security & Firewall), ainsi que d’un performant Anti-DDoS, installé au cœur des installations réseau, avec un large excédant de Bande passante et un datacenter équipé des solutions logicielles adéquates.

Votre fournisseur d’Hébergement Web est le mieux placé pour vous offrir de bonnes protections contre les attaques.

Un Hébergeur Premium (comme EasyHoster 😇) pourrait aussi, en complément, vous placer sous la protection d’un Firewall Premium tel que Imunify360 (à ne pas confondre avec ImunifyAV, le logiciel antimalware gratuit).

Ces milliers de requêtes bloquées chaque jour seront autant de ressources économisées dont pourront profiter vos visiteurs légitimes.

Si votre hébergeur ne dispose pas d’un tel niveau de protection, il serait très utile pour vous de faire appel à des services tiers, comme ceux des plugins gratuits Wordfence et Sucuri.

Concernant Wordfence, pensez à aller jusqu’au bout de la configuration du WAF (Firewall logiciel gratuit de Wordfence).

Concernant Sucuri, ce dernier dispose aussi d’un Firewall Premium équivalent à Imunify360, mais très coûteux.

Donc, une dernière alternative pourrait aussi être de cacher votre site WordPress derrière Cloudflare. Ce dernier pourrait également bien assurer votre protection, en espérant que celui-ci n’altère pas le fonctionnement de votre site (voir ci-dessous, le point sur Cloudflare).

– HTTP/2+

Assurez-vous que votre serveur Web (ou votre hébergeur mutualisé) est bien configuré pour utiliser au moins le protocole HTTP/2, afin d’utiliser des requêtes de téléchargement simultanées, et donc réduire le délai d’attente lors du chargement des pages Web.

Si votre hébergement utilise des serveurs LiteSpeed, il se peut que votre hébergement Web soit d’ores et déjà compatible HTTP/3, vérifiez auprès de votre hébergeur !

– PHP 8+

Depuis mars 2022, nous considérons que la majorité des sites WordPress devraient être compatibles avec la version 8 de PHP. Cette nouvelle version apporte son lot d’améliorations au niveau des performances. Donc, pensez à tester votre site WordPress sous PHP 8.

– Interface PHP (mod_lsapi ou PHP-FPM)

Sur serveur Apache, vérifiez que vous utilisez une interface PHP performante comme LSAPI ou PHP-FPM. Autrement dit, évitez les anciens PHP Handlers tels que CGI, FastCGI, suPHP, etc.

Si vous ignorez comment trouver cette information, contactez votre hébergeur.

– Cache côté serveur

Assurez-vous d’avoir activé le dispositif de cache côté serveur adapté à votre situation.

Chez EasyHoster, tous nos clients bénéficient de OPcache, activé par défaut sur nos hébergements, car c’est la solution offrant les meilleures performances et le plus haut niveau de compatibilité avec WordPress.

Les utilisateurs du plugin W3 Total Cache pourront aussi tester Memcached et choisir le moteur de cache offrant les meilleurs résultats.

Chez les hébergeurs concurrents, vous pourrez retrouver d’autres options de mise en cache côté serveur telles que Varnish ou LSCache. Mais pour cette dernière option, avant de vous laisser tenter définitivement par l’utilisation du plugin LiteSpeed Cache, assurez-vous qu’il vous offre de meilleures performances que WP Rocket.

– Brotli

Comme nous l’avons abordé ci-dessus dans le chapitre sur KeyCDN, il serait utile de basculer sur un hébergement compatible Brotli, la nouvelle méthode de compression des fichiers alternative à Gzip ! Vous pouvez vérifier que votre hébergeur est compatible Brotli en suivant le lien précédent.

– Configurer Gzip

Lorsque vous recevez votre Hébergement cPanel, il peut être judicieux d’immédiatement activer Gzip sur un maximum de types de fichier (MIME), là où cela est pertinent, comme ceux de cette liste à copier-coller dans cPanel > Logiciel > Optimiser le site Web :

text/html text/plain text/xml text/css text/javascript application/javascript application/xhtml+xml application/xml application/rss+xml application/atom_xml application/x-javascript application/x-httpd-php application/x-httpd-fastphp application/x-httpd-eruby image/svg+xml

Copiez-collez la liste des fichiers à compresser via Gzip dans le champ « Types MIME spécifiés » (illustré ci-dessus).

– MariaDB 10.5 (optimisé)

Même si vous avez parfaitement configuré votre plugin de cache et votre thème Divi, si votre Serveur MySQL n’est pas à jour et n’est pas bien optimisé, vous ne pourrez jamais obtenir de bonnes performances.

Vérifiez donc auprès de votre hébergeur que vous êtes actuellement hébergé sur la dernière version de MariaDB, le nouveau moteur MySQL.

Ensuite, vérifiez les tables MySQL de vos bases de données, afin de les optimiser (optimize table via PhpMyAdmin).

Enfin, détectez les éventuelles tables MySQL obèses, qui seraient surchargées d’entrées de données inutiles. Ce problème est plus fréquent qu’il n’y parait avec WordPress : nombreuses Révisions d’articles WP, plugins qui stockent des logs en base de données de manière incontrôlée et sans limite, etc.

– Augmenter la mémoire (RAM)

Cette optimisation est utile à tout site WordPress qui prend de l’ampleur en devenant plus important qu’un simple “site vitrine”. Par exemple, c’est le cas des boutiques WooCommerce multilingues avec WPML, qui ont besoin de plus de mémoire RAM sous le capot.

Il existe 2 zones de configuration où il est important d’augmenter la Mémoire (RAM) allouée à votre application Web :

1. Dans PHP :
   depuis votre compte cPanel ou via les fichiers .htaccess et php.ini
2. Dans WordPress :
   depuis le fichier wp-config.php (voir instructions via le lien ci-dessous)

Et voilà !

Il faut bien tout cela pour optimiser Divi 😁 L’ensemble de ces optimisations mises bout à bout devrait faire une belle différence sur les délais de chargement de votre site.

Concrètement, voici ce que cela donne pour EasyHoster.com, le site que vous êtes en train de consulter.

Encore une fois, bravo !

Vous venez d’économiser des mois de tests pour l’optimisation de WordPress sur votre hébergement cPanel 😉

Comment accélérer WordPress et Divi pour obtenir un score de 99/100 sur Google PageSpeed Insights ?

Optimisation avancée pour le référencement SEO

En complément de toutes les optimisations avancées que nous avons vues aujourd’hui pour Divi, WP Rocket, KeyCDN et le LazyLoad du plugin Smush, vous pouvez peut-être aller encore plus loin en utilisant Cloudflare, en tant que CDN et dispositif d’optimisation frontal des performances.

En effet, même les plus grands utilisent Cloudflare !

Si nous avons choisi de terminer cet article d’optimisation de Divi via WP Rocket, en abordant Cloudflare, cela n’est pas par hasard !

Vous allez comprendre… 😉

Comme vous pouvez le voir sur la capture d’écran ci-dessous, le site officiel de WP Rocket bénéficie d’un score presque parfait sur Google PageSpeed Insights.

Sauf erreur de notre part, le site de WP Rocket est hébergé sur un excellent serveur dédié Bare Metal logé confortablement dans un Datacenter OVHCloud.

Mais nous avons tout de même voulu creuser un peu plus loin en faisant un NS Lookup du nom de domaine wp-rocket.me…

Dans les faits, au moment de nos recherches, ce site se retrouvait “caché” (dans les deux sens du terme), derrière les serveurs de Cloudflare…

Il serait intéressant de voir que WP Rocket (entreprise experte en performances Web) aurait choisi de tirer profit de certains services complémentaires que seul Cloudflare semble pouvoir offrir ?

Cloudflare offre un lot de services qu’on trouve difficilement ailleurs

Bien sûr, Cloudflare propose tous les services d’un Réseau de diffusion de contenu (CDN) tel que KeyCDN ou même RocketCDN, le service de CDN de WP Rocket.

Mais Cloudflare va plus loin, puisqu’il offre aussi certaines optimisations de performances avancées similaires à celles de WP Rocket par exemple.

L’avantage de Cloudflare, c’est que ces optimisations sont réalisées de façon frontale et servies directement par les serveurs CDN de Cloudflare, au lieu d’être mises en cache localement, sur le serveur mutualisé de votre Hébergeur Web.

Cloudflare va au-delà du CDN

Voici certains services complémentaires offerts par Cloudflare :

• Hébergement de zones DNS premium.
• Mise en cache de pages et ressources statiques.
• Livraison de ressources compressées par Brotli.
• Préchargement ”Early Hints” des ressources liées à une page.
• Compression, minification et concaténation des ressources HTML, CSS et JS…
• Chargement asynchrone de certaines ressources JS & CSS via le Cloudflare’s Rocket Loader.
• Pare-feu / Firewall bloquant de nombreuses attaques (injections SQL, Brute force, DDoS, etc) tout en économisant les ressources du compte d’hébergement Web.
• Redimensionnement, compression et/ou conversion d’images optimisées WebP… (offre Pro).

Et bien sûr, Cloudflare propose la livraison des ressources depuis un réseau de serveurs proches géographiquement de la localisation du visiteur (détectée sur base de son adresse IP)… ou autrement dit, Cloudflare fait aussi office de CDN, quand même 🙂

La petite différence étant que Cloudflare livre tout le site Internet depuis ses serveurs CDN, et pas seulement les ressources (assets JS, CSS, images, etc).

L’effet CDN est donc tout à fait frontal.

Quand utiliser Cloudflare pour accélérer WordPress ?

Si vous n’êtes pas satisfait de vos “scores” de performances avec nos réglages pour Divi, WP Rocket et KeyCDN, ou si vous n’arrivez pas à obtenir de bons résultats chez votre hébergeur actuel (car oui, votre hébergeur joue aussi un rôle sur vos performances), vous pourriez prendre la matinée de dimanche pour faire quelques tests et donner sa chance à Cloudflare 🙂

Cependant, quelques inconvénients sont à prévoir…

L’Uptime de Cloudflare

En choisissant d’utiliser Cloudflare, la disponibilité (Uptime) de votre site ne dépendra plus uniquement de votre Hébergeur Web, mais aussi de Cloudflare.

Autrement dit, si votre site tombe en panne, il sera plus difficile de déterminer si le responsable est Cloudflare ou votre Hébergeur Web.

Il faut savoir que Cloudflare essuie régulièrement des perturbations, en particulier sur son réseau gratuit (cf. CloudflareStatus.com).

Cloudflare peut altérer votre site (casser JavaScript, etc)

Effectivement, il ne faut pas oublier également que, même si les optimisations de performance du Rocket Loader de Cloudflare peuvent s’avérer redoutablement efficaces (car frontales), elles peuvent aussi “casser” certaines fonctionnalités de votre site, comme vos formulaires de contact.

De plus, l’adresse IP du visiteur n’est pas toujours détectable derrière les serveurs CDN de Cloudflare, donc, pensez-y si vous avez des scripts ou des plugins qui vérifient l’IP du visiteur final pour fonctionner. Par exemple, si vous bannissez l’IP d’un visiteur de votre forum de discussion, pour cause de spam, il est probable que vous soyez en train de blacklister complètement une adresse IP du réseau Cloudflare, ce qui risque de créer de gros problèmes d’accès à votre site.

C’est pour toutes ces raisons que de notre côté, nous évitons d’utiliser Cloudflare sur tous les sites un peu “complexes” ou “sensibles”, tels que les boutiques eCommerce par exemple, ou les sites qui génèrent beaucoup de trafic.

Cloudflare n’est pas fait pour tout le monde

Tous les sites et tous les utilisateurs ne peuvent pas nécessairement passer sur Cloudflare.

Pour vous assurer d’être compatible, il conviendra donc de faire vos propres tests.

Vous pourrez enfin comparer vos résultats et choisir entre Cloudflare, ou une solution plus simple, avec un CDN plus classique comme RocketCDN ou KeyCDN, configurés finement en synergie avec WP Rocket et Divi, comme nous l’avons vu en détail dans cet article.

Finalement, gardez à l’esprit que…

Le plus important reste l’utilisateur !

Lorsque vous optimisez votre site, rappelez-vous que la visite de votre site doit être confortable pour l’utilisateur final.

Trop d’optimisation tue l’optimisation…

Certaines options de performance peuvent détériorer votre site, altérer certaines fonctionnalités (JavaScript par exemple), ou créer des flash (CLS).

L’expérience utilisateur sur votre site sera toujours plus importante qu’un score ou un note délivrée automatiquement par un outil en ligne comme PageSpeed ou GTmetrix.

Sachez parfois oublier les outils et tester votre site pour du vrai, en condition réelle, depuis tous vos périphériques (mobile, bureau), et toutes vos connexions Internet (Wi-Fi, 3G…).

Si l’expérience est bonne en test réel, elle plaira également à Google qui vous récompensera avec un meilleur référencement sur son moteur de recherche.

Continuer votre lecture avec plus d’astuces WordPress

Pour aller plus loin, découvrez cet article indispensable où nous partageons les 50 meilleurs plugins WordPress que nous conseillons aux clients EasyHoster.

Le Top 52 des meilleurs plugins WordPress indispensables à connaître en 2024