genutzte Komponenten: WordPress 6.4.2 | Divi: 4.16.0 | GeneratePress Premium 2.3.2 | GenerateBlocks Pro 1.6.0
Wie fängt man einen Vergleich zweier Themes an? Nun, man könnte einfach einen Pagespeedtest laufen lassen und bekommt ein Ergebnis. Wir wollten es etwas genauer wissen und machen den direkten Vergleich, indem wir die gleichen Inhalte mit zwei technisch unterschiedlichen Grundlagen gegenüberstellen. Dieser Beitrag handelt vom Performance-Vergleich zwischen den Themes „Divi“ und „GeneratePress“ mit den jeweils eigenen Editor-Erweiterungen.
Einführende Worte zum Test
Einige Themes, wie beispielsweise Divi, vereinen einen eigenen Page-Builder. Also einem Werkzeug, mit dem du visuelle Einstellungen auf deiner Website vornehmen kannst. Die Trennung zwischen Design und Inhalt ist somit bereits aufgeweicht. Ähnlich verhält es sich mit dem WordPress eigenen Page-Builder, dem sogenannten Block-Editor. Der Vorteil an letzterem Werkzeug ist die Nähe zu deinem CMS selbst. Egal welche Dinge sich im Hintergrund innerhalb der WordPress-Entwicklung ändern werden, der Block-Editor als Werkzeug wird dahingehend angepasst und natürlich auch kompatibel gehalten. Eine der bekannten Stärken von WordPress. Diese Aktualität ist bei zusätzlichen Tools und Pagebuildern nicht zwangsläufig gegeben, weshalb wir eine Lösung mit möglichst nahe am Kern von WordPress bevorzugen.
Über das Warum (wir GeneratePress nutzen) haben wir bereits in einigen Artikel philosophiert. An dieser Stelle wollen wir den Vergleich ziehen. Da wir hierzu eine Migration von Inhalten benötigen, können wir dir diesen Schritt ebenfalls erläutern.
Theme (GeneratePress) und Page-Builder (Block-Editor mit GenerateBlocks Erweiterung) agieren getrennt voneinander. Das bedeutet, du kannst sowohl das Theme, als auch den Builder mit anderen Block-Editor-Erweiterungen beziehungsweise Themes verwenden. Grundsätzlich sogar mit dem Divi-Builder. Denn auch im Divi-Universum agieren beide Bereiche getrennt: Divi-Theme und Divi-Builder. Aber im Theme ist der Builder bereits integriert. Nennt sich dann All-in-one WordPress Theme. Den visuellen Pagebuilder von Divi kannst du auch mit anderen Themes kombinieren.
Die Kombination von Divi-Builder mit GeneratePress als Theme können wir uns sogar grundsätzlich vorstellen. Ein GenerateBlocks ohne GeneratePress allerdings weniger, wenngleich es kein Ausschluss ist. Warum fragst du dich? Nun, weil die Mittel sehr gut aufeinander abgestimmt sind und sich optimal ergänzen. Aber das klären wir gleich im Detail.
Migration der Inhalte von Divi zum WordPress eigenen Block-Editor
- Website neu aufbauen
- Inhalte der Seiten & Beiträge neu setzen
Diese beiden Punkte stellen sicherlich für einige -gerade sehr komplexe- Websites eine unüberbrückbare Hürde dar. An der Stelle gleicht es einem kompletten Relaunch und der Aufwand ist mit einem CMS-Wechsel vergleichbar. Du könntest also auch das WordPress-Ökosystem verlassen und in ein alternatives CMS eintauchen. So zumindest wird es sich für dich anfühlen.
Um in unserer Analogie zum Kochen und Essen zu bleiben: Wir kochen also keine Hühnersuppe mehr, sondern wechseln das Gericht und wollen stattdessen Schnitzel mit Pommes essen. Es sind gänzlich unterschiedliche Grundlagen nötig
Wie wird der Page-Builder überhaupt genutzt?
An dieser Stelle müssen wir zunächst differenzieren, ob Divi in Gänze benutzt wird oder vielleicht nur als Theme? Es gibt durchaus einige Websites, die gemischt funktionieren. Inhalte werden mittels Block-Editor erstellt, die optische Anmutung wird allerdings über die Theme-Eigenschaften dargestellt.
Schon werden viele Kritikpunkte nicht mehr in Gänze zum Tragen kommen, denn du als Nutzer hast bereits indirekt einige Verbesserungen vorgenommen, indem du nur Teile der verfügbaren Funktionen von verwendest. Pauschalaussagen, wie Divi ist langsam/schlecht, funktionieren somit auch nur pauschal. Diese Komplexität wird sich in unserem Test fortsetzen!
Allgemeine Kritik an Divi
Greifen wir ein paar der wesentlichen Kritikpunkte an Divi zunächst auf, um diese im Anschluss prüfen zu können.[1]Pootlepress.com: How to change from Divi to the Block Editor
Divi bietet dir viele unterschiedliche Fast-Food-Gerichte, aber sobald du gesund kochen möchtest, wird es etwas aufwendiger!
Divi ist langsam
Der konkrete Vorwurf heißt beispielsweise, dass Divi den Google Core Web Vitals Test nicht besteht. Und besonders der Divi-Builder mit zu vielen Funktionen überfrachtet ist, die nicht jeder benötigt und dadurch die Website sowie auch die Ladezeit negativ beeinflusst wird. Man kann zwar ungenutzte Inhalte des Editors für bestimmte Nutzergruppen deaktivieren, das bringt jedoch wenig, da es nur den Zugriff auf die Bearbeitungsfunktionen limitiert, nicht jedoch die Ladezeit beeinflusst.
Divi-Builder arbeitet mit Shortcodes
Sobald du Divi und damit auch den integrierten Divi-Builder deaktivierst, wirst du dort, wo einst deine Inhalte waren, eine Wüste an Shortcodes wiederfinden. Das ist nicht nur unschön, sondern hat auch zur Folge, dass dein bisheriger Inhalt nicht weiter verarbeitet werden kann. Also zumindest solange nicht, bis du alle Texte und jedes Bild migriert hast.
Der Einstieg ist komplex
Durch den großen Umfang und das Ziel, für jeden Anwendungsbereich das richtige Werkzeug darzustellen, existieren viele Funktionen in zusätzlichen Tabs und versteckten Kontextmenüs. Diese müssen erkundet und auch gefunden werden. Einmal gefunden geben Sie dem unbedarften Nutzer allerdings die Möglichkeit umfangreiche Formatierungen zu erledigen. Ob es nur die Schriftgröße ist oder ganze Animationen und Verhaltensweisen, es ist für fast alles gesorgt.
Allerdings bemerken wir beim Block-Editor und auch GenerateBlocks eine ähnliche Tendenz, denn auch wir finden uns nach manchen Aktualisierungen nicht mehr so einfach zu Recht, wie vorher, als es noch deutlich weniger Möglichkeiten gab. Die Einstiegshürde ist seit Version 1.0 bereits höher geworden und steigt mit jeder neuen Version, da weitere Funktionen ebenfalls in Kontextmenüs hinterlegt oder gar versteckt werden. Letzteres verlangt dann immer einen klick mehr, um zum gewünschten Inhaltsbereich zu gelangen.
Alles in Allem kann gesagt werden, dass gerade unerfahrene Nutzer mit Divi durchaus schnell zu soliden optischen Ergebnissen gelangen, während es mit dem Block-Editor und Generate-Blocks gelegentlich aufwendiger werden kann, das gleiche Ergebnis zu erreichen.
Aktualisierungen werden ungenügend getestet
Es scheint schon häufiger vorgekommen zu sein, dass nach einer Aktualisierung einige Dinge nicht mehr funktionierten. [2]Michael Baierl: Nachteile des Premium Themes Divi Enge Aktualisierungsintervalle sprechen für dieses negative Vorgehen.[3]Divichangelog.com: Am 3. April 2023 erschein Version 4.20.3 und 4.20.4, Version 4.20.2 erschien zwei Tage nach Version 4.20.1, die am 6, März 2023 erschien
Eigenständige Übersetzung
Nicht alle Übersetzungen sind sinnvoll geschehen: „Arbeitsstelle“ meint beispielsweise „Display“ für CSS. Hier werden Dinge quasi fehlerhaft gelernt oder erst garnicht verstanden.
Weit entfernt vom Core
Da Divi den Block-Editor nicht verwendet, entfernt sich das Grundkonzept immer weiter von der ursprünglichen WordPress-Idee. Wir sehen dabei die Gefahr der Abhängigkeit und steigenden Inkompatibilität, wodurch ein zukünftiger Umstieg immer komplizierter wird.
Allerdings wird jeder Umstieg von zusätzlichen Gutenberg-Blöcken auch Nacharbeit bedeuten.
Divi profitiert von seiner Historie
Lange war es kompliziert, ansehnliche WordPress-Layouts zu erstellen. Die Layout-Optionen waren enorm limitiert und Divi hat diesen Umstand bravourös beseitigt. Aber mittlerweile hat sich WordPress an dieser Stelle massiv weiter entwickelt, wodurch unserer Meinung nach das Divi-Konzept überholt wurde.
No-Code-Lösung
Zwar gibt es sehr viele Lösungen für Probleme und Co. aber, wenn du etwas Spezielles benötigst und dieses nicht out-of-the-box funktioniert. Klingt zunächst praktisch, denn du kannst dir für alle gewünschten Funktionen ein Add-on integrieren. Bedeutet aber eben auch, du hast für 30 Funktionen 15 Add-ons installiert. Dies kann schnell sehr unübersichtlich werden.[4]Vergleich: https://www.elegantthemes.com/freelancers/
Betrachte dir vor deiner Entscheidung verschiedene Divi-Anleitungen. Wir empfinden das Einlernen als durchaus kompliziert, da sehr spezialisiert.[5]Divi-Tutorials.com
Du pimpst dein Fast-Food mit einem anderen Fast-Food um ein komplettes Gericht zu erhalten.
Unser Test: Divi vs. GeneratePress
Wir haben nun also eine Website zum testen genutzt und den exakt gleichen inhaltlichen Aufbau vom Divi-Theme in ein Setup mit GeneratePress überführt. Damit die Testdaten vergleichbar bleiben, liegen beide Websites auf dem identischen Server und werden mit den gleichen Tools getestet.
Ladegeschwindigkeit: 0:1 für GeneratePress
Wir testen die Unterschiede auf dem gleichen Server mit folgenden Messwerten.
Weiter haben wir die Netzwerkanalyse und den unkomprimierten Quellcode im Browser geprüft und folgende Werte ermittelt.
Parameter | Divi | GeneratePress | Ersparnis |
Anzahl der HTTP-Anfragen | 130 | 104 | 20,00 % |
übertragene Datenmenge / Speicherverbrauch | 20,10 MB | 19,41 MB | 3,43 % |
Ladezeit | 4,58 s | 1,31 s | 71,40 % |
Quellcode-Zeilen | 1.346 | 599 | 55,50 % |
Quellcode-Zeichen | 353.807 | 100.251 | 71,67 % |
Anhand der Werte lässt sich schnell ablesen, dass Divi und der Divi-eigene Editor im Vergleich zum Block-Editor mit dem GeneratePress Theme deutlich mehr Quellcode zur Folge hat. Dieser Umstand schlägt sich erheblich in der Ladezeit der Website nieder.
Im Vergleich
Wenn wir uns die Module/Elemente verschiedener Builder betrachten, fällt eines deutlich auf: Divi kombiniert Elemente mit eigenen Templates. GenerateBlocks verwendet ein Element spezifischer und lässt sich an dieser Stelle individuell einstellen. So gibt es lediglich „Buttons“, die individuell nach deinen Wünschen angepasst werden. Divi bietet hier beispielsweise „Button“ und Call to Action“, obwohl das Resultat vergleichbar ist. Daher haben wir eine Tabelle mit den Entsprechungen der nativen Divi-Module[6]Divi-Module: Abgerufen am 27. August 2023 erstellt. Wenn uns keine Entsprechung bekannt ist, empfehlen wir dir ein passendes Plugin.
Elemente von Divi | Beschreibung | GenerateBlocks-Alternative |
Accordion | Öffnen und Schließen eines Blocks mit Inhalten, wenn geklickt wird | Accordion |
Audio | Audioinformationen in einem Online-Player abspielen | Gutenberg: HTML5 Block |
Bar Counter | Statistiken und Informationen animiert darstellen | Plugin: Counter Box |
Blog | Anzeigen von Beiträgen in unterschiedlichen Darstellungsformen | QueryLoop |
Blurb | Anzeige von snackable Inhalten | Überschriften |
Button | klickbarer Button | Button |
Call to Action | Button mit Text | Button + Container |
Circle Counter | Stats in einem animierten Kreisdiagramm | Plugin: Counter Box |
Code | HTML, JS und CSS Code verwenden | Gutenberg: Code |
Comments | Darstellung von Kommentaren auf einem Beitrag | QueryLoop? |
Kontaktformular | Kontaktformular mit erweiterter Logik | Plugin: ContactForm 7 + Erweiterungen |
Countdown Timer | Rückwärtszähler | Wie oft benötigt man dies? 😉 |
Divider | Vertikaler Platzhalter | Container (Abstand) |
Newsletter | E-Mails sammeln und Newsletter senden | Plugin: sehr viele 😉 |
Filterable Portfolio | Filterbare Gallerie | Query Loop + Container + Tabs |
Galerie | Darstellung mehrerer Bilder | Gutenberg: Galerie | Image + Raster (Container) |
Hero | Nutze die komplette Bildschirmgröße | Container |
Icon | Nutze ein Icon | Überschrift | Button |
Image | Darstellung eines Bildes | Image |
LoginForm | Erstellung eines Login-Bereichs | Gutenberg: An- und Abmelden |
Map | Darstellung einer Google-Karte | Plugin: | Code als iframe |
Menu | Darstellung eines Website-Menüs | Gutenberg: Navigation |
Number Counter | Animierter Zähler | Plugin: Hurry Timer |
Person | Foto, Biographie & soziale Profile | Container + Text + Image + Button |
Portfolio | Einzelnes Portfolio Raster | Raster / Container |
Portfolio Carousel | seitenweiten Portfolio-Darstellung | Query Loop |
Post Navigation | Darstellung weiterer Beiträge | Element: Navigation |
Post Slider | Slider zur Darstellung einzelner Beiträge | Query Loop + Container + Tabs |
Post Title | Anzeige dynamischer Beitragstitel | QueryLoop |
Pricing Tables | Darstellung verschiedener Preistabellen zum besseren Vergleich | Container |
Search | Darstellung einer Suche | Gutenberg: Suchen |
Sidebar | Anzeige einer Sidebar mit Widgets | GeneratePress-Einstellung: Sidebar |
Slider | Slider mit Inhalten, Buttons und Bildern | Plugin: beispielsweise MetaSlider |
Social Follow | Link zu sozialen Profilen | Überschriften / Button |
Tabs | Inhalte in Tabs darstellen | Tabs |
Testimonial | soziale Bestätigungen anzeigen | Container |
Text | Text & Überschriften | Gutenberg: Absatz | GP: Überschrift |
Toggle | Inhalte anzeigen und verstecken beim Klick | Accordion |
Video | Videos von anderen Platformen darstellen | Gutenberg: YT-Block, Vimeo-Block & HTML5-Block |
Video Slider | Videos in einer Slideransicht anzeigen | Plugin: beispielsweise MetaSlider |
Es prallen zwei Vorstellungen aufeinander: Ich habe alles aus einer Hand, wenn ich möchte, könnte ich. (Divi)
Ich kann alles bewerkstelligen und für Spezialaufgaben, suche ich mir ein passendes Plugin.
Im GeneratePress/Blocks-Universum werden die meisten Module mittels Containern selbst erstellt. Auch der Headline-Block ist eher als multifunktionales Segment für Text mit zahlreichen Konfigurationsmöglichkeiten zu verstehen.
Auffallend ist die Verwendung von Slidern für die Darstellung von Inhalten. Darauf möchte GeneratePress generell möglichst verzichten, da diese die Ladegeschwindigkeit drastisch reduzieren kann. Auf unserer Vergleichswebsite hat sich die Geschwindigkeit nach der Umstellung von Divi auf GeneratePress drastisch verbessert. Wahrscheinlich rechtfertigt dies allerdings keine generelle Empfehlung. Allerdings festigt es unsere Meinung entsprechend ; )
Quellen und Fußnoten