Geschwindigkeitsvergleich: Entdecken Sie den rasend schnellen Divi 5 Visual Builder

Veröffentlicht: 2024-09-30

Als Webdesigner und Entwickler wissen wir, dass Leistung alles ist. Das Warten darauf, dass ein langsamer Seitenersteller Änderungen lädt oder rendert, kann den kreativen Fluss unterbrechen und die Produktivität beeinträchtigen. Deshalb ist es eines der Hauptziele von Divi 5, die Geschwindigkeit und Leistung des Visual Builder zu revolutionieren. Wir haben uns eingehend mit der Kernstruktur von Divi befasst und sie von Grund auf neu aufgebaut, um einen blitzschnellen, reaktionsfähigeren Builder zu schaffen.

In diesem Beitrag gehe ich auf die Leistungsverbesserungen im Visual Builder ein, die Divi 5 schneller als jede frühere Version machen. Alles am Divi 5 Visual Builder wurde auf Geschwindigkeit optimiert.

Lassen Sie uns nun untersuchen, wie sich dies auf Ihren Webdesign-Workflow auswirkt und warum Sie nie wieder zu langsameren Seitenerstellern zurückkehren möchten.

Inhaltsverzeichnis
  • 1 Alles neu schreiben: Was macht Divi 5 anders?
    • 1.1 1. Verbesserte Visual Builder-Re-Rendering-Geschwindigkeiten
    • 1.2 2. Schnellere Ladezeiten (sprich: Kein doppeltes Nachladen mehr)
    • 1.3 3. Wir haben alle Interface-Animationen entfernt
    • 1.4 Wie geht es mit Divi 5 weiter?
    • 1.5 Die Zukunft von Divi ist schnell

Alles neu schreiben: Was macht Divi 5 anders?

Divi 5 ist viel mehr als ein inkrementelles Update. Es handelt sich um eine komplette Neufassung der Kerntechnologien von Divi, neu konzipiert mit Fokus auf Leistung, Stabilität und Skalierbarkeit. Dieser grundlegende Wandel veranlasste uns, die Funktionsweise des Visual Builders im Kern zu überdenken und ihn deutlich schneller und leistungsfähiger zu machen.

Während Divi 4 bereits auf Millionen von Websites ein leistungsstarkes Tool war, war seine Architektur über ein Jahrzehnt alt. Wir haben es verbessert und seine Grenzen ausgereizt, aber nun war es endlich an der Zeit, ein neues Fundament zu schaffen.

Technische Schulden führten zu langsameren Ladezeiten, Verzögerungen beim erneuten Rendern und gelegentlicher Instabilität, insbesondere bei der Arbeit mit komplexen Layouts. Um dieses Problem anzugehen, hat das Divi 5-Team das gesamte Framework von Grund auf neu erstellt und es im Hinblick auf Leistung und zukünftige Skalierbarkeit optimiert. Die Ergebnisse sprechen für sich: Alles in Divi 5 geht schneller, vom Laden des Builders bis hin zum Vornehmen von Bearbeitungen und der Vorschau der Änderungen.

Laden Sie die Divi 5 Alpha herunter. Probieren Sie die Divi 5-Demo aus. Melden Sie den Divi 5-Fehler

1. Verbesserte Visual Builder-Re-Rendering-Geschwindigkeiten

Wenn Sie den ganzen Tag mit einem Werkzeug arbeiten, kommt es auf Geschwindigkeit an. Selbst die kleinste Verzögerung verstärkt sich mit der Zeit. In früheren Versionen von Divi mussten Designer beim Hinzufügen neuer Elemente oder beim Anpassen von Stilen manchmal einen Sekundenbruchteil auf die Reaktion des Visual Builder warten. Dies machte sich besonders bei der Arbeit an langen Dokumenten bemerkbar (mit Dutzenden von Abschnitten, die mit Modulen und benutzerdefiniertem Stil gefüllt waren).

Beachten Sie das Flackern des Stils auf D4 (links), wo die Schaltfläche Millisekunden benötigt, um die Stile aus dem duplizierten Abschnitt vollständig anzuwenden. Darüber hinaus ist es langsamer als D5 (rechts), den Abschnitt zu duplizieren.

Mit Divi 5 wurde die Geschwindigkeit beim erneuten Rendern erheblich verbessert, sodass Sie ohne Verzögerung arbeiten können. Der Visual Builder reagiert sofort, wenn Sie ein neues Modul hinzufügen, den Ansichtsmodus wechseln oder Stile anpassen. Dieses Maß an Reaktionsfähigkeit macht einen großen Unterschied, insbesondere bei der Arbeit an komplexen Designs, die viel Feinabstimmung erfordern.

Aber was genau hat sich geändert, um den Builder so viel schneller zu machen?

Die Technologie hinter schnellerem Re-Rendering

Der einzige Weg, dieses Maß an Verbesserung zu erreichen, bestand darin, bei Null anzufangen. Wir haben alles, was wir im letzten Jahrzehnt der Divi-Entwicklung gelernt haben, genutzt und mithilfe moderner Technologie eine neue Anwendung erstellt, wodurch jahrelange technische Schulden beseitigt wurden. Wir haben Zeit damit verbracht, verschiedene Interaktionen zu prüfen und Engpässe zu identifizieren. Das machen wir immer noch und Divi 5 wird mit jedem Update schneller.

Die Abkehr von Shortcodes hat auch dazu beigetragen, das Durchlaufen komplexer Designs effizienter zu gestalten. Im morgigen Beitrag besprechen wir, warum das Shortcode-Framework weg musste und wie es Divi 5 geht.

Können Sie den Unterschied im folgenden Vergleichsvideo erkennen? Es hebt eine weitere große Verbesserung in Divi 5 hervor: verbesserte Leistung beim Bearbeiten von Voreinstellungen! In Divi 5 sind Voreinstellungen klassenbasiert. Da alle voreingestellten Elemente dieselbe Klasse haben, sind im Builder weniger erneute Renderings und im Frontend weniger CSS erforderlich.

2. Schnellere Ladezeiten (sprich: Kein doppeltes Nachladen mehr)

Ein wesentlicher Problempunkt in älteren Versionen von Divi war das doppelte Neuladen beim Start von Visual Builder, das auftrat, wenn Module und Plugins von Drittanbietern versehentlich dynamische Daten in den Cache von Visual Builder einfügten. Dieser Fehler war so weit verbreitet, dass das doppelte Nachladen zu einem häufigen Problem wurde.

Divi 5 „behebt“ dieses Problem, indem es sofort einsatzbereit ist und kein Caching benötigt! Da wir nichts zwischenspeichern, besteht keine Möglichkeit, dass der Cache ungültig wird, und es kommt nie wieder zu einem doppelten Neuladen.

Die Ladezeiten wurden durchweg verbessert. Schauen Sie sich an, wie schnell Divi 5 im Vergleich zu Divi 4 lädt. In meinem Test wurde es so schnell geladen, dass Sie nicht einmal die Gelegenheit haben, unsere schicke neue Preloader-Animation zu sehen.

Diese Verbesserung macht sich besonders für Designer bemerkbar, die an größeren Projekten arbeiten. Bisher konnte es mehrere Sekunden dauern, bis ein großes Projekt im Visual Builder vollständig geladen war.

3. Wir haben alle Interface-Animationen entfernt

Eine der bemerkenswertesten Änderungen an der neuen Benutzeroberfläche von Divi 5 (über das moderne Redesign hinaus) ist die Entfernung aller Animationen.

In früheren Versionen gaben Animationen visuelles Feedback bei der Interaktion mit dem Builder (z. B. beim Hinzufügen neuer Module oder beim Wechseln des Ansichtsmodus). Während diese Animationen für ein gewisses Maß an Verspieltheit sorgten, führten sie auch zu leichten Verzögerungen im Designprozess, insbesondere auf langsameren Systemen.

Die Designphilosophie von Divi 5 ist anders. Die Schnittstelle dient Ihnen, nichts weiter. Es ist minimal. Es steht Ihnen nicht im Weg. Es konkurriert nicht mit Ihrem Design. Es geht nicht darum, cool auszusehen. Seine UI/UX basiert auf Geschwindigkeit und Effizienz.

Sind Ihnen all die subtilen Animationen (Ein- und Ausblenden, Ein- und Ausblenden usw.) aufgefallen, die Divi 4 verwendet? Dadurch wirkt die Benutzeroberfläche unnötigerweise langsamer und weniger reaktionsschnell. Bei Divi 5 haben wir einen Speed-over-Style-Ansatz gewählt. Wir haben diese Animationen entfernt, um den Builder zu beschleunigen und reaktionsfähiger zu machen. Der Fokus liegt nun vollständig auf der Funktionalität und stellt sicher, dass jede Aktion, die Sie im Builder ausführen, so schnell wie möglich erfolgt.

Wie geht es mit Divi 5 weiter?

Die öffentliche Alpha wird offiziell gestartet. Zunächst möchten wir uns bei Ihnen für Ihre Geduld bedanken, während wir in den letzten Monaten fleißig daran gearbeitet haben, die öffentliche Alpha von Divi 5 auf den Markt zu bringen. Es war keine leichte Aufgabe – und unsere Arbeit fängt gerade erst an.

Divi 5 Alpha

Wie Nick am Donnerstag besprochen hat, werden wir etwa einen Monat damit verbringen, bekannte Fehler in unserem Backlog zu beheben, und viele Fehler, die Sie als Community gerade finden. Die öffentliche Alpha von Divi 5 ist im Großen und Ganzen eine Alpha, aber wir arbeiten unermüdlich daran, sie in einen produktionsreifen Zustand zu bringen. Sie können helfen, indem Sie Divi 5 auf Ihren lokalen und Staging-Sites ausprobieren, alle Fehler finden, die Sie finden können, und sie unserem Support-Team melden. Wir werden jeden gefundenen Fehler selektieren und an den dringendsten arbeiten, sobald sie auftreten.

Laden Sie den Divi 5 Alpha herunter. Melden Sie den Divi 5-Fehler

Wenn Sie keine Staging- oder lokale Site zum Testen haben, können Sie sich trotzdem mit der Demoversion von Divi 5 vertraut machen. Dies ist eine großartige Möglichkeit, sich an das neue Builder-Redesign und -Layout zu gewöhnen. Es ist eine ziemliche Veränderung, die aber dringend nötig war.

Probieren Sie die Divi 5-Demo aus

Die Zukunft von Divi ist schnell

Divi 5 stellt einen bedeutenden Fortschritt in Bezug auf Geschwindigkeit und Leistung dar. Divi ist jetzt leistungsfähiger und reaktionsschneller mit blitzschnellem Re-Rendering, schnelleren Ladezeiten und einem neu gestalteten Builder, bei dem der Nutzen wichtiger ist als der Stil. Unabhängig davon, ob Sie ein einzelner Webdesigner oder Teil eines größeren Entwicklungsteams sind, werden diese Verbesserungen Ihren Arbeitsablauf schneller, reibungsloser und effizienter machen.

Wenn Sie Divi 4 verwendet haben, werden Sie überwältigt sein, wie schnell sich Divi 5 anfühlt. Das Beste daran? Das ist erst der Anfang. Während wir das Divi 5-Framework optimieren und erweitern, wird der Builder nur noch schneller und leistungsfähiger. Die Zukunft des Webdesigns mit Divi schreitet rasant voran – und wir fangen gerade erst an.

In den kommenden Tagen werden wir darüber sprechen, was es bedeutet, dass Divi 5 auf Shortcodes verzichtet, einen tiefen Einblick in das Site-Migrationssystem wirft und einen entwicklerbezogenen Blickwinkel einnimmt. Vergessen Sie nicht, uns zu folgen und sich anzumelden, um diese Updates und mehr zu erhalten.