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

Schreibe einen Kommentar zu minusculus Kommentieren abbrechen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.
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

Vorstellung der verschiedenen Elementor Templates mit Vor- und Nachteilen. Außerdem der Unterschied zwischen WordPress und Elementor Templates sowie der Grund, warum du die Elementor Vorlagen mit Bedacht einsetzen solltest.

Aktualisiert am 25.07.2020

Zum Beitrag »