„Dein Weg zum Online Business ist WordPress. Dein Navi ist WPC.“

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

5/5 - (3 votes)
Vielen Dank fürs Teilen dieser Seite

4 Antworten

  1. Hallo Danijel,
    ich gehöre zu denjenigen Blogger, die Gutenberg und alles, was mit WYSIWYG-Editoren zusammen höngt. lange ignoriert haben. Jetzt lese ich mich gerade ein, denn mittlerweile scheint das alles soweit gediehen, dass es sich lohnt, die „Zukunftsmethode“ der Seitenentwicklung zu lernen.
    Da eine erste Entscheidung die für einen Editor ist, finde ich deinen Artikel höchst hilfreich – danke für die viele Arbeit!
    Was mich wundert: du schreibst, eine Tabelle hättest du mit Gutenberg nicht machen können. Das hab ich mal schnell gegoogelt und finde so durchaus Gutenberg-Tabellenblocks. Sind die irgendwie nicht ok oder waren sie zur Zeit dieses Artikels noch nicht da?

    Ansonsten: Auch dieser Artikel hängt den Punkt „Performance“ sehr sehr hoch – und jedes Mal, wenn ich mich in dieses Thema vertiefe, stoße ich auf unzählige Aspekte, bin fasziniert und nehme einige Änderunge an meinen Blogs vor.
    Bis ich zwischenzeitlich mal schaue, was in einem meiner Themenbereiche (Garten) auf Seite 1 der Google-Ergebnisse so abgeht. Das ist dann bezüglich der Relevanz der Performance für das Ranking schon mal SEHR SEHR ernüchternd!

    Da stehen nämlich auf Platz 2 und 3 jenes Suchbegriffs, mit dem ich vergleiche, Blogs mit einer Pagespeed-Performance mobil von 44% und 31%, sowie 72% und 55% am Desktop – na wow! (meins 88/96%).
    Das relativiert aus meiner Sicht die Bedeutung der Performance doch deutlich, vermutlich sind andere Faktoren wie Verweilzeit, Abrufzahlen etc. und ein vielfaches wichtiger.

    Das sage ich jetzt nicht, um das Bemühen um gute Performance runter zu machen oder gar die Relevant so toller Artikel darüber! Sondern eher als Trost für alle, die – warum auch immer – ihre Probleme mit dem Erreichen einer Top-Performance haben.
    Werde hier gerne mehr lesen, eine tolle Lernquelle!

    1. Hallo Claudia,

      zunächst einmal vielen Dank für deinen ausführlichen Kommentar!

      Das Problem bei Tabellen ist, dass es schwierig ist, diese richtig responsive darzustellen. Zum Zeitpunkt der Artikelveröffentlichung gab es aus meiner Sicht keine zufriedenstellende Lösung für den Gutenberg Editor. Aber seit dem hat sich einiges getan und es gibt mittlerweile richtig gute Drittanbieter Plugins mit tollen Gutenberg Blocks.

      Ich finde es toll, wie du Sachen hinterfragst, selbst eigene Tests durchführst und deine eigene Schlussfolgerung daraus ziehst. Ich stimme dir auch vollkommen zu, Performance ist nur einer der Rankingfaktoren von Google. User Signals und Content Relevanz stehen meiner Meinung nach auch noch vor der Performance. Das Problem heutzutage ist, dass man kaum noch einzigartigen Content im Internet findet. Fast jedes Thema wurde in einer ähnlichen Form auf einer anderen Website schon veröffentlicht. Und gerade wenn man so einen Content anbietet, dann entscheiden auch andere Rankingfaktoren wie eben die Performance.

      Auf der anderen Seite beeinflusst die Performance auch wiederum die User Signals und ist damit nicht nur ein direkter sondern auch ein indirekter Rankingfaktor. Und die Entwicklung zeigt, dass die Rankingrelevanz der Performance in den kommenden Jahren noch zunehmen wird.

      Deswegen macht es aus meiner Sicht schon Sinn sich damit zu beschäftigen. Aber wer einen einzigartigen Content anbietet, muss wahrscheinlich nicht die 100% bei GTmetrix und Co. erreichen 🙂

      Schöne Grüße, Danijel

  2. 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. 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

Schreibe einen Kommentar

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 »