Bien plus qu'un hébergeur !
C’est officiel et vous étiez nombreux à l’attendre…

Une mise à jour MAJEURE des performances du thème Divi vient de sortir !

Elegant Themes 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 !

Le Thème Divi est-il rapide, léger et optimisé ?

🏷 Bénéficier de 10% de réduction sur Divi en suivant notre lien d’affiliation :

→ Télécharger Divi avec 10% de remise !

Divi n’est plus seulement l’un des meilleurs thèmes WordPress, mais aussi l’un des plus rapides !

Au sommaire

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, depuis le cœur de leur code 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 Divi Builder, 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

La nouvelle version de Divi 4.10, aussi rapide qu'une fusée !

Score PageSpeed Insight & GTmetrix pour le thème Divi. Source : Elegantthemes.com

À présent, Divi surpasse la concurrence sur la vitesse !

Sur son blog officiel, Elegant Themes vient de détailler toutes les améliorations de performances qu’ils ont pu obtenir grâce à leurs optimisations.

Nous vous partageons les résultats ci-dessous et vous retrouverez même nos propres tests !

Restez branchés !

Un peu plus bas, nous verrons aussi 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 :

Aperçu de Divi 4.10, la version rapide du thème Divi

Via divi.website/divi, aperçu de Divi 4.10, la version rapide du thème Divi !

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.

Quant à elle, 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, c’est aujourd’hui possible !

PageSpeed & SEO :
Depuis mai 2021, toutes les caractéristiques du score de Google PageSpeed font partie intégrante des critères de positionnement d’un site sur Google (source).

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 (Cloudflare) 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

Version allégée Divi pour une meilleur vitesse de chargement

Création de scripts et de fichiers CSS sur mesure, à la volée. Source : Elegantthemes.com

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 !

Optimisations de Divi 4.10 et WP Rocket pour une meilleure indexation Google plus rapide et forcée.

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 Divi Builder, 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

Version allégée et optimisée du thème premium Divi

Le CSS critique est celui qui est nécessaire, au début de la page, afin que l’affichage se fasse correctement, hors défilement. Le CSS non-critique peut quant à lui se charger plus tard dans le processus, voir de façon quasiment asynchrone. Source : Elegantthemes.com

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 d’une page.

Effectuer le rendu d’une page complète 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. 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 ou mis à jour.

Les nouvelles options d’accélération du temps de chargement de Divi 4.10

Comment optimiser la vitesse de chargement de Divi ?

Des optimisations en veux-tu, en voilà, dans la finesse. Source : Elegantthemes.com

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 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 balise <head> des 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 Divi Builder. Il se chargera toujours, juste au cas où, mais il ne bloquera 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 balise <head> de 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 la page Web elle même (donc, de façon in-line).

Le chargement des styles in-line supprime beaucoup de facteurs bloquants et améliore encore 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é.

Quels thèmes et builders WordPress sont les plus rapides ?

Thème & builder Vitesse Page Speed mobile Page Speed 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 SiteGround, 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 :

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 pour ce qui est 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.

Comparatif Divi Theme + Divi Builder vs Gutenberg + Astra vs Beaver Builder + Kadence + Elementor + Hello Elementor + Avada + Fusion Builder. Theme premium Divi, le thème WordPress le plus rapide !

Comparatif : Divi Theme + Divi Builder vs Gutenberg + Astra vs Beaver Builder + Kadence vs Elementor + Hello Elementor vs Avada + Fusion Builder. Source : Elegantthemes.com

🏷 Bénéficier de 10% de réduction sur Divi en suivant notre lien d’affiliation :

→ Télécharger Divi avec 10% de remise !

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 d’indexation Google, avec 18 astuces pour forcer l’indexation, en utilisant le thème Divi 4.9.11 pour notre page de vente d’exemple, dont le sujet était le “Dépannage WordPress” :

Score PageSpeed Juillet 2021 avec le thème Divi 4.9

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és à un score Google PageSpeed de 94 ! Tout cela pour une très longue page de vente, que nous avons pas mal poussée dans les “effets” graphiques. Autrement dit, nous utilisons beaucoup de modules Divi.

Divi est-il le thème + builder le plus rapide de tous les thèmes WordPress et des Page Builders ?

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 :
Massive Divi Performance Update, Speeding Up Divi From Every Angle (ElegantThemes.com)

FAQ sur les performances de la nouvelle version de Divi

display:none (closed 1st toggle)

Dois-je continuer à utiliser un plugin de performance avec cette nouvelle mise à jour optimisée 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.

Cette version allégée de Divi est-elle compatible avec WP Rocket ?

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.

Les améliorations de performance apportées sur Divi aideront-elles les sites Web existants ou est-il nécessaire de reconstruire le site en entier ?

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

Que faut-il faire pour profiter pleinement de l'amélioration des performances de cette version optimisée de Divi ?

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.

Comment améliorer le score CLS de mon site Divi ?

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.

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 (WP Rocket ou autre), 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.

De même, les effets d’animation de Divi tels que les apparitions avec “fondus transparents” devraient être évités pour les blocs de contenu apparaissant en haut de page. 

Cette mise à jour optimisée de Divi est-elle compatible avec PHP 7.4 et PHP 8.0 ?

Oui, Divi est entièrement compatible avec PHP 7.4. Cependant, concernant PHP 8, bien que le cœur de WordPress et Divi soient tous les deux compatibles PHP 8 (tout comme EasyHoster), ce n’est pas encore le cas de nombreux autres plugins tiers connus dans l’écosystème WordPress. Soyez donc vigilant et n’hésitez pas à patienter un peu avant de faire la mise à jour vers PHP 8.

Les optimisations apportées à Divi sont-elles implémentées aussi dans le thème Extra ?

Oui, le thème Extra bénéficie d’ores et déjà de presque toutes ces nouvelles optimisations. Voici ce que dit le changelog d’Extra à 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.

Les optimisations de vitesse s'appliquent-elles également aux plugins Monarch et Bloom ?

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 performance (WP Rocket ou autre) 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.