Mon site WordPress fait avec Divi est lent… les réponses de Nick Roach

8 avril 2021
Des nouvelles fraiches de Divi qui sont de bonne augure. Nick Roach, le fondateur de Elegant Themes à l'origine du Theme Wordpress Divi nous parle des performances de Divi. Vivement Divi 5 !

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.

     À propos de l'auteur

    Portrait de Yoann PIERRE souriant avec une barbe et des lunettes

    Yoann PIERRE

    Tout d’abord chef de projet digital, puis responsable d'une équipe de développement web, Yoann a fait ses premières armes dans une agence eCommerce strasbourgeoise. En quête de nouveaux challenges, c'est en 2020 qu'il fonde l'agence O'Aka.
    Lien d'affiliation avec Elegant Themes
    Publicité pour le thème Wordpress Divi
    Méthodologie Agile et projets digitaux

    Méthodologie Agile et projets digitaux

    Qu’est que la méthodologie Agile et qu’est ce qui fait son succès d’aujourd’hui ? Devez-vous réaliser votre prochain projet digital en méthode Agile SCRUM ou rester sur une méthodologie plus classique ? O’Aka vous fait une présentation macroscopique de cette méthodologie et tente de vous répondre.

    Vendre sur Internet avec Shopify

    Vendre sur Internet avec Shopify

    Shopify est une des solutions les plus populaires pour vendre sur internet. Découvrons ensemble ce qui fait le succès de cette solution et les points à clarifier avant de se lancer dans l’aventure de l’eCommerce.

    L’écosystème de WordPress

    L’écosystème de WordPress

    O’Aka vous présente les différentes couches techniques qui constituent votre site internet Wordpress : socle CMS, plugins, thème graphique, etc. Décryptons tout cela ensemble dans cette keynote qui ne vous prendra que quelques minutes à lire !

    WordPress, le CMS en 2020

    WordPress, le CMS en 2020

    Wordpress est un CMS très populaire sur le web et est utilisé par l’agence O’Aka pour réaliser des sites internet. Découvrons ensemble les chiffres-clés de ce CMS en 2020.

    Thématiques associées :

    Le A Coeur blanc et transparent de la marque Alsace

    O'Aka, Implantée au coeur de l'Alsace

    Pin It on Pinterest