Elementor vs. Gutenberg Performance Vergleich - Beiträge lieber nicht mit Elementor erstellen
WPC - Dein WordPress Blog

Elementor vs. Gutenberg – Beiträge lieber NICHT mit Elementor erstellen

Warum du deine Blog Beiträge lieber NICHT mit Elementor erstellen solltest! Performance Vergleich Elementor vs. WordPress Editor.

In meinem Beitrag Elementor Templates bin ich bereits auf den Performance Verlust eingegangen, der durch die Verwendung von Elementor Vorlagen entsteht. Im vorliegenden Beitrag wollen wir das Thema Elementor Performance bei der Erstellung von Blog Beiträgen noch mal genauer unter die Lupe nehmen.

Wir werden uns die unterschiedlichen Arten ansehen, wie man einen Artikel erstellen kann. Jede einzelne dieser Erstellungsmethoden werden wir anschließend hinsichtlich der Ladezeit überprüfen. Außerdem möchte ich dir gerne zeigen, warum es aus meiner Sicht nicht sinnvoll ist, die Blog Beiträge mit dem Elementor Editor zu erstellen.

Gutenberg vs. Elementor Performance Test – Beste Methode für Beiträge

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Elementor Tutorial über die beste Methode, einen Blog Beitrag in WordPress mit und ohne Elementor zu erstellen (aus Performance Sicht).

Die Erkenntnisse und die Performance Ergebnisse aus diesem Beitrag lassen sich übrigens auch auf andere Seiten übertragen und gelten nicht nur für Beiträge.

„Destiny is all“

Wir möchten das berühmte Zitat aus der Netflix TV Serie „The Last Kingdom“ ein wenig passender formulieren, wenn es um den Erfolg einer Website geht:

„Performance is all“

Warum ist die Performance einer Website so entscheidend?

Dies ist kein Beitrag über Performance Optimierung. Deshalb fasse ich mich an dieser Stelle kurz: Eine gute Performance der Website ist entscheidend, weil…

  • …sie zu mehr Umsatz durch zufriedene Besucher führt.
  • …sie dafür sorgt, dass die Website besser und schneller indexiert wird.
  • …sie SEO Vorteile durch positive User Signale bietet.
  • …sie ein direkter Ranking-Faktor bei Google ist.

Wie du sehen kannst, ist die Performance sehr stark an den SEO Erfolg und an den Gesamterfolg einer Website gekoppelt. Deshalb ist es extrem wichtig, die Ladezeiten einer Website so weit wie möglich zu optimieren. Sehen wir uns an, welche der folgenden Möglichkeiten, einen Beitrag zu erstellen, aus Performance Sicht die sinnvollste ist.

5 Wege, einen Blog Beitrag zu erstellen

Ein Beitrag in WordPress mit (und ohne) Elementor kann auf 5 verschiedene Arten entstehen:

  1. Mit dem WordPress Editor ohne Elementor
  2. Mit dem WordPress Editor und Elementor Templates über Shortcodes
  3. Mit dem WordPress Editor und Single Post Template
  4. Mit dem Elementor Editor (Elementor Widgets)
  5. Mit dem Elementor Editor (Elementor Widgets) und Single Post Template

Die beste Methode, einen Beitrag zu erstellen (aus Performance Sicht)

Welche Methode ist nun aus Performance Sicht die beste, um einen Blog Artikel zu erstellen? Dazu habe ich auf einer Testseite jeweils denselben Beitrag auf die verschiedenen Arten erstellt und die jeweilige URL des Artikels bei GTmetrix getestet. Das ist das Ergebnis:

1. Mit dem WordPress Editor ohne Elementor

Bei dieser Methode verzichten wir komplett auf die Anwendung von Elementor. Den Beitragsinhalt erstellen wir nur mit dem WordPress Editor.  Hier erhalten wir das beste Performance Ergebnis:

Performance Test Beitrag mit WordPress Editor Gutenberg und ohne Elementor erstellt
Performance Test Ergebnis für den Beitrag mit WordPress Editor Gutenberg und ohne Elementor

Alles ist im grünen Bereich: Der Test-Beitrag wird in 1.9 Sekunden geladen, hat eine Größe von 105 kB und stellt 11 Requests an den Server. Aus Performance Sicht sind übrigens die beiden WordPress Editoren Gutenberg und der Classic Editor durchaus vergleichbar. Wir erhalten das gleiche Ergebnis, nachdem wir den Classic Editor aktiviert haben:

Performance Test Beitrag mit WordPress Classic Editor erstellt
Performance Test Ergebnis für den Beitrag mit WordPress Classic Editor (ohne Elementor)

2. Mit dem WordPress Editor und Elementor Templates über Shortcodes

Ich muss zugeben, das Ergebnis dieser Variante hat mich am meisten überrascht. Durch den Beitrag über die Elementor Templates wusste ich bereits, dass die Varianten „Single Post Template“ und „Elementor Widgets“ auf jeden Fall Performance Nachteile mit sich bringen. Deshalb hätte ich erwartet, dass die Verwendung des WordPress Editors mit vereinzelten Elementor Templates ein möglicher Kompromiss sei. Ein Kompromiss, der sowohl die Bedürfnisse nach guter Performance als auch die eigene Design-Wünsche zufriedenstellt. Das Performance Ergebnis ist jedoch relativ ernüchternd:

Performance Test Beitrag mit WordPress Editor Gutenberg und Elementor Template über Shortcode erstellt
Performance Test Ergebnis für den Beitrag mit WordPress Editor Gutenberg und einem Elementor Template mit Hilfe des Shortcodes

Zu Elementor’s Verteidigung muss ich dazu sagen, dass ich für das Template das „Call To Action“-Widget verwendet habe, welches zu den aufwendigeren Elementen gehört. Dennoch werden hier 16 zusätzliche Elementor Dateien geladen! Ich kann einfach nicht glauben, dass all diese Dateien erforderlich sind, um ein einziges Call-To-Action Widget anzuzeigen.

Ich möchte an dieser Stelle nicht zu viel verraten, doch das ist trotzdem die aus meiner Sicht beste Variante, um einen Blog Beitrag zu erstellen. Warum? Gleich mehr dazu.

Übrigens, falls du deine Beiträge auf diese Weise erstellen möchtest, habe ich noch einen Plugin Tipp für dich: Das kostenlose Plugin Elementor Blocks for Gutenberg ermöglicht es dir, ganz einfach die erstellten Elementor Templates in den Gutenberg Editor einzusetzen.

3. Mit dem WordPress Editor und Single Post Template

Für diese Erstellungsmethode kommt das Single Post Template von Elementor Theme Builder* zum Einsatz. Jedoch wird der Beitragsinhalt mit dem WordPress Editor erstellt. Als treuer WPC Leser 🙂 kennst du bereits das Ergebnis:

Performance Test Beitrag mit WordPress Editor Gutenberg und Elementor Single Post Template erstellt
Performance Test Ergebnis für den Beitrag mit WordPress Editor Gutenberg und Elementor Single Post Template

Das Ergebnis ist zwar etwas besser als die Shortcode Variante aber immer noch deutlich schlechter als die Option ohne Elementor.

4. Mit dem Elementor Editor (Elementor Widgets)

Ähnliche Performance Verluste treten auch beim Beitrag auf, der mit dem Elementor Editor bzw. mit Elementor Widgets (Button: „Mit Elementor bearbeiten“) erstellt wurde.

Performance Test Beitrag mit Elementor Editor Elementor Widgets erstellt
Performance Test Ergebnis für den Beitrag mit Elementor Editor (Elementor Widgets)

5. Mit dem Elementor Editor (Elementor Widgets) und Single Post Template

Als letztes überprüfen wir die Methode, bei der der Artikel vollständig mit Elementor erstellt wird. Für das Aussehen verwenden wir ein Single Post Template und auch der Beitragsinhalt wird mit Elementor Widgets erstellt. Hier ist das Ergebnis:

Performance Test Beitrag mit Elementor Editor Elementor Widgets und Single Post Template erstellt
Performance Test Ergebnis für den Beitrag, der mit den Elementor Editor (Elementor Widgets) und einem Single Post Template erstellt wurde

Alle Beitrag Erstellungsmethoden im Performance Vergleich

In der folgenden Tabelle findest du eine Übersicht über die fünf Erstellungsmethoden:

Vergleich über die verschiedenen Methoden, um einen WordPress Artikel zu erstellen Elementor vs. Gutenberg
Vergleich über die verschiedenen Methoden, um einen WordPress Artikel zu erstellen – Elementor vs. Gutenberg

Zusätzlich zu den Werten aus dem Video Tutorial habe ich hier noch die Kennzahlen „Queries“ und „Memory Usage“ mit dem Plugin UsageDD ermittelt und aufgenommen. Die Kennzahl „Queries“ bezieht sich auf die MySQL Datenbank Abfragen, während die Zahl „Memory Usage“ eine Aussage darüber macht, wie schwer der Code auf der jeweiligen Unterseite ist. Weitere Details über Memory Usage in Verbindung mit Websites kannst du in diesem Artikel (Englisch) nachlesen.

Einen Test durchzuführen ist das eine, viel wichtiger ist jedoch, die richtige Schlussfolgerung daraus zu ziehen. Da alle vier Erstellungsmethoden mit Elementor einen ähnlichen Performance-Verlust mit sich bringen, könnte man zu dem Schluss kommen, dass es egal ist, welche Elementor Methode man verwendet. Das stimmt jedoch nicht, wie der folgende Abschnitt zeigt.

Beste Elementor Methode für einen Beitrag

Hast du bereits für dich entschieden, dass der WordPress Editor alleine keine Option ist? Möchtest du auf jeden Fall Elementor für deine Beiträge verwenden? Dann solltest du, im Sinne einer schlanken Website Architektur, zusätzlich zu einem Single Post Template nicht auch noch die Elementor Widgets für die Erstellung deiner Inhalte verwenden. Der folgende Screenshot zeigt die aufgeblähte DOM Struktur einer Webseite, die mit Elementor Widgets erstellt wurde.

Elementor vs. Gutenberg - Elementor Performance Nachteile - aufgeblasene DOM Struktur
Elementor vs. Gutenberg – aufgeblasene DOM Struktur

Performance vs. Design oder Gutenberg vs. Elementor

Für den oberen tabellarischen Vergleich hätte ich gerne das Elementor Tabellen Widget von UAE* verwendet. Allerdings kann ich nicht darüber predigen, bei der Erstellung von Blog Beiträgen auf Elementor zu verzichten und im selben Augenblick diesen Beitrag mit Elementor Widgets erstellen. Und genau das ist das Dilemma. Es scheint so, als müsste man sich als WordPress User entweder für eine tolle Performance oder für ein Top-Aussehen der Seite entscheiden. Denn wenn ich Gutenberg verwende, um meine Seite schnell zu machen, muss ich zwangsweise auch auf Elementor Widgets verzichten.

Schlussfolgerung

Basierend auf den Performance Test Ergebnissen ziehe ich für mich persönlich die folgenden Schlüsse:

1. Elementor lädt unnötige Dateien

Egal welche Methode man verwendet, um mit Elementor Beiträge zu erstellen, Elementor lädt immer einen gewissen Satz an Dateien. Hier besteht meiner Meinung nach auf jeden Fall Optimierungsbedarf. Es wäre schön, wenn nur die Dateien geladen werden würden, die auch wirklich benötigt werden.

2. Nur WordPress Editor ohne Elementor verwenden für tolle Performance

Um die Ladezeit einer Seite möglichst gering zu halten, ist die beste Variante, einen Beitrag zu erstellen, der reine WordPress Editor ohne den Einsatz von Elementor. Da jedoch die Design Optionen beim Gutenberg Editor sehr eingeschränkt sind (beim Classic Editor noch mehr), sehe ich die Methode mit dem WordPress Editor und die Verwendung vereinzelter Elementor Templates als eine vertretbare Alternative an. Im Sinne der Performance sollte man jedoch versuchen, soweit es geht Gutenberg Blöcke zu verwenden.

3. WordPress Editor und Single Post Template verwenden für gute Website Struktur und tolles Design

Aufgrund der aufgeblasenen DOM Struktur, die durch die Verwendung von Elementor Widgets entsteht, sollte der Einsatz von Elementor Editor für die Beitragserstellung vermieden werden. Deshalb ist meine favorisierte Methode, einen Beitrag zu erstellen, die Verwendung eines Elementor Single Post Templates für ein optimales Aussehen und der Einsatz von Gutenberg Blöcken für eine schlanke DOM Struktur und gute Performance.

Und nicht vergessen, es gibt noch andere Möglichkeiten die Performance einer WordPress Seite zu verbessern. Auf dem HostPress Blog findest du einen umfassenden Gastbeitrag von mir zum Thema WordPress Performance optimieren.

(*) = Affiliate Partner Links

Vielen Dank fürs Teilen dieser Seite

2 Kommentare zu „Elementor vs. Gutenberg – Beiträge lieber NICHT mit Elementor erstellen“

  1. m

    Hallo Danijel,
    ich bin ein wenig verwirrt.
    Habe mich auf Deiner Website belesen, habe Deine Udemy Lektionen bzgl Elementor und WP angeschaut (die sind wirklich gut!) Getestet, probiert, gelernt und nun dieser Artikel. Ich meine das nicht negativ. Auch dieser Artikel ist wieder super. Nur bringt es mich jetzt auch nicht weiter.
    Ich würde gern halt einfach nur ein f…..g Blog schreiben. Ohne gr0ßen Schnick-Schnack.
    Und jetzt bin ich mit Deinem Beitrag wieder auf LOS zurück gekehrt. Doch NICHT Elementor. Back to the roots Gutenberg? Bitte sag was, sonst geh ich wieder im Nymphenburger Park Rasen mähen.
    Grüße m

    1. D

      Hallo m,
      bei so viel Euphorie um Elementor wollte ich mit dem Beitrag mal wieder darauf aufmerksam machen, dass nicht alles Gold ist was glänzt. Auch der tolle Page Builder hat Optimierungspotentiale und diese liegen meiner Meinung nach ganz klar bei der Performance. Der Beitrag sollte im Idealfall den Elementor Usern helfen, die zur Verfügung stehenden Werkzeuge (Elementor & WP Editor) bei der Erstellung von Inhalten optimal einzusetzen. Für mich persönlich funktioniert der folgende Weg ganz gut: Ich erstelle mir mehrere Single Page Templates (bzw. Single Post Templates) für die Optik aber auch um einfach verschiedene Werbeanzeigen / Affiliate Banner passend zum Seiteninhalt auszuspielen. Für Seiten, bei denen ich kein aufwendiges Layout benötige, verwende ich den Gutenberg bzw. den Classic Editor von WordPress (das sind meistens Blog-Beiträge). Für alle Seiten, die aufwendiger gestaltet werden müssen (Landing Pages), kommen zusätzlich noch die Elementor Widgets zum Einsatz. Solche Seiten müssten normalerweise nachträglich noch optimiert werden, z. B mit dem Plugin Assets Cleanup. Aber ich muss leider zugeben, dass ich oft diesen wichtigen Schritt vernachlässige. Selbstverständlich kann der Performanceverlust, der durch Elementor entsteht, auch durch gutes Hosting, Bildoptimierung, Caching Plugins etc. ausgeglichen werden.
      Schöne Grüße, Danijel

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Related Posts

Ähnliche Beiträge

WordPress Performance optimieren
Website Performance
WordPress Performance optimieren

Ist deine Website zu langsam? Möchtest du die Performance deiner WordPress Website optimieren? Ich bin gerade dabei, einen Online Kurs über „Website Performance Optimierung“ zu

Zum Beitrag »
Elementor Templates Vorteile Nachteile Anwendung
Website Performance
Elementor Templates PRO & kostenlos

Das zweite Elementor Meetup in München am 16. April 2019 widmete sich dem Thema Elementor Templates. Dabei wurden die verschiedenen Template-Typen sowohl für die kostenlose

Zum Beitrag »