Comparaison de vitesse : exploration du générateur visuel ultra-rapide de Divi 5

En tant que concepteurs et développeurs Web, nous savons que la performance est primordiale. Attendre qu'un générateur de pages lent charge ou affiche les modifications peut interrompre le flux créatif et tuer la productivité. C’est pourquoi l’un des principaux objectifs de Divi 5 est de révolutionner la rapidité et les performances du Visual Builder. Nous avons plongé en profondeur dans la structure de base de Divi et l'avons reconstruite de fond en comble pour créer un constructeur ultra-rapide et plus réactif.

Dans cet article, je passerai en revue les améliorations de performances au sein de Visual Builder qui rendent Divi 5 plus rapide que n'importe quelle version précédente. Tout dans Divi 5 Visual Builder a été optimisé pour la vitesse.

Voyons maintenant comment cela affectera votre flux de travail de conception Web et pourquoi vous ne voudrez plus jamais revenir à des créateurs de pages plus lents.

Tout réécrire : qu’est-ce qui rend Divi 5 différent ?

Divi 5 est bien plus qu’une mise à jour incrémentielle. Il s'agit d'une réécriture complète des technologies de base de Divi, réinventées en mettant l'accent sur les performances, la stabilité et l'évolutivité. Ce changement fondamental nous a amenés à repenser le fonctionnement fondamental de Visual Builder, le rendant nettement plus rapide et plus puissant.

Alors que Divi 4 était déjà un outil puissant sur des millions de sites web, son architecture était vieille de plus d’une décennie. Nous l'avons amélioré et repoussé ses limites, mais le moment est finalement venu de construire de nouvelles fondations.

La dette technique a entraîné des temps de chargement plus lents, des retards de rendu et une instabilité occasionnelle, en particulier lorsque vous travaillez avec des mises en page complexes. Pour résoudre ce problème, l’équipe Divi 5 a reconstruit l’intégralité du framework avec une table rase, en l’optimisant pour les performances et l’évolutivité future. Les résultats parlent d'eux-mêmes : tout dans Divi 5 se passe plus rapidement, du chargement du constructeur aux modifications et à la prévisualisation des modifications.

Télécharger The Divi 5 Alpha Essayez la démo de Divi 5 Rapport Divi 5 Bug

1. Vitesses de rendu améliorées de Visual Builder

Lorsque vous travaillez avec un outil toute la journée, la vitesse compte. Même le plus petit retard s’aggrave avec le temps. Dans les versions précédentes de Divi, les concepteurs devaient parfois attendre une fraction de seconde pour que Visual Builder réponde lors de l’ajout de nouveaux éléments ou de l’ajustement des styles. Cela était particulièrement visible lorsque l'on travaillait sur des documents longs (avec des dizaines de sections remplies de modules et un style personnalisé).

Remarquez le scintillement du style sur D4 (à gauche), où le bouton prend quelques millisecondes pour appliquer entièrement les styles de la section dupliquée. C'est en plus d'être plus lent que D5 (à droite) pour dupliquer la section.

Avec Divi 5, les vitesses de re-rendu ont été considérablement améliorées, vous permettant de travailler sans décalage. Le Visual Builder répond instantanément lorsque vous ajoutez un nouveau module, changez de mode d'affichage ou ajustez les styles. Ce niveau de réactivité fait une énorme différence, en particulier lorsque l’on travaille sur des conceptions complexes qui nécessitent de nombreux ajustements.

Mais qu’est-ce qui a changé exactement pour rendre le constructeur beaucoup plus rapide ?

La technologie derrière un rendu plus rapide

La seule façon d’atteindre ce niveau d’amélioration était de repartir de zéro. Nous avons pris tout ce que nous avons appris au cours de la dernière décennie de développement de Divi et créé une nouvelle application utilisant une technologie moderne, éliminant ainsi des années de dette technique. Nous avons passé du temps à auditer différentes interactions et à identifier les goulots d'étranglement. Nous continuons à le faire et Divi 5 devient plus rapide à chaque mise à jour.

L’abandon des codes courts a également contribué à rendre plus efficace le parcours de conceptions complexes. Dans l’article de demain, nous expliquerons pourquoi le framework shortcode a dû disparaître et comment se porte Divi 5.

Pouvez-vous repérer la différence dans la vidéo de comparaison suivante ? Il met en avant une autre grosse amélioration de Divi 5 : des performances améliorées lors de l’édition des presets ! Dans Divi 5, les préréglages sont basés sur les classes. Avec tous les éléments prédéfinis partageant la même classe, moins de nouveaux rendus sont nécessaires dans le générateur et moins de CSS sont nécessaires sur le front-end.

2. Temps de chargement plus rapides (lire : plus de doubles recharges)

Un problème important dans les anciennes versions de Divi était le double rechargement lors du lancement de Visual Builder, se produisant lorsque des modules et plugins tiers injectaient par erreur des données dynamiques dans le cache de Visual Builder. Cette erreur était si répandue que le double rechargement est devenu un problème courant.

Divi 5 « résout » ce problème en étant si rapide dès la sortie de la boîte qu'il n'a pas besoin de mise en cache ! Puisque nous ne mettons rien en cache, le cache n’a aucune possibilité d’être invalidé et vous ne rencontrerez plus jamais le double rechargement.

Les temps de chargement ont été améliorés dans tous les domaines. Découvrez à quelle vitesse Divi 5 se charge par rapport à Divi 4. Il s'est chargé si vite lors de mon test que vous n'avez même pas la chance de voir notre nouvelle animation de préchargement sophistiquée.

Cette amélioration est particulièrement visible pour les concepteurs travaillant sur des projets plus importants. Auparavant, l'ouverture d'un projet volumineux dans Visual Builder pouvait prendre plusieurs secondes pour se charger complètement.

3. Nous avons supprimé toutes les animations d'interface

L'un des changements les plus notables de la nouvelle interface de Divi 5 (au-delà de sa refonte moderne) est la suppression de toutes les animations.

Dans les versions précédentes, les animations fournissaient un retour visuel lors de l'interaction avec le constructeur (par exemple, ajout de nouveaux modules ou changement de mode d'affichage). Bien que ces animations ajoutent un certain niveau de jeu, elles introduisent également de légers retards dans le processus de conception, en particulier sur les systèmes les plus lents.

La philosophie de conception de Divi 5 est différente. L'interface est là pour vous servir, rien de plus. C'est minime. Cela ne vous gêne pas. Cela n’entre pas en concurrence avec votre design. Il ne se soucie pas d'avoir l'air cool. Son UI/UX est ancrée dans la rapidité et l’efficacité.

Remarquez-vous toutes ces animations subtiles (fondus-entrées-sorties, diapositives-entrées-sorties et similaires) que Divi 4 utilise ? Cela rend inutilement l’interface utilisateur plus lente et moins réactive. Dans Divi 5, nous avons adopté une approche plus rapide que style. Nous avons supprimé ces animations pour accélérer le constructeur et le rendre plus réactif. L'accent est désormais entièrement mis sur la fonctionnalité, garantissant que chaque action que vous entreprenez dans le générateur se déroule le plus rapidement possible.

Où va Divi 5 à partir d’ici ?

La Public Alpha est officiellement lancée. Tout d’abord, nous serions ravis de vous remercier pour votre patience pendant que nous travaillions avec diligence au cours de ces derniers mois pour sortir l’alpha publique de Divi 5. Ce n’était pas une mince affaire et notre travail ne fait que commencer.

Comme Nick l'a expliqué jeudi, nous passerons environ un mois à corriger les bugs connus dans notre backlog et de nombreux bugs que vous, la communauté, trouvez actuellement. L’Alpha publique de Divi 5 est vraiment une Alpha, mais nous travaillons sans relâche pour qu’elle soit prête pour la production. Vous pouvez nous aider en testant Divi 5 sur vos sites locaux et de test, en trouvant tous les bugs possibles et en les signalant à notre équipe d'assistance. Nous trierons chaque bug détecté et travaillerons sur les plus urgents au fur et à mesure qu’ils surviennent.

Télécharger le rapport Divi 5 Alpha Divi 5 Bug

Si vous n'avez pas de site intermédiaire ou local sur lequel tester, vous pouvez toujours vous familiariser avec la version démo de Divi 5. C'est un excellent moyen de vous habituer à la refonte et à la mise en page du nouveau constructeur. C’est tout un changement, mais il était absolument nécessaire.

Essayez la démo de Divi 5

L’avenir de Divi est rapide

Divi 5 représente un bond en avant significatif en termes de vitesse et de performances. Divi est désormais plus puissant et réactif avec un rendu ultra-rapide, des temps de chargement plus rapides et un constructeur repensé qui donne la priorité à l'utilité plutôt qu'au style. Que vous soyez un concepteur Web solo ou que vous fassiez partie d'une équipe de développement plus large, ces améliorations rendront votre flux de travail plus rapide, plus fluide et plus efficace.

Si vous utilisez Divi 4, vous serez époustouflé par la rapidité avec laquelle Divi 5 se sent. La meilleure partie ? Ce n'est que le début. Au fur et à mesure que nous optimisons et développons le framework Divi 5, le constructeur n’en deviendra que plus rapide et plus puissant. L’avenir de la conception Web avec Divi est fulgurant et nous ne faisons que commencer.

Dans les prochains jours, nous parlerons de ce que signifie le fait que Divi 5 s'éloigne des shortcodes, approfondit le système de migration de site et offre un avantage lié aux développeurs. N'oubliez pas de suivre et de vous abonner pour recevoir ces mises à jour et bien plus encore.