Black Friday Sale: Entdecke die besten Deals und spare bis zu 90%

4.9
(23)

Elementor richtig schnell machen – so geht’s!

Elementor ist wohl der beliebteste Page Builder für WordPress. Leider kommen durch die vielen tollen Funktionen und Addons auch viel Code auf deine WordPress Website.

In diesem Artikel werde ich dir zeigen, wie du Elementor schneller machen kannst und trotz des großartigsten Page Builders, Google PageSpeed Scores im oberen 90er Bereich erreichen kannst. Und natürlich kannst du mit diesen Tipps auch die berüchtigten Core Web Vitals mit Bravour bestehen.

Eine kleine Geschichte zum Anfang: Nachdem ich auch Kopf & Stift auf Elementor umgestellt hatte, ist mir der schlechte Ladezeit erst gar nicht aufgefallen. Dennoch habe ich es später an den fallenden Rankings gemerkt: Irgendwas stimmt nicht!

Nach einer langen Recherche (in vielen Foren wird Elementor als langsamer Page Builder unrecht getan) überlegte ich schon zum Kadence Theme zu wechseln. Das soll angeblich die Wordpress Websites ganz schnell machen. Und dann stieß ich auf WPcrafter.com.

Auch dieser Herr verwendet Elementor und hatte einen Pagespeed Score von 97. Es musste also doch gehen: Elementor mit blitzschnellen Ladezeiten. Und so begann meine Odyssee auf den Weiten des Pagespeed Ozeans. Schließlich waren da auch noch die neuen Google Core Web Vitals. Und das beliebteste Page Builder Plugin kann auch diese ohne weiteres meistern.

Mittlerweile habe ich einen Pagespeedscore von 92 (es würde auch mehr gehen) und kann trotzdem die Vorzüge von Elementor nutzen.

Aber nun möchte ich dir zeigen, wie auch du Elementor und Wordpress schneller machen kannst.

Performance Optimierung für Elementor

Bevor wir anfangen die Ladezeit von Elementor zu verbessern, noch ein paar grundsätzliche Überlegungen. Nicht jede WordPress Installation ist gleich. Ein einfaches Speed Plugin kann dir nur begrenzt helfen.

Deshalb solltest du genau schauen, was bei deiner Website geladen wird. Und wann. Hierfür helfen dir auch die Wasserfall Diagramme der Online Tools GTMetrix und Webpagetest.org.

Klar sind out of the box Lösungen wie WP Rocket ziemlich bequem und komfortabel. Die 90-Grenze beim Pagespeed wirst du damit allein aber nicht knacken. Aber keine Sorge: Ladezeit Optimierung kann auch Spaß machen.

Hier also die Tipps & Tricks die du beachten solltest, um die Ladezeit mit Elementor zu verbessern.

Deaktivere unnütze Plugins

Das mag jetzt selbstverständlich klingen, aber Plugins sind der Hauptgrund warum deine WordPress Seite lange Ladezeiten hat. Auch ich musste bei genauem Hinsehen feststellen, dass ich viel zu viele Plugins hatte. Deshalb solltest du versuchen, Funktionen möglichst mit den internen Elementor Funktionen abzudecken. Ich hatte beispielsweise Gravity Forms installiert…und nutze nun das Formular von Elementor. Dies wird schließlich sowieso immer geladen.

Um zu sehen, welches Plugin wann geladen wird, kannst du dir die Wasserfall Diagramme auf GTMetrix anschauen. Natürlich solltest du vorher Caching und andere Speed Plugins deaktivieren. Wir möchten ja die Hauptwebseite sehen und nicht schon irgendwelche gecachten und minifzierten CSS-Dateien. Meist kannst du schon anhand der Dateinamen sehen, zu welchem Plugins die Dateien gehören.

Anhand der Länge der jeweiligen Balken im Wasserfall Diagramm hast du gleich ein Anhaltspunkt wo du anfangen solltest deine Performance zu optimieren.

 

Aktiviere Elementor Experiments

Im Dashboard deiner WordPress Installation klickst du auf Elementor → Einstellungen → Experiments

Danach setzt du die Optionen wie im folgenden Screenshot:

Optimierte DOM-Ausgabe – vermeidet eine übermäßige DOM-Größe in PSI, indem unnötige div-Wrapper (elementor-inner, elementor-row und elementor-column-wrap) entfernt werden

Improved Asset Loading – Behebt die „Reduzieren Sie nicht verwendetes JavaScript“ im Pagespeed Tool. Indem Widget-JS-Handler und Swiper dynamisch geladen werden, wenn sie tatsächlich verwendet werden. Elementor selbst dazu: „Damit dieses Experiment richtig funktioniert, müssen Sie die Version Elementor Pro 3.0.9 und höher verwenden.“

Improved CSS Loading – Behebt „Reduzieren Sie nicht verwendete CSS“ und „Ressourcen beseitigen, die das Rendering blockieren“ in PageSpeed Insights. Widget-CSS und Animationen werden nur geladen, wenn sie tatsächlich auf der Seite verwendet werden, und gleichzeitig Inline-CSS anwenden. Durch die Aktivierung wurden im Elementor-Test 177 KB gespart.

Font-Awesome Inline – Font Awesome Icons werden inline als SVGs geladen, ohne die gesamte Bibliothek zu laden, wodurch verhindert wird, dass Anfragen von zusätzlichen CSS- und Font-Dateien auf deiner Website geladen werden.

Nutze schnelles Wordpress Hosting

Du kannst an deiner Elementor Website so viel optimieren wie du willst – wenn dein Webspace langsam ist, nützen die hier vorgestellten Optimierungs-Tipps dir nichts. Da du WordPress verwendest, kannst du auch speziell auf WordPress optimierten Webspace verwenden.

Über die besten Wordpress Hoster habe ich bereits in meinem Blog geschrieben. Ich würde dir daher Raidboxes, All-Inkl (kein expliziter WP-Hoster) oder Hostpress empfehlen.

Falls du bei WebGo, HostEurope, 1und1 oder Strato bist, solltest du darüber nachdenken zu einem besseren Webhoster zu wechseln. Dein Wordpress PageSpeed wird es dir danken!

Optimiere deine Bilder (mit einem Plugin)

Es gibt verschiedene Dinge, die du beim Einsatz von Bildern beachten solltest:

  • Bilder mit der richtigen Größe – Vermeide übergroße Bilder (verkleinere sie).
  • Bilder komprimieren – verwende ein Bildoptimierungs-Plugin wie ShortPixel.
  • WebP Bildformat – von Google empfohlene Bilder der nächsten Generation. (???? Tutorial)
  • Lazy Load von Bildern, Iframes, Videos – mit verschiedenen Performance-Plugins. Unbedingt für Bilder Above the fold deaktivieren.
  • EXIF-Daten aus Bildern entfernen – entfernt nutzlose Daten aus Bildern wie Datum, Uhrzeit, Ort und Kameraeinstellungen, wenn ein Foto aufgenommen wurde. Wird von den meisten Bildoptimierungs-Plugins durchgeführt.
  • Gib die Bildabmessungen an – pass auf, dass im HTML jedes Bildes eine Breite und Höhe angegeben ist. WP Rocket hat eine Option zum Hinzufügen fehlender Bildabmessungen in den Medieneinstellungen.
  • Verwende adaptive Bilder – stelle mobilen Nutzern kleinere (adaptive) Bilder bereit. Eines der wenigen Dinge, die du tun kannst, um die Ladezeiten von Mobilgeräten zu verbessern. Dies erfolgt über ein adaptives Bilder-Plugin.

Schriften lokal hosten und vorladen

Du kannst Google Webfonts (und natürlich auch andere Webfonts) lokal auf deiner Website speichern. Dadurch vermeidest du, dass deine Website die Webfonts von fonts.gstati.com lädt. Das hat natürlich auch datenschutzrechtlich einige Vorteile. Damit brauchst du auch kein Cookie-Hinweis für deine Schriften. Zum anderen wird zusätzlicher Code von Google Fonts vermieden und du kannst die Fonts auch preloaden. Das bedeutet, dass der Browser die Schriften so schnell wie möglich lädt.

Um eigene Fonts in Elementor einzubinden, gibt es mittlerweile eine Funktion. Gehe hierzu in deinem WordPress Dashboard auf Elementor → Benutzerdefinierte Schriftarten. Mit dem kleinen Tool Google-Webfonts-Helper kannst du dir die Google Schriften in den benötigten Formaten herunterladen. Danach kannst du sie in Elementor laden. Achte auch darauf, dass du nun unter den Globalen Fonts (in den Elementor Einstellungen) auch deine hochgeladenen Fonts ausgewählt hast.

Falls du es nicht schaffst Google Webfonts in Elementor zu deaktivieren, kannst du auch diesen kleinen Code in die functions.php deines Child-Themes integrieren:

add_filter( ‚elementor/frontend/print_google_fonts‘, ‚__return_false‘ );

Damit werden Google Webfonts generell deaktiviert.

Kleiner Tipp: Mit folgendem Code in der functions.php deines Child-Themes setzt du die Eigenschaft font-display auf swap und sparst so auch ein paar Millisekunden:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

Achte darauf, dass deine benutzerdefinierten Schriften in dem Ordner liegen, der im Code-Snippet angegeben ist. Beim Einbinden der benutzerdefinierten Schriften über Elementor werden die Schriften automatisch in diesen Ordner geladen.

Konfiguriere ein Performance Plugin

Der wohl wichtigste Punkt auf dieser Liste. Ohne Minifizierung, Caching und versetztes Laden läuft gar nichts. Deshalb solltest du dir WP Rocket zu legen (oder eine anderes WordPress Performance Plugin).

Mein Favorit ist aber mit Abstand WPRocket. Das kostet dich zwar Geld – spart dir aber viel Zeit. Es ist eine (fast) All-in-one Lösung. Daher ist WPRocket weit mehr als ein Caching Plugin. Mittlerweile entfernt es sogar unnützes CSS automatisch aus deinem Code.

Wie du WP Rocket mit Elementor einrichtest erfährst du hier. Dabei solltest du immer testen. Das dauert eine Weile. Dennoch sind die allgemeinen Anleitungen für Elementor mit Wp Rocket nicht immer auf den Spezialfall passend.

Probiere einfach die jeweiligen Häkchen unter Einstellungen → WP Rocket → Dateioptimierung. Hier findest du die stärksten Tools um deine WordPress Website mit WP Rocket zu optimieren.

Bei Perfomance Plugins geht es immer um die Minifizierung deiner CSS-Datein, ein starkes Caching und das versetzte Laden deiner JavaScript-Dateien.

Achte darauf, dass du immer in einem Inkognito-Browserfenster (also ohne Browser Caching) prüfst ob deine Website noch fehlerfrei ist.

Entferne Elementor CSS und JavaScript

Elementor, Elementor Pro und die meisten Elementor-Plugins fügen deiner WordPress Webseite zusätzliches CSS und JavaScript hinzu. Viele Lighthouse-Elemente beziehen sich auf CSS und JavaScript (ein wichtiger Grund, warum viele Webseiten, die große Page Builder verwenden, in den Google Core Web Vitals abgestraft werden). Das Menü „Experiments“ von Elementor sollte dabei helfen, die CSS- und JavaScript-Dateigröße zu reduzieren. Trotzdem solltest du ein Plugin verwenden, dass CSS und anderen Code deaktiviert.

Mit dem Plugin Perfmatters (die kostenlose Variante wäre Asset CleanUp) kannst du auswählen, welcher Code auf welcher Unterseite geladen wird. Ich mag Perfmatters – mit Asset CleanUp geht’s aber auch.

Nachdem du Perfmatters installiert hast, findest du diese Option hier: Einstellungen → Perfmatters → Optionen → Assets → Skriptmanager aktivieren

Wenn du dir nun im Browser eine Unterseite deiner Webseite anschaust, findest du oben die Option Skript-Manager. Du kannst nun darauf klicken und für die jeweiligen Seiten einzelnen die Skripte deaktivieren. Zudem bietet Perfmatters dir auch die Möglichkeit, Skript und Assets nach Beiträgen, Custom Post Types oder Pages zu deaktivieren. Beachte hierzu die linke Spalte im Skript-Manager.

Nun kannst du folgende Elemente (für deine gesamte Website) deaktivieren:

  • elementor-sticky (falls du keinen Sticky Header benutzt)
  • swiper.js (falls du keinen Elementor Slider benutzt)
  • elementor-dialog (falls du keine Pop-Ups verwendest)
  • share-link (falls du keine Lightbox verwendest)
  • elementor-animations (falls du keine Animation verwendest (Slide up, Slide down, etc))
  • Elementor Icons (falls du keine Elementor Icons verwendest)

 

Hier noch ein paar Tipps, welche Skripte und Assets deaktiviert werden können:

  • Deaktiviere das Kontaktformular überall (außer auf deiner Kontaktseite)
  • Deaktiviere dein Social Sharing Plugin überall (außer in deinen Blogbeiträgen)
  • Deaktiviere das Tabellen Plugin (außer dort, wo du Tabellen benutzt)
  • Deaktivere WooCommerce (außer auf deinen Shop Seiten)
  • Deaktivere alle Funktionalitäten, die von einem Plugin kommen (außer auf den Seiten wo du es einsetzt)

Optimiere dein Layout im Page Builder

Jede Spalte und jedes Widget in Elementor verbraucht Code. Und Code kostet Ladezeit. Also solltest du dir deine WordPress Unterseiten nochmal genau anschauen. Hier geht es auch um Content – der spielt eine große Rolle bei der Performance Optimierung.

Zusätzlich erfährst du in diesem Video, wie du Widgets und Spalten einsparen kannst. Leider ist es auf Englisch – die 15 Minuten sind aber sehr gut investierte Zeit.

Ein weiteres sehr empfehlenswertes Video zur Layout Optimierung für Elementor ist dieses:

Programmiere deinen Header und Footer

Dieser Tipp ist nur für absolute Nerds geeignet. Indem du nicht den Theme Builder nutzt um dein Header und Footer zu bauen sondern ein Template (also footer.php und header.php im Ordner deines Child-Themes) sparst du wichtige Millisekunden auf JEDER Unterseite. Damit machst du WordPress schneller.

Falls du mit diesem Gedanken spielst, kannst du auch versuchen einen Wordpress Freelancer bei Fiverr zu erwischen. Der könnte dann deinen Elementor Header und Footer in Code nachbauen. Ich habe leider keine Zeit für solchen Kleinkram ;)

Benutze möglichst wenig Elementor Addons

Klar: Elementor Addons sind ein tolles Mittel deiner Webseite mehr Design und Interaktivität zu geben. Allerdings verwenden diese Addons auch zusätzlichen Code.

Auch ich war am Anfang absolut euphorisch und habe mir erstmal fünf verschiedene Elementor Addons installiert. Die Ernüchterung kam dann beim PageSpeed Test.

Also baute ich die Elementor Addons stückweit zurück. Die meisten Sachen lassen sich mit den Grundwidgets von Elementor und Elementor Pro umsetzen.

Ein tolles Tool zum Aufspüren von nicht genutzten Elementor Addons ist übrigens Widget Detector for Elementor. Dieses Plugin zeigt dir an, wo du welches Widget eines Addons verwendest. Danach kannst du das Plugin wieder deaktivieren.

In Elementor Addons: Deaktiviere ungenutze Widgets

Du musst also unbedingt ein Elementor Addons benutzen und kannst gar nicht darauf verzichten?

Viele Elementor Addons (alle außer ElementsKit) bieten dir die Möglichkeit, nicht genutzte Module (Widgets) zu deaktivieren. Damit wird auch der damit verbundene Code nicht mehr geladen und du sparst dir wieder ein paar Millisekunden beim Pagespeed.

Nutze Elementor’s Hello Theme

Das hauseigene WordPress Theme Hello kommt ohne irgendwelchen großen Skripte, Code oder Styling. Es wurde für Elementor entwickelt. Deshalb solltest du defintiv kein riesen Theme nehmen sondern ein eher kleineres Theme.

Gute Alternativen zum Hello Theme sind auch das Astra-Theme und GeneratePress. Bei beiden Themes reicht die kostenlose Variante.

Verzichte auf große Elemente auf mobile Devices

Wenn es um die Ladezeit Optimierung geht, geht es meistens um den niedrigen mobilen Score. Am Desktop ist meist alles schick – aber auf dem Smartphone gibt’s meist keine Bestpunkte.

Deshalb solltest du deine Website immer im responsive Mode von Elementor überprüfen und auf große Content-Elemente verzichten. Die schlagen auf die Performance.

Ersetze beispielsweise den Slider durch ein Hintergrundbild. Verzichte auf Bilder, die nicht unbenötigt nötig sind und deinem Content keinen inhaltlichen Mehrwert bieten. Denke dabei auch an den Nutzer deiner Webseite.

Google hat den Grundsatz mobile first. Deshalb solltest du dich auf den mobilen Score fokussieren.

elementor pagespeed

Nutze Transform und Translate für Animation

Seit den Google Core Web Vitals gibt es den Cumulative Shift Layout (CLS) Wert. Damit wird gemessen, wie sehr sich dein Layout beim Laden verschiebt. Das ist (laut Google) schlecht für die User Experience. Denn der Nutzer will einen Button anklicken und auf einmal springt der Button weiter nach unten (oder nach rechts). Nicht Gut!

Animationen, die nicht Transform oder Translate nutzen, können solche Layout Verschiebungen verursachen. Das Elementor Addon Happy Addons kann CSS-Transform.

Aktualisiere deine PHP-Version

Um zu sehen, welche PHP-Version du nutzt, gehe auf Elementor → System Info. Hier findest du unter Server Enviroment deine aktuelle PHP-Version.

Falls deine PHP-Version nicht PHP 7.4 oder höher ist, solltest du diese unbedingt bei deinem Webhoster updaten.

Aber Achtung: Bevor du das tust, solltest du unbedingt ein Backup deiner Website machen. Das geht zum Beispiel mit Duplicator (oder dein Wordpress Webhoster hat eine eigene Funktion dafür).

Bewerte diesen Beitrag:

Durchschnittliche Bewertung 4.9 / 5. Anzahl Bewertungen: 23

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Rafael Luge
Rafael Luge
Intermedialer Designer (MA) & Gründer von Kopf & Stift Meine Leidenschaft sind Design und Wordpress. Und erfolgreiche Websites. Auf meinem Blog gebe ich dir Tipps, wie auch du deine Website erfolgreicher machst.
Schreibe einen Kommentar