Divi performances : améliorez le temps de chargement de votre site Divi
Divi a longtemps eu la réputation d'être lourd. Divi 4 enregistrait les pages sous forme de shortcodes et chargeait beaucoup de code ; Divi 5, mise à jour gratuite pour tous les membres, adopte un format de stockage en blocs proche de celui de l'éditeur de WordPress, plus rapide à traiter. Mais la vitesse d'un site dépend surtout de l'hébergement, des images, du cache et du nombre d'extensions. Voici, dans l'ordre, ce qui accélère vraiment un site Divi.
Mesurer avant de modifier
Avant de changer quoi que ce soit, mesurez. PageSpeed Insights, l'outil gratuit de Google, note la page sur mobile et sur ordinateur et affiche les Core Web Vitals, les indicateurs de vitesse et de stabilité que Google prend en compte. GTmetrix détaille le chargement fichier par fichier.
Testez plusieurs pages (l'accueil, une page de contenu, une page avec formulaire), notez les résultats, puis refaites le test après chaque modification : vous saurez ce qui a vraiment servi.
1. L'hébergement
Comme le rappelle la page Performances WordPress, le facteur numéro 1 des performances d'un site WordPress est l'hébergement. Aucun réglage ne compense un serveur saturé ou une version de PHP dépassée. Vérifiez que votre hébergement respecte les recommandations d'Elegant Themes (PHP récent, au moins 128 Mo de mémoire PHP) : tout est détaillé dans quel hébergement pour Divi.
2. Les options de performance de Divi
Divi regroupe ses réglages de vitesse dans Divi > Options du thème > Général > Performance. Les principaux, sous leur nom anglais tel qu'il apparaît dans la documentation d'Elegant Themes :
Option | Effet |
|---|---|
Dynamic Module Framework | charge seulement le code des modules utilisés sur la page |
Dynamic CSS | génère seulement le CSS nécessaire à la page |
Dynamic Icons | charge les icônes à la demande au lieu de la police complète |
Critical CSS | charge d'abord le CSS du haut de page et diffère le reste |
Dynamic JavaScript Libraries | charge les bibliothèques JavaScript seulement si un module en a besoin |
Improve Google Fonts Loading | met en cache les polices Google et les charge plus efficacement |
Defer jQuery And jQuery Migrate | reporte le chargement de jQuery quand c'est possible |
Defer Additional Third-Party Scripts | reporte les scripts des autres extensions et thèmes |
Elegant Themes conseille de garder les réglages par défaut, sauf problème d'affichage ou conflit avec une extension de cache. La dernière option est à manier avec précaution : elle peut provoquer des erreurs JavaScript. Si des fonctions cessent de marcher après avoir différé jQuery, l'option Enqueue jQuery Compatibility Script peut corriger les erreurs. Pour comprendre ces erreurs, voir notre page JavaScript.
3. Une extension de cache
Divi optimise le code qu'il envoie, mais ne met pas les pages en cache. Sans cache, WordPress reconstruit chaque page à chaque visite. Deux solutions :
le cache de l'hébergeur, si votre hébergement en fournit un (c'est le cas de la plupart des hébergeurs spécialisés WordPress) ;
une extension de cache, comme WP Rocket ou FlyingPress.
N'empilez pas plusieurs extensions de cache, et videz le cache après chaque modification importante dans Divi. Si vous activez dans l'extension des optimisations que Divi fait déjà (CSS critique, report du JavaScript), testez le site : en cas d'affichage cassé, désactivez l'une des deux. Comparatif dans meilleurs plugins de cache et de performance.
4. Les images
Les images sont souvent le plus gros poids d'une page Divi : grandes images de fond de section, diaporamas, galeries. Les bons réflexes :
redimensionnez les images avant de les envoyer : une image de fond affichée sur toute la largeur d'un écran d'ordinateur a rarement besoin de dépasser 2 000 pixels de large ;
utilisez un format moderne comme le WebP, que WordPress accepte nativement ;
compressez-les, avec un outil en ligne ou une extension d'optimisation d'images.
Formats et réglages : les formats d'images sous WordPress.
5. Moins d'extensions et de scripts tiers
Chaque extension et chaque service externe (chat, statistiques, vidéos, réseaux sociaux) ajoute du code à charger. Divi fait déjà beaucoup de choses : formulaires de contact, diaporamas, onglets, compteurs. Avant d'installer une extension, vérifiez qu'un module Divi ne fait pas déjà le travail, et supprimez les extensions que vous n'utilisez plus.
Quand le contenu bouge au chargement
Un menu qui se décale, un bloc qui apparaît sans mise en forme puis se remet en place, un titre qui passe de deux lignes à une : ces mouvements gênent la lecture, et Google les mesure dans les Core Web Vitals sous le nom de CLS (Cumulative Layout Shift). PageSpeed Insights affiche ce score et, dans son diagnostic, les éléments qui bougent.
Plusieurs problèmes différents donnent ce même symptôme. Identifiez d'abord le vôtre : une solution prévue pour un autre cas ne changera rien, ou ajoutera un défaut.
Le contenu s'affiche sans mise en forme, puis se met en place
C'est le « flash de contenu sans style » (FOUC en anglais, « Divi flashing content » dans les forums). Pendant une fraction de seconde, la page s'affiche avec les styles par défaut du navigateur, le temps que le CSS arrive. Pour bien le voir, ouvrez les outils de développement (touche F12), choisissez un débit lent dans l'onglet Réseau, puis rechargez la page.
Pistes à tester une par une, en mesurant après chacune :
désactiver l'option Critical CSS (Divi > Options du thème > Général > Performance) : plusieurs utilisateurs indiquent qu'elle corrige le décalage chez eux ;
activer la génération du fichier CSS statique (Static CSS File Generation) ;
en dernier recours, ajouter un script qui masque la page tant que le HTML n'est pas entièrement chargé (solution publiée notamment par Mark Hendriksen). Il supprime le flash, mais la page reste blanche plus longtemps, et des utilisateurs signalent des effets secondaires : en-tête sticky qui ne reste plus collé, Visual Builder qui ne se charge plus, sliders pleine largeur mal dimensionnés.
L'en-tête « saute » au chargement
Avec l'en-tête classique de Divi 4 réglé dans le Customizer, Divi ajoute en JavaScript un espace en haut de la page (un padding-top sur #page-container) pour laisser la place au menu fixe. Le navigateur affiche d'abord la page sans cet espace, puis le contenu descend quand le script s'exécute.
Pour vérifier si c'est votre cas, inspectez #page-container : si aucun padding-top n'y est ajouté, le problème vient d'ailleurs (voir le cas précédent). Sinon, relevez la valeur et mettez-la directement dans votre CSS :
@media (min-width: 981px) {
#page-container { padding-top: 80px; }
}Remplacez 80px par la valeur relevée sur votre site. Le navigateur applique votre CSS dès le début, puis la valeur ajoutée par le script prend le relais. Comme les deux sont identiques, plus rien ne bouge.
Un titre change de nombre de lignes quand la police arrive
Tant que la police du site n'est pas chargée, le navigateur affiche le texte avec une police de remplacement, plus large ou plus étroite. Un titre peut tenir sur deux lignes avec cette police, puis sur une seule avec la bonne : tout ce qui suit remonte d'une ligne.
Pour trouver une taille qui convient aux deux polices, ouvrez l'inspecteur et remplacez temporairement la police du titre par une police système comme Arial (font-family: Arial). Ajustez ensuite la taille (font-size) jusqu'à ce que le titre tienne sur une ligne avec les deux polices, et reportez cette taille dans les réglages du module. Vérifiez sur ordinateur portable, tablette et mobile.
Pas d'animation en haut de page
Les animations de Divi (onglet Animation des modules) font apparaître les éléments après le chargement. Sur un titre ou une image visibles sans faire défiler, elles compliquent le diagnostic et peuvent retarder l'affichage du contenu principal. Gardez-les pour les éléments plus bas dans la page.
Quand c'est le constructeur qui rame
Si le Visual Builder tourne dans le vide, affiche d'anciens réglages ou ne charge plus, essayez dans cet ordre :
Videz les caches : celui de l'extension de cache ou de l'hébergeur, puis celui du navigateur.
Videz le CSS statique de Divi : dans Divi > Options du thème > Constructeur > Avancé (emplacement de Divi 4), cliquez sur le bouton « Clear » de l'option « Static CSS File Generation ». Elegant Themes recommande cette étape quand la page diffère entre le constructeur et le site en ligne.
Videz les données locales du navigateur : le constructeur de Divi 4 conserve des données dans le stockage local (localStorage) du navigateur. Ouvrez la console (touche F12, onglet Console) sur une page de votre site, tapez
localStorage.clear()et validez : seules les données de ce site sont effacées. Un ancien extrait de code (2018) ajoutait un bouton « Clear Local Storage » dans le constructeur ; il n'est plus maintenu.Activez le mode sans échec de Divi (Safe Mode), dans Divi > Support Center : il désactive temporairement les extensions tierces, le thème enfant et les scripts personnalisés, pour vous seul (vos visiteurs ne voient aucune différence). Si le problème disparaît, réactivez les extensions une à une pour trouver la coupable.
Vérifiez la mémoire PHP : un constructeur qui plante sur les pages longues manque souvent de mémoire. Quand le constructeur ne se charge pas, Elegant Themes recommande de porter
memory_limità 256M. Voir augmenter la limite mémoire de PHP.
Un bouton pour vider le stockage local
Le stockage local est propre à chaque adresse de site (protocole et nom de domaine exacts, avec ou sans « www ») : le vider depuis une page de votre site suffit pour tout le site, administration comprise, si elle utilise la même adresse.
Si vous rencontrez souvent le problème, ce code ajoute un lien « Vider le stockage local » dans la barre d'administration de WordPress, visible pour les utilisateurs qui peuvent modifier des contenus. Il n'utilise que des fonctions documentées de WordPress (le crochet admin_bar_menu et la méthode add_node(), dont l'option onclick est prévue par la documentation officielle), et ne dépend ni de jQuery ni de la version de Divi. Le clic n'envoie rien au serveur : tout se passe dans votre navigateur.
<?php
// Bouton « Vider le stockage local » dans la barre d'administration (ideoforge.com)
add_action( 'admin_bar_menu', function ( $wp_admin_bar ) {
if ( ! current_user_can( 'edit_posts' ) ) {
return;
}
$wp_admin_bar->add_node( array(
'id' => 'ideo-vider-stockage-local',
'title' => 'Vider le stockage local',
'href' => '#',
'meta' => array(
'onclick' => 'localStorage.clear(); alert("Stockage local vidé. Rechargez la page."); return false;',
),
) );
}, 100 );Collez-le dans le fichier functions.php d'un thème enfant de Divi (sans la première ligne <?php si le fichier en contient déjà une), ou dans un plugin d'extraits de code comme WPCode. Ne le mettez pas dans le functions.php de Divi lui-même : il serait effacé à la prochaine mise à jour.
Divi 5 est-il plus rapide que Divi 4 ?
Elegant Themes présente Divi 5 comme plus rapide, pour le constructeur comme pour les visiteurs, grâce à son nouveau format de stockage sans shortcodes. Le gain réel dépend de votre site : mesurez avant et après la migration.
Divi est-il mauvais pour le référencement à cause de sa vitesse ?
Non, si le site est bien réglé : hébergement correct, cache, images optimisées. La vitesse compte pour Google, mais elle dépend bien plus de ces réglages que du thème lui-même.
Commentaires
Pas encore de commentaire. Soyez le premier !