C’est officiel et vous étiez nombreux à l’attendre…
Une mise à jour MAJEURE des performances du thème Divi vient de sortir !
a retravaillé le cœur de Divi, sous toutes ses coutures, pour rendre ses fondations extrêmement fiables. La version 4.10 vous permet enfin d’utiliser plus de fonctionnalités et de modules Divi, sans que cela ne surcharge votre site Web !
🏷 Bénéficier de 10% de réduction sur Divi en suivant notre lien d’affiliation :
💡 Résumé du contenu de cet article :
| ⭐️ Thème Divi, Version 4.10 | Présente une série d’améliorations de performance, y compris la réduction de la taille des scripts CSS et JavaScript, la suppression des ressources inutiles, mise en cache des polices d’écriture de Google, suppression des emojis de WordPress, chargement différé de la feuille de style de Gutenberg, chargement reporté de jQuery, intégration inline de la feuille de style CSS. |
| 🚀 Performance de Divi comparé à d’autres thèmes | Divi (avec un score Google PageSpeed de 99 pour mobile et 100 pour ordinateur) est plus rapide que Gutenberg + Astra, Beaver Builder + thème Kadence, Elementor + Hello Elementor, Avada + Fusion Builder. |
| 🧩 Compatibilité du thème Divi | Divi est compatible avec PHP 7.4, mais il est recommandé d’attendre avant de passer à PHP 8 en raison de la compatibilité des plugins tiers. |
| ✅ Thème Extra | A également bénéficié des améliorations de performance de Divi 4.10. |
Divi n’est plus seulement l’un des meilleurs thèmes, mais aussi l’un des plus rapides !
- 1 Divi n’est plus seulement l’un des meilleurs thèmes, mais aussi l’un des plus rapides !
- 2 Tests de performance de la nouvelle version du thème Divi sur PageSpeed Insights et GTmetrix
- 3 Divi élimine les surcharges intelligemment
- 4 Présentation du “Critical CSS” de Divi 4.10
- 5 Les nouvelles options d’accélération du temps de chargement de Divi 4.10
- 6 Comparatif de Divi avec les thèmes et page builders concurrents
- 7 Test de performances de Divi 4.10 réalisé par EasyHoster
- 8 La magie de Divi 4.10
- 9 FAQ sur les performances de la nouvelle version de Divi
Si vous souhaitez découvrir toutes les fonctionnalités de Divi, c’est par ici :
Vous vous demandez comment l’équipe de développeurs a transformé Divi en un thème super léger ?
C’est très simple assez complexe !
Il leur a été nécessaire de réorganiser tout leur framework, au cœur de PHP pour le découper en plusieurs modules.
À présent, ces différents blocs de fonctionnalité se chargent et sont traités uniquement “sur demande” et ce, en fonction des modules et des fonctionnalités que vous utilisez réellement sur votre site, et sur chaque page spécifique.
Ils ont rendu Divi bien plus intelligent !
Le thème est maintenant capable :
- d’identifier automatiquement les scripts CSS importants
- de différer le traitement des scripts secondaires
- et de minifier les scripts CSS du , notamment, en combinant les styles en double
Ils ont également introduit une série de nouvelles options qui améliorent automatiquement les performances en mettant “en cache” et en “différant” les requêtes pouvant créer un ralentissement lors de l’affichage de vos contenus. Tout cela, bien sûr, en supprimant aussi toutes les ressources inutiles à la volée.
Une image vaut mille mots, donc, regardons quelques résultats…
Tests de performance de la nouvelle version du thème Divi sur PageSpeed Insights et GTmetrix
À présent, Divi surpasse la concurrence sur la vitesse !
Sur son blog officiel, qu’ils ont pu obtenir grâce à leurs optimisations.
Nous vous partageons les résultats ci-dessous.
Restez branchés !
Un peu plus bas, nous verrons un comparatif de performance mettant en compétition…
- Le thème Divi + le Divi Builder
- Le thème Astra + Gutenberg
- Le thème Kadence + le Beaver Builder
- Hello Elementor + Elementor
- Le Thème Avada + le Fusion Builder
Mais commençons par analyser quelques résultats obtenus pour Divi suite à la mise à jour de son thème en version 4.10.
Le thème Divi, du poids lourd au poids plume
Pour effectuer ses tests, Elegant Themes a conçu ce site :
https://divi.website/divi/
Dont voici un aperçu :
Ce site de test a été construit avec la nouvelle version de Divi. Il bénéficie donc d’une réduction de la taille des scripts CSS de 94%.
Tous les processus pouvant bloquer et/ou ralentir l’affichage des contenus ont été complètement éliminés.
La taille des scripts JavaScript de Divi a été réduite de moitié.
Obtenir un score de 100% sur PageSpeed Insight, avec le thème Divi, aujourd’hui, c’est possible !
Lisez la suite pour savoir comment la nouvelle version de Divi supprime les surcharges et les ralentissements.
Comment obtenir des résultats de vitesse presque parfaits, dès l’installation de Divi ?
Sur leur site de test, avec la nouvelle mise à jour de Divi, il a été facile pour Elegant Themes de créer un site Web obtenant un score de 100 sur Google PageSpeed, pour la version ordinateur et un score de 99 pour la version mobile.
De même, le site test obtient une note de 100% sur GTmetrix en utilisant une installation WordPress standard combinée à un CDN, sans plugin de performance supplémentaire !
Comme indiqué plus haut, ces résultats extraordinaires s’expliquent par le fait que les nouvelles fonctionnalités d’accélération de Divi suppriment toutes les requêtes inutiles non-essentielles qui ralentissent l’affichage des contenus. Ce qui permet ainsi à vos pages de s’afficher immédiatement, sans détériorer leur design ou leurs fonctionnalités.
Maintenant, expliquons comment cette nouvelle version de Divi permet de se créer facilement un site Web ultra rapide.
Divi élimine les surcharges intelligemment
Comme nous venons de le démontrer, la nouvelle version de Divi n’est plus responsable des ralentissements de votre site et vous offre le meilleur que vous puissiez attendre d’un thème WordPress :
- la puissance d’un constructeur de pages ultra-polyvalent
- avec la réactivité d’un thème léger au chargement
Voyons maintenant concrètement ce que Divi 4.10 a sous le capot !
Le nouveau framework PHP dynamique de Divi 4.10
Le nouveau Dynamic Framework de Divi adopte une logique où il ne traite que les requêtes nécessaires pour afficher uniquement les modules et les fonctionnalités que vous utilisez réellement sur chaque page. Tout le reste est mis de côté. Si votre page n’utilise que 5 des 50+ modules de Divi, Divi ne traite que les fonctions nécessaires à ces 5 modules et il ignore tout le reste.
Si ces 5 modules n’utilisent pas certaines des nombreuses fonctionnalités de Divi comme les Effets de Défilement, les Animations, le Sticky System, les Options de Bordure, etc. Dans ce cas, Divi ne charge pas ces fonctionnalités. C’est aussi simple que cela.
Divi est maintenant beaucoup plus léger, car il supprime tout ce que vous n’utilisez pas, et cela, à la volée, c’est-à-dire de manière dynamique. En d’autres termes, tout ce qui pourrait être considéré comme superflu a été supprimé en arrière-plan.
Le nouveau CSS dynamique de Divi 4.10
Elegant Themes a appliqué la même logique anti-surcharge aux feuilles de style CSS de Divi. Ils ont pris le gros fichier CSS de Divi et l’ont divisé en des centaines de petits fichiers. Sur chaque page, ces éléments de CSS sont combinés pour former une feuille de style unique qui contient uniquement les éléments nécessaires pour styliser, au cas par cas, chaque page en fonction des modules, des fonctionnalités et des options de mise en page que vous utilisez sur chacune d’elles.
Le résultat de cette optimisation est une diminution spectaculaire de la taille du fichier CSS de chaque page que vous créez avec Divi. Il n’y a plus de surcharge, car les lignes de CSS inutilisées ne sont plus chargées.
Sur le site Web de test, la taille du fichier CSS de Divi est passée de 860 Ko à seulement 54 Ko ! 😮
Les nouveaux styles CSS intelligents de Divi 4.10
Le CSS généré par le , c’est-dire, le constructeur de page de Divi, quant à lui, a également été optimisé pour supprimer les styles en double et diminuer la taille globale du fichier.
Désormais, Divi identifie les styles en double et combine les sélecteurs CSS dans une seule liste.
En utilisant les préréglages de Divi (les “presets”), vous pouvez créer des pages très légères, car chaque module utilisant un préréglage n’a pas besoin d’avoir son propre bloc de styles unique et individuel. Mais il peut, à la place, partager ses styles avec d’autres éléments du “preset ».
Le nouveau JavaScript optimisé de Divi 4.10
Elegant Themes a également modularisé une grande partie du fichier JavaScript de Divi, permettant au thème de charger chaque bibliothèque JavaScript nécessaire, à la demande, uniquement lorsque cela est utile et exigé par les modules spécifiques que vous utilisez sur vos pages.
Les développeurs de Divi ont également désactivé certaines fonctionnalités, telles que le Sticky System et les animations. En effet, ces éléments ne se chargent à présent, que si cela est nécessaire.
Elegant Themes a donc pu supprimer de gros blocs de code inutiles pour, au final, réduire de moitié la taille du fichier JavaScript de base de Divi.
Présentation du “Critical CSS” de Divi 4.10
Il s’agit ici d’une innovation majeure !
Le nouveau système de Critical CSS de Divi identifie le CSS nécessaire pour styliser le contenu au-dessus de la ligne de flottaison de vos pages (donc sans défilement), et il reporte l’affichage de tout le reste dans un second temps.
Effectivement, seuls les styles CSS des premiers éléments visibles ne sont nécessaires au début du processus de chargement de la page.
Effectuer le rendu d’une page en chargeant toute une série d’éléments bloquants et inutiles, cela joue un rôle très important dans le ralentissement de la vitesse de chargement d’une page complète. La nouvelle capacité de Divi à séparer automatiquement les styles CSS prioritaires et secondaires lui confère à présent un énorme avantage par rapport à de nombreux autres thèmes et constructeurs de pages sous WordPress.
Une fois que Divi a fini de traiter son fichier CSS, seule une petite partie du CSS (dont le poids total est à présent minimal) est réellement pris en compte dans le temps de chargement initial du site Web. Ce qui signifie que le contenu s’affiche immédiatement. C’est pourquoi maintenant, Google PageSpeed donne un score élevé aux sites Divi fraîchement créés.
Les nouvelles options d’accélération du temps de chargement de Divi 4.10
On ne cesse de le répéter… Elegant Themes a ajouté plusieurs options d’accélération au thème Divi, dans le but de supprimer les ressources inutiles et de différer les requêtes engendrant un ralentissement de l’affichage initial des pages.
Vous pensiez avoir tout vu, mais ce n’est pas tout…
La mise en cache des polices d’écriture de Google
Grâce à Divi, les polices d’écriture de Google sont désormais mises en cache et intégrées dans la balisedes pages. Cela supprime une requête pouvant ralentir l’affichage de la page et accélère le temps de chargement de celle-ci. Elegant Themes a également ajouté la possibilité de supprimer les fichiers de polices d’écriture n’étant plus officiellement supportés, afin de restreindre le chargement aux éléments réellement utiles.
La suppression des emoji de WordPress
Depuis de nombreuses années, WordPress comprenait un système d’emoji natif. Cependant, ce système n’est plus nécessaire en raison de la prise en charge native des emoji par les navigateurs Web modernes.
En fait, les emojis natifs des navigateurs sont bien mieux que les emoji de WordPress. Divi nous donne maintenant la possibilité de désactiver les emojis natifs de WordPress, ce qui évite le chargement d’éléments inutiles.
Le chargement en différé de la feuille de style de Gutenberg
Par défaut, Divi chargera désormais la feuille de style de Gutenberg de façon asynchrone (donc en “lazy load”) sur les pages où vous l’utilisez à la place du . Il se chargera toujours, juste au cas où, mais il ne ralentira plus le rendu de vos pages.
Les icônes dynamiques
Divi est désormais livré avec des sous-ensembles de Polices d’icônes qui sont chargés à la demande en fonction des modules et des fonctionnalités que vous utilisez et rien d’autre.
De base, cela fait passer la taille des icônes de Divi de 90 Ko à 6 Ko ! L’ensemble des icônes n’est chargé qu’en cas de besoin. Cette option est désactivée par défaut si vous utilisez un thème enfant ou un module Divi personnalisé.
Si vous utilisez un thème enfant ou un module Divi tiers utilisant le jeu complet d’icônes de Divi, cette option devrait alors rester désactivée.
Le chargement “reporté” du jQuery
Divi a maintenant déplacé jQuery en dehors de la balisede votre site et le chargera de manière asynchrone dans le pied de page lorsqu’il n’est pas nécessaire dans l’en-tête. Cela supprime une requête possiblement bloquante et accélère sensiblement le temps de chargement du site.
Si un script est mis en file d’attente dans l’en-tête, car il nécessite le chargement de jQuery, ce dernier sera replacé dans l’en-tête pour éviter les conflits.
Cette option peut être désactivée manuellement si elle pose problème sur votre site. De notre côté, sur le site EasyHoster.com, nous avons été contraints de la désactiver. Vous retrouverez le détail de notre configuration complète Divi + WP Rocket en suivant ce lien. Nous y levons le voile sur une méthode qui était jusqu’alors encore plus secrète que l’algorithme de Google 😀
La feuille de style CSS maintenant intégrée de façon “inline”
Lorsque le Dynamic CSS est activé, le feuille style.css de base de Divi est à présent minuscule, car le CSS est intégré dans le page Web elle même de façon in-line.
Le chargement des styles in-line supprime beaucoup de facteur bloquant et améliore ecnore le score Google PageSpeed. Lorsque les options Critical CSS, Dynamic CSS et in-line CSS sont activées, toutes les requêtes CSS bloquant le rendu du site sont supprimées. Depuis le temps qu’on attend ça…
Comparatif de Divi avec les thèmes et page builders concurrents
C’est le moment que vous attendiez tous !
Voici les résultats obtenus suite à ces tests sur la nouvelle version de Divi 4.10, comparée à Gutenberg + Astra, le Beaver Builder + le thème Kadence, Elementor + Hello Elementor et Avada + leur Fusion Builder intégré.
Quel thème et builder WordPress est le plus rapide ?
| Thème & builder | Vitesse | PageSpeed mobile | PageSpeed desktop |
| Divi Theme + Divi Builder | 320 ms | 99 | 100 |
| Gutenberg + Astra | 320 ms | 99 | 100 |
| Beaver Builder + Kadence | 400 ms | 99 | 100 |
| Elementor + Hello | 520 ms | 85 | 100 |
| Avada + Fusion Builder | 520 ms | 75 | 100 |
Notes sur la méthodologie utilisée pour ces tests :
Ces tests ont été effectués avec les dernières versions de chaque produits datant du 10 août 2021. Les pages ont été testées sur Google PageSpeed Insights. Chaque site Web a été testé 6 fois. Elegant Themes a pris les 5 meilleurs résultats pour chaque site, autorisant ainsi 1 résultat défaillant sur les 6.
Comme vous pouvez le voir, Elegant Themes a voulu s’assurer que Divi n’était pas seulement plus rapide qu’avant, mais aussi plus rapide que la concurrence !
Ils ont donc procédé à une comparaison objective de Divi avec les principales solutions concurrentes, afin de voir où se situait leur thème. Ils ont pris les constructeurs de pages WordPress les plus populaires et les ont associé à des thèmes WordPress populaires d’ores et déjà reconnus pour leurs bonnes performances.
Ils ont utilisé chaque combinaison pour créer un site Web identique, en veillant à rendre chaque site Web aussi efficace que possible et aussi rapide que possible en utilisant les options natives disponibles dans chaque constructeur de page et/ou chaque thème. Tous ces sites Web étaient hébergés sur le même WordPress multisites, chez , et disposaient tous du CDN Cloudflare.
Ils ont effectué leurs tests en comparant les 4 thèmes & builders cités ci-dessous à la nouvelle version de Divi. Les mini-sites ont été réalisés avec le même contenu (texte + images) avec un résultat graphique “au plus proche”.
Chaque lien ci-dessous vous dirige vers le site de test créé pour l’occasion :
- Le thème Astra avec l’éditeur de blocs Gutenberg et le plugin Ultimate Gutenberg Add-ons
- Le thème Kadence avec le Beaver Builder
- Le thème Hello Elementor avec le page builder Elementor
- Le thème Avada avec leur Fusion Builder
Ils ont donc effectué des tests sur ces sites à l’aide de Google PageSpeed pour voir les différences de score. Ils ont testé chaque site Web 6 fois et ont fait la moyenne des 5 meilleurs résultats obtenus, permettant ainsi qu’un des 6 tests soit « défaillant ». En effet, les résultats obtenus sur PageSpeed peuvent varier de façon aléatoire, puisqu’ils dépendent notamment de critères de type “réseau”, etc.
Bien sûr, ces résultats sont susceptibles de changer au fur et à mesure que ces thèmes et plugins sont mis à jour, mais à partir d’aujourd’hui, vous pouvez voir que Divi trône confortablement en haut de la liste dans toutes les catégories.
Avec un score Google PageSpeed de 99 pour mobile et 100 pour ordinateur, la vitesse de Divi est pratiquement au maximum des possibilités.
🏷 Bénéficier de 10% de réduction sur Divi en suivant notre lien d’affiliation :
Test de performances de Divi 4.10 réalisé par EasyHoster
De notre côté aussi, nous avons réalisé la mise à jour de notre thème Divi et nous avons effectué nos petits tests.
Pour rappel, voici les résultats que nous obtenions au mois de juillet, lorsque nous avons réalisé notre article sur les problèmes l’indexation Google, avec 18 astuces pour forcer l’indexation, avec le thème Divi 4.9.11 pour notre page de vente d’exemple dont le sujet est le “Dépannage WordPress” :
Notre score était de 85 sur la navigation desktop..
Suite au passage à Divi 4.10 et après avoir affiné nos réglages Divi + WP Rocket, nous sommes passé à un score Google PageSpeed de 94 ! Tout cela pour une très longue page de vente, que nous avons pas mal poussé dans les “effets” graphiques. Autrement dit, nous utilisons beaucoup de modules Divi.
Précisons que sur l’installation WordPress de EasyHoster.com, nous avons actuellement 27 plugins actifs. De même, nous avons tendance à privilégier les images de bonne qualité et l’expérience utilisateur, plutôt que la vitesse de chargement de nos pages de vente.
Ce score Google PageSpeed de 94 avec Divi nous comble de bonheur 😀
La magie de Divi 4.10
La magie de cette mise à jour, c’est qu’avec Divi, vous pouvez avoir le beurre et l’argent du beurre.
Bien que le scope de Divi soit très large et sa sélection de modules très complète, ce constructeur de site Web est maintenant léger grâce à sa philosophie anti-surcharge.
Bien sûr, plus vous utilisez de modules Divi, plus vous risquez de faire baisser votre score Google PageSpeed. Il en va de même pour le nombre de plugins que vous souhaitez installer sur votre site WordPress.
Retenons simplement que maintenant, Divi nous donne le pouvoir de choisir comment nous voulons l’utiliser et quelle vitesse de chargement doit avoir nos sites Internet.
Source et annonce officielle sur le site d’Elegant Themes :
FAQ sur les performances de la nouvelle version de Divi
Vous pouvez continuer à utiliser vos plugins de performance. Il est toujours très important de mettre en cache votre site Web et d’utiliser un CDN.
Ce que ces mises à jour accomplissent (élimination des surcharges potentielles de Divi) ne peut être accompli avec aucun plugin de performance. Elles sont donc importantes pour chaque site Divi et accéléreront chaque site, quels que soient les plugins de performance que vous utilisez.
Elegant Themes a également testé cette mise à jour de Divi avec les plugins de performance les plus populaires pour aider à identifier les conflits. Cependant, c’est toujours une bonne idée de tester les mises à jour sur un site de développement, avant de mettre à jour Divi sur votre site en production.
Elegant Themes a fait de son mieux pour tout tester la compatibilité de la mise à jour de Divi avec WP Rocket. Ils n’ont pour le moment identifié aucun problème de compatibilité avec WP Rocket. Cependant, c’est toujours une bonne idée de faire un backup de votre site Web avant la mise à jour de Divi et de tester les mises à jour sur un site en développement et non en production.
Si vous rencontrez des problèmes, vous pouvez toujours revenir à la version précédente de Divi ou vous pouvez désactiver temporairement les nouvelles fonctionnalités sous l’onglet Performance des options du thème Divi.
La mise à jour de Divi accélérera automatiquement tous les sites Web construits sur base du thème Divi, dès que vous aurez effectué la mise à jour de celui-ci. En cas de dysfonctionnement ou d’erreur dans votre console de développement, rendez-vous sous l’onglet Performance et désactivez chaque paramètre, les uns après les autres en testant votre site. Vous pouvez retrouver plus d’infos sur ces sujets dans notre guide de dépannage WordPress.
Il faut simplement mettre à jour votre version de Divi. Ensuite, videz le cache de votre site Web pour vous assurer que la nouvelle version de Divi se charge bien. N’hésitez pas également à visiter l’onglet Performance dans les options du thème Divi pour vérifier que toutes les optimisations sont bien activées par défaut.
Sur le site de test réalisé par Elegant Themes, vous pourrez voir que le CLS est de 0.
Tous les utilisateurs de Divi devraient donc pouvoir obtenir un score similaire.
En cas de mauvais CLS, vérifiez votre plugin de performance, car certaines optimisations peuvent faire “flasher” votre webdesign. Cela peut aussi arriver dans Divi, si vous désactivez l’option “Static CSS File Generation” ou si vous activez “Output Styles Inline”. Ces settings devraient être respectivement sur “On” et “Off”.
Retrouvez notre configuration secrète de Divi + WP Rocket en suivant ce lien.
Si vous ne savez pas ce qu’est le CLS et pourquoi ce critère est très important pour votre indexation Google, nous vous recommandons chaudement la lecture de cet article.
Oui, Divi est entièrement compatible avec PHP 7.4. Cependant, concernant PHP 8, bien que le cœur de WordPress et Divi sont tous les deux compatibles PHP 8 (tout comme EasyHoster), ce n’est pas encore le cas de nombreux autres plugins tiers. Soyez donc vigilant et n’hésitez pas à patienter un peu avant de faire la mise à jour vers PHP 8.
Le thème Extra bénéficie d’ores et déjà de presque toutes ces nouvelles optimisations. Voici ce que dit le changelog à ce sujet : version 4.10 ( updated 08-18-2021 )- Added new performance features that speed up Extra from every angle and eliminate bloat.
Le thème Extra a donc bien été pris en compte durant ces belles améliorations.
Cependant, Elegant Themes indique sur son site que Divi est légèrement plus optimisé du point de vue du CSS, puisque les fichiers CSS du thème ont été rendus plus dynamiques.
Ces mises à jour ne s’appliquent pas à Monarch ou à Bloom. Elles concernent uniquement Divi et le Divi Builder. Lorsque vous utilisez des plugins additionnels, il est toujours conseillé d’avoir un bon plugin de performances en complément des optimisations de Divi 4.10.
🏷 Bénéficier de 10% de réduction sur Divi en suivant notre lien d’affiliation :
→ Télécharger Divi avec 10% de remise !
Votre licence inclut tous les produits d’Elegant Themes, dont le thème Extra et les plugins Bloom & Monarch.
Originaire de Belgique, Mélanie Dorval est diplômée d’un Master en Communication réalisé à l’Université Catholique de Louvain-la-Neuve. Elle a d’abord passé 7 années à prendre soin des clients de l’agence digitale Kim Communication Limited, en tant que directrice commerciale de la société. Ensuite, l’agence ayant pris la décision de recentrer ses activités sur l’Hébergement Web, Mélanie accepte de co-fonder EasyHoster, une jeune entreprise offrant des solutions d’hébergement innovantes. Aujourd’hui, elle se consacre au développement d’EasyHoster, ainsi qu’à la satisfaction de ses clients.
Articles à ne pas manquer :
Divi 5, la nouvelle version du Thème & Builder risque encore de révolutionner la création de sites WordPress !
Comment obtenir et télécharger le thème Divi & le Divi Builder en 100% gratuit ?
Code Promo Divi : coupon de réduction pour obtenir le thème Divi moins cher
Notre avis sur le Thème Divi : est-ce le meilleur constructeur de sites WordPress ?
