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

Eine gute Nachricht vorweg: Elementor selbst hat ordentlich aufgeräumt. Seit Version 3.21 lädt der Page Builder von Haus aus deutlich schlankeren Code als noch früher. Der alte Tenor „Elementor ist von Natur aus langsam“ stimmt also nur noch zum Teil. Trotzdem holst du mit den folgenden Kniffen nochmal richtig was raus.

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. Übrigens: GTMetrix läuft mittlerweile komplett auf Google Lighthouse (das alte YSlow ist abgeschaltet). Du bekommst also einen „GTmetrix Grade“ mit Speed- und Structure-Score. Das Wasserfall Diagramm gibt’s aber natürlich weiterhin – und genau das brauchen wir.

Verlass dich beim Messen aber nicht nur auf Labordaten. Schau dir zusätzlich die echten Felddaten an: Die PageSpeed Insights (mit CrUX-Daten von echten Nutzern) und der Core-Web-Vitals-Bericht in der Google Search Console zeigen dir, wie deine Seite wirklich bei deinen Besuchern performt. Ein hübscher Laborwert allein reicht heute nicht mehr.

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.

Übrigens bieten wir als spezialisierte WordPress-Agentur für Berlin nicht nur die Performance-Optimierung, sondern erstellen auch maßgeschneiderte Websites. Entdecke unser Webdesign Berlin.

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’s Performance-Optionen

Hier hat sich seit den Anfangstagen einiges getan. Die wichtigsten Beschleuniger – Improved Asset Loading und Improved CSS Loading – sind seit Elementor 3.21 fest im Core verbaut, standardmäßig aktiv und gar nicht mehr abschaltbar. Du musst sie also nicht mehr mühsam unter „Experiments“ anhaken – sie laufen einfach. Die restlichen Schalter findest du unter Elementor → Einstellungen → Performance bzw. weiterhin unter Experiments.

Damit du weißt, was da im Hintergrund werkelt, hier kurz die wichtigsten Optionen erklärt:

Optimized Markup (früher „Optimierte DOM-Ausgabe“) – vermeidet eine übermäßige DOM-Größe in PSI, indem unnötige div-Wrapper entfernt werden. Diese Option ist weiterhin optional. Achtung: Sie kann bestehende Seiten optisch zerschießen – aktiviere sie also am besten nur bei neuen Websites und prüfe danach genau, ob noch alles passt.

Improved Asset Loading – Behebt das „Reduzieren Sie nicht verwendetes JavaScript“ im Pagespeed Tool. Indem Widget-JS-Handler und Swiper dynamisch geladen werden, wenn sie tatsächlich verwendet werden. Läuft heute fest im Core.

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. Ebenfalls fester Bestandteil des Cores.

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 WP-Space (auf WordPress-Speed getrimmt, ab ca. 15 €/Monat), 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 (gratis bis 100 Bilder/Monat). Gute Alternativen sind EWWW oder Imagify.
• AVIF & WebP Bildformat – von Google empfohlene Bilder der nächsten Generation. WordPress unterstützt seit Version 6.5 auch AVIF nativ – das ist nochmal rund 50 % kleiner als WebP. Am besten lieferst du AVIF mit WebP als Fallback aus.
• 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 (Single-Lizenz aktuell 59 $/Jahr). 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 (RUCSS ist längst Standard).

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). Die Performance-Optionen von Elementor sollten 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 (ab 29,95 $/Jahr für eine Seite; die kostenlose Alternative 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. (Kleiner Hinweis: Das Plugin wird nur noch sporadisch gepflegt – prüf also kurz, ob es mit deiner Elementor-Version sauber läuft.)

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. (Elementor hat mit „Hello Biz“ inzwischen noch eine Einsteiger-Variante nachgelegt – fürs reine Speed-Setup bleibt das schlanke Hello Elementor aber die erste Wahl.)

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.

Behalte die Core Web Vitals im Blick (LCP, INP, CLS)

Die Google Core Web Vitals sind das Maß der Dinge, wenn es um die echte Nutzererfahrung geht. Drei Werte musst du dabei im Auge behalten:

• LCP (Largest Contentful Paint) – wie schnell das größte Element sichtbar ist. Ziel: unter 2,5 Sekunden.
• INP (Interaction to Next Paint) – wie schnell deine Seite auf Interaktionen reagiert. Ziel: unter 200 Millisekunden.
• CLS (Cumulative Layout Shift) – wie stark sich dein Layout beim Laden verschiebt. Ziel: unter 0,1.

Wichtig zu wissen: Der alte FID-Wert (First Input Delay) wurde im März 2024 durch INP ersetzt. Und das ist gerade für Page-Builder-Seiten ein echtes Thema. Denn während FID nur die allererste Interaktion gemessen hat, misst INP jede Interaktion auf deiner Seite. JavaScript-lastige Elementor-Seiten werden dadurch deutlich strenger bewertet.

Was kannst du dagegen tun? Vor allem JavaScript reduzieren und verzögern. WP Rocket hat dafür die Option „Delay JavaScript Execution“ – damit werden Skripte erst geladen, wenn der Nutzer mit der Seite interagiert. Verzögere außerdem alle Third-Party-Skripte wie Chat-Widgets, Google Maps oder Tracking-Codes. Das sind oft die größten INP-Killer.

Nutze Transform und Translate für Animation

Beim CLS-Wert geht es darum, 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 unter PHP 8.2 liegt, solltest du diese unbedingt bei deinem Webhoster updaten. PHP 7.4 wird seit Ende 2022 gar nicht mehr mit Sicherheitsupdates versorgt – das ist also nicht nur langsam, sondern auch ein Sicherheitsrisiko. WordPress empfiehlt mittlerweile PHP 8.3 oder höher, der Sweet Spot für Speed liegt aktuell bei PHP 8.4.

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