Divi vs. GeneratePress/Generateblocks

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

  1. Website neu aufbauen
  2. 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.

Lighthouse Test mit Divi-Theme
Lighthouse Test mit GeneratePress-Theme

Weiter haben wir die Netzwerkanalyse und den unkomprimierten Quellcode im Browser geprüft und folgende Werte ermittelt.

ParameterDiviGeneratePressErsparnis
Anzahl der HTTP-Anfragen13010420,00 %
übertragene Datenmenge / Speicherverbrauch20,10 MB19,41 MB3,43 %
Ladezeit4,58 s1,31 s71,40 %
Quellcode-Zeilen1.34659955,50 %
Quellcode-Zeichen353.807100.25171,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 DiviBeschreibungGenerateBlocks-Alternative
AccordionÖffnen und Schließen eines Blocks mit Inhalten, wenn geklickt wirdAccordion
AudioAudioinformationen in einem Online-Player abspielenGutenberg: HTML5 Block
Bar CounterStatistiken und Informationen animiert darstellenPlugin: Counter Box
BlogAnzeigen von Beiträgen in unterschiedlichen DarstellungsformenQueryLoop
BlurbAnzeige von snackable InhaltenÜberschriften
Buttonklickbarer ButtonButton
Call to ActionButton mit TextButton + Container
Circle CounterStats in einem animierten KreisdiagrammPlugin: Counter Box
CodeHTML, JS und CSS Code verwendenGutenberg: Code
CommentsDarstellung von Kommentaren auf einem BeitragQueryLoop?
KontaktformularKontaktformular mit erweiterter LogikPlugin: ContactForm 7 + Erweiterungen
Countdown TimerRückwärtszählerWie oft benötigt man dies? 😉
DividerVertikaler PlatzhalterContainer (Abstand)
NewsletterE-Mails sammeln und Newsletter sendenPlugin: sehr viele 😉
Filterable PortfolioFilterbare GallerieQuery Loop + Container + Tabs
GalerieDarstellung mehrerer BilderGutenberg: Galerie | Image + Raster (Container)
HeroNutze die komplette BildschirmgrößeContainer
IconNutze ein IconÜberschrift | Button
ImageDarstellung eines BildesImage
LoginFormErstellung eines Login-BereichsGutenberg: An- und Abmelden
MapDarstellung einer Google-KartePlugin: | Code als iframe
MenuDarstellung eines Website-MenüsGutenberg: Navigation
Number CounterAnimierter ZählerPlugin: Hurry Timer
PersonFoto, Biographie & soziale ProfileContainer + Text + Image + Button
PortfolioEinzelnes Portfolio RasterRaster / Container
Portfolio Carouselseitenweiten Portfolio-DarstellungQuery Loop
Post NavigationDarstellung weiterer BeiträgeElement: Navigation
Post SliderSlider zur Darstellung einzelner BeiträgeQuery Loop + Container + Tabs
Post TitleAnzeige dynamischer BeitragstitelQueryLoop
Pricing TablesDarstellung verschiedener Preistabellen zum besseren VergleichContainer
SearchDarstellung einer SucheGutenberg: Suchen
SidebarAnzeige einer Sidebar mit WidgetsGeneratePress-Einstellung: Sidebar
SliderSlider mit Inhalten, Buttons und BildernPlugin: beispielsweise MetaSlider
Social FollowLink zu sozialen ProfilenÜberschriften / Button
TabsInhalte in Tabs darstellenTabs
Testimonialsoziale Bestätigungen anzeigenContainer
TextText & ÜberschriftenGutenberg: Absatz | GP: Überschrift
ToggleInhalte anzeigen und verstecken beim KlickAccordion
VideoVideos von anderen Platformen darstellenGutenberg: YT-Block, Vimeo-Block & HTML5-Block
Video SliderVideos in einer Slideransicht anzeigenPlugin: 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[+]

Erkunde weitere Beiträge

Schreibe einen Kommentar