Theme DIVI
Pourquoi mon site internet fait avec le thème DIVI est lent ?
Les performances du thème Divi est un sujet récurrent qui préoccupe la communauté. Nick Roach, le fondateur de Elegant Themes qui édite ce fantastique thème WordPress, a tenu a rassuré les webmasters et autres créateurs de sites internet en publiant aujourd'hui un communiqué sur un groupe US.
Un membre de la communauté du groupe facebook Divi Community France a eu la gentillesse de traduire les propos de Nick Roach en français.
L'Agence O'Aka, créateur de sites internet en Alsace, remercie vivement ce contributeur. Afin de ne pas dénaturer les propos évoqués ici, sachez que nous avons uniquement structuré le message en y rajoutant des sous-titres et ainsi que des liens hypertextes que nous jugions utiles.
TRANSCRIPTION DU MESSAGE DE NICK ROACH de Elegant themes au sujet des lenteurs de divi
Le theme Divi et et la mise à jour Core Web Vitals de Google
Parlons des performances de Divi et de toutes les mises à jour liées aux performances sur lesquelles nous travaillons. Je sais que beaucoup de gens sont stressés à propos de Core Web Vitals de Google (les "signaux web essentiels") et sont également frustrés de ne pas savoir exactement quelles fonctionnalités liées aux performances vont arriver sur Divi et quand elles seront prêtes.
Je suis désolé de ne pas pouvoir donner des dates de disponibilités précises sur ces choses, ce n’est tout simplement pas possible. Mais je peux vous en dire plus sur ce que nous faisons et ce que nous avons accompli jusqu'à présent.
Les leviers de performances d'un site
Avant d’entrer dans les détails, je tiens tout d’abord à souligner le fait important que Divi n’est souvent pas le principal facteur déterminant des performances de votre site. Ce n’est qu’une pièce du puzzle. Divi se trouve au-dessus de WordPress, qui se trouve au-dessus d'une pile de logiciels serveur, qui se trouve au-dessus d'une infrastructure d'hébergement. Toutes ces choses doivent être configurées correctement.
Vous avez besoin d'un bon hébergement, d'une mise en cache et d'un CDN. Si votre site Divi est très lent, vous devez également prendre en compte ces autres pièces du puzzle. Divi fonctionne déjà assez bien sur un hôte décent, mais cela ne signifie pas que nous ne pouvons pas faire mieux. Alors, à cette fin, voici ce sur quoi nous travaillons pour aider à mieux optimiser la pièce du puzzle qu'est Divi.
Dynamic Module Framework
Divi fait beaucoup de choses. Il a tellement de fonctionnalités, tellement d'options de conception et tellement de modules ! Le framework PHP qui fait fonctionner tout ce bazar est pour le moins robuste. À l'heure actuelle, lorsque Divi rend une page, il doit "être conscient" de toutes ces fonctionnalités, même si vous ne les utilisez pas.
Le framework de module dynamique changera cela, supprimant à la volée l'intégralité des fonctionnalités que vous n'utilisez pas. Si vous créez une page et n'utilisez que 4 modules, nous ne traiterons pas les 40 autres modules que vous n'utilisez pas. Si vous n’utilisez pas les effets de mouvement, les ombres, les options "sticky" ou toute autre fonctionnalité de Divi, nous ne traiterons pas non plus la logique de ces fonctionnalités.
Nous mettons en cache un tableau de choses à traiter et ignorons le reste. Cela élimine complètement l'embonpoint du framework et cela signifie que nous pouvons continuer à ajouter autant de modules et d'options que nous le souhaitons sans affecter les performances côté PHP. Nous avons déjà construit cette fonctionnalité et elle entrera bientôt en phase de test. Sur nos serveurs de test, elle a réduit le TTFB de 2000 ms à 500 ms. Aucun autre constructeur de page ne fait ça.
Dynamic Assets
Nous appliquons la même idée qu'au framework de module dynamique aux fichiers CSS et JS de Divi. Nous prenons le fichier principal "style.css" et "custom.js" de Divi et le décomposons en morceaux dynamiques. Ces morceaux sont ensuite compilés pour chaque page en fonction des modules Divi et des fonctionnalités du thème Divi que vous utilisez.
Si vous n’utilisez que 4 modules, toutes les CSS / JS des 40 autres modules de Divi ne sont pas du tout chargés. La même chose s'applique aux options du thème Divi. Nous ne chargerons pas les CSS / JS pour du slide de Divi dans le menu, la navigation verticale ou toute autre option de mise en page que vous n’utilisez pas. C'est une fonctionnalité très délicate sur laquelle nous travaillons depuis plus d'un an, et elle est presque terminée, mais je m'attends à ce que les tests soient assez difficiles en raison de la modification de l'ordre des CSS. Cette fonctionnalité utilise le fichier "style.css" de 850 Ko de Divi et ramène la taille du fichier de base à 55 Ko ! Le CSS dynamique requis pour créer cette mise en page par exemple, a été réduit de 850 Ko à 200 Ko.
Dynamic Assets élimine complètement l'embonpoint des CSS / JS de Divi et cela signifie que vous pouvez rendre vos pages aussi légères que vous le souhaitez.
Critical CSS
Critical CSS est un terme de Core Web Vitals. L'idée est que vous pouvez considérablement améliorer la vitesse de rendu de la page si vous ne placez dans le <head> que les CSS nécessaires pour rendre le contenu au-dessus de la ligne de flottaison du site.
Le reste des CSS est placé dans le <body> et est chargé avec le reste du contenu de la page. La majeure partie des CSS chargées dans le <body> ne bloque pas le rendu. C'est difficile à réaliser avec un thème WordPress traditionnel, mais c'est quelque chose pour auquel Divi se prête bien. Étant donné que toutes nos CSS sont morcelées grâce aux Dynamic Assets, nous pouvons donc intégrer intelligemment uniquement les CSS critiques dans le <head>, et mettre le reste dans le <body>.
Core Web Vitals va donc adorer le peu de CSS qui seront présentes dans l'en-tête de votre page. Encore une fois, aucun autre constructeur de pages ou thème WordPress ne le fait de manière dynamique comme le fera Divi.
The Divi Foundation Update
Ok, il s'agit là d'un point conséquent sur lequel nous travaillons depuis un certain temps. Nous reconstruisons le framework des modules de Divi. Cela implique de réécrire les fondations du Visual Builder et de délaisser les codes courts au profit du nouveau format HTML de Gutenberg. Notez que cela ne signifie pas que Divi fait partie de Gutenberg. Nous sommes en train de passer à un meilleur format de stockage de données en adéquation avec l'avenir de WordPress.
Les avantages en termes de performances ici seront énormes car cela signifie que la plupart des rendus des module de Divi seront intrinsèquement mis en cache et qu'aucun traitement ne sera nécessaire sur le front-end. Même sans plugin de mise en cache et sur les pages dynamiques, vous allez voir une énorme augmentation de la vitesse de chargement. C'est un gros projet. Nous y travaillons depuis un certain temps et nous y travaillerons encore un peu.
Nous voulons inverser la tendance et faire de Divi le constructeur de pages le plus rapide.
Donc, en ce qui concerne les performances, c'est ce sur quoi les équipes de Elegant Themes travaille (en parallèle avec d'autres fonctionnalités intéressantes également). Nous souhaitons également créer plus de ressources autour des performances des sites pour aider les utilisateurs de Divi à résoudre les problèmes les plus importants liés à l'hébergement, à la mise en cache, aux CDN, etc.
