Wie kann man Elementor beschleunigen?

Header-Bild:ChatGPT

Du nutzt Elementor, hast ein ansprechendes Design, gute Inhalte, nur die Seiten laden quälend langsam?

Die Wahrheit ist: Elementor ist nicht das Problem – aber die Art, wie das Plugin  eingesetzt wird, kann eine Website ordentlich  ausbremsen. Zu viele Widgets, unnötige CSS-Dateien, schlechte Bildoptimierung oder falsche Performance-Einstellungen sorgen dafür, dass dein Page Builder mehr Ballast erzeugt als Nutzen bringt.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du typische Geschwindigkeitsbremsen identifizierst und gezielt beseitigst – ohne dein Design zu zerstören. Damit deine Website endlich das tut, was sie soll: schnell laden, gut ranken und Besucher überzeugen.

Leider stellte auch ich fest, dass Seiten, die ich mit Elementor erstellte, hinsichtlich Performance  gegenüber anderen Seiten ohne das Plugin mehr oder weniger deutlich abfielen. Letztere enthielten dazu viel mehr Content als Elementor-Seiten.

Hier ein Vergleich, den du gegebenenfalls auch  für dich auf Pagespeed Insights untersuchen kannst.

Seitenvergleich: mit und ohne Elementor

1. zurwebsite – meine Startseite mit Elementor

 

---

2. zurwebsite.de/elementor  – Unterseite ohne Elementor 

Neben Fonts, schlechter Bildkomprimierung  und Ladeproblemen durch Javascripts und CSS-Dateien Google gibt Google auch an mehreren Stellen Hinweise, die explizit Rendering-Blocker durch Elementor betreffen und irgendwie ins Gewicht fallen. Da ich aber kein ausgewiesener Coder bin, lasse ich weitere Details beiseite, Stattdessen gebe ich lieber  Informationen weiter, die ich an unterschiedlichen Stellen im Internet gefunden habe und für zweckdienlich halte.

Was wird empfohlen, um WordPress-Seiten mit Elementor schneller laden zu lassen?

Serverseitige Einstellungen

Bevor Optimierungen in Elementor oder WordPress greifen, muss die Serverbasis stimmen. Entscheidend ist zunächst die Leistungsfähigkeit deines Hosters – prüfe daher, welche PHP-Version aktiv ist, wie hoch das Memory Limit gesetzt ist und welche Ressourcen dein Tarif tatsächlich bereitstellt. Empfohlen wird der Einsatz von PHP 8.4 (stabile Version), da neuere PHP-Versionen deutlich effizienter und schneller arbeiten.

Da viele Hosting-Umgebungen standardmäßig nur ein Memory Limit von 40M bereitstellen, sollte dieses für moderne WordPress-Installationen auf 256M erhöht werden. Gerade bei komplexeren Websites mit Page Buildern benötigt WordPress ausreichend Arbeitsspeicher, um Prozesse stabil auszuführen. Zusätzlich sollten zentrale PHP-Parameter wie Speicherlimit, Uploadgröße und maximale Skriptlaufzeit angepasst werden, um Engpässe bei Updates, Imports oder größeren Dateien zu vermeiden.

Wichtig ist außerdem die korrekte Einrichtung des WordPress-Cronjobs. Der interne WP-Cron sollte deaktiviert und durch einen echten Server-Cronjob ersetzt werden. Nur so kann WordPress Aufgaben zuverlässig und mit ausreichend Speicher ausführen, ohne die Ladezeit bei Seitenaufrufen negativ zu beeinflussen.

Diese serverseitigen Einstellungen bilden somit die technische Grundlage für eine performante Website – erst wenn sie korrekt konfiguriert sind, entfalten weitere Optimierungsmaßnahmen ihre volle Wirkung.

• Serverleistung deines Hosters prüfen und nach Optimierungsmöglichkeiten fragen
• PHP Version 8.4 (stabil)
• WordPress Memory Limit auf 256M erhöhen:
  • wp-config.php

    define('WP_MEMORY_LIMIT', '256M');

  • htaccess-Datei

    php_value post_max_size 32M 
    php_value upload_max_filesize 32M // Maximale Dateigröße
    php_value memory_limit 256M // PHP-Memory Limit
    php_value max_execution_time 300 // Maximale Skriptlaufzeit
    php_value max_input_time 300 // Maximale Eingabedauer
    php_value session.gc_maxlifetime 86400 // Sesson Laufzeit

• Die Standardeinstellung  steht auf 40M, daher muss für WordPress der Cronjob umgestellt werden. Erst dann kann WordPress nun pro Skript bis zu 256M verbrauchendefine(‚DISABLE_WP_CRON‘, true);

Bilddateien und Ressourcen

Ein großer Teil der Ladezeit entsteht durch unoptimierte Bilder und fehlendes Caching. Deshalb sollten Bilddateien konsequent in ihrer Größe reduziert und für das Web optimiert werden – unabhängig davon, ob sie als JPEG oder in moderneren Formaten vorliegen. Neben der Bildkomprimierung spielt auch das Browser-Caching eine entscheidende Rolle:

Durch passende Einstellungen in der .htaccess-Datei werden statische Ressourcen wie Bilder, CSS- und JavaScript-Dateien zwischengespeichert, sodass sie nicht bei jedem Seitenaufruf erneut geladen werden müssen. Dabei ist jedoch darauf zu achten, dass Expire-Header korrekt gesetzt sind, damit keine veralteten Inhalte ausgeliefert werden.  Expire-Header sorgen dafür, dass statische Dateien nicht bei jedem Seitenaufruf neu geladen werden müssen. Richtig eingesetzt sind sie ein zentraler Baustein für bessere Ladezeiten – besonders bei WordPress- und Elementor-Websites.

So gehst du vor:

• Per FTP oder Dateimanager ins Hauptverzeichnis (dort liegt auch die wp-config.php)
• Backup der Datei .htaccess machen und die Datei öffnen

Folgenden Block ergänzen:

<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/jpeg „access plus 1 month“
ExpiresByType image/png „access plus 1 month“
ExpiresByType image/webp „access plus 1 month“

ExpiresByType text/css „access plus 7 days“
ExpiresByType application/javascript „access plus 7 days“

ExpiresByType font/woff2 „access plus 1 month“
</IfModule>

An welcher Stelle genau innerhalb der Datei?

Am besten oberhalb oder unterhalb des WordPress-Standardblocks – aber niemals mitten darin.

Zur Info: Alles zwischen # BEGIN WordPress und # END WordPress wird von WordPress automatisch verwaltet. Änderungen dort können überschrieben werden. Der WordPress-Standardblock sieht übrigens so aus:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 

Datei speichern – fertig.

 

Ergänzend können Performance-Plugins wie WP Rocket oder alternative Lösungen mit Lazy-Load-Funktion die Ladezeit weiter verbessern. Welche Kombination für dich sinnvoll ist, hängt dabei immer vom individuellen Setup und den eingesetzten Tools wie halt  Elementor ab.

• Die Bildgrößen (bei mir JPEG) sollten auf jeden Fall geprüft und runtergedampft werden. Dafür gibt es zwar wieder Plugins, aber ich mache das sehr gerne mit img2go, ansonsten gibt es neben JPEG noch die NextGen-Formate wieWebP, JPEG 2000, JPEG X, die ich allerdings wegen möglicher Problem mit der Browserkompatibilät bislang noch nicht eingesetzt habe.
• Browser Caching festlegen (durch Zeilen in der htaccess-Datei) damit Bilder etc. nicht immer wieder neu geladen werden müssen. Allerdings berücksichtige dabei auch den Expire Header, damit nicht veraltete Ressourcen angezeigt werden.
• Empfohlen wird auch WP Rocket – ein Plugin für mehr Speed in WordPress (bei mir nicht im Einsatz, weil ich WP Meteor und Lazy Load installiert habe)
• Für den Einsatz mit Elementor Premium gibt es Lazy Load Elementor Background Images, das hier aber nicht vorstellen kann, da ich kein Premium-User bin.

Performance-Checkliste für WordPress mit Elementor

Elementor Performance-Optionen aktiv

• Optimized DOM Output
• CSS Print Method: External

Inline Icons aktiv

• Lazy Load für Hintergrundbilder
• Nicht benötigte Widgets deaktivieren, weniger HTML, weniger CSS, schnellere Renderzeit

Mobile Layout zuerst optimiert (Mobile First)

• Mobile Ansicht zuerst gestalten (Google-kritisch)
• Mobile: max. 1–2 Container pro Abschnitt
• keine Slider & aufwendigen Animationen
• Responsive Einstellungen statt Inhalte duplizieren ➡️ Google rendert & bewertet mobil zuerst

 Caching-Plugin sauber konfiguriert

(nicht mehrere gleichzeitig!)

• Seiten-Caching aktiv
• Browser-Caching

1. JavaScript

• Aktiviere defer oder delay (vorsichtig bei Formularen)

Erklärung:

defer für:

• Elementor JS
• Menüs
• Slider
• Formulare
• Interaktive Elemente

delay nur für:

• Google Analytics
• Tracking
• Chat-Widgets
• Marketing-Tools
• YouTube / Maps
• Drittanbieter-Skripte

2. CSS:

• Critical CSS aktiv
• ansonsten HTML, CSS & JS minifizieren, führt zur Verbesserung der Ladezeit

3. Bilder (meistens der größte Performance-Blocker)

• WebP + Lazy Load (nicht nur Plugin installieren!)
• Bilder in realer Anzeigegröße hochladen
• WebP oder AVIF nutzen

Lazy Load (Plugin):

• Bilder für „above the fold“ müssen sofort geladen werden, also ausnehmen
• Keine Hintergrundbilder für Content, wenn <img> möglich ist

4. Fonts

• lokal und  reduziert verwenden (SEO & Datenschutz)
• Google Fonts lokal hosten
• Maximal: 2 Schriftarten, 2–3 Schriftschnitte
• font-display: swap aktiv (Schnellere Textanzeige + bessere CLS-Werte)

5. Hosting-Voraussetzungen für Elementor (Minimum)

• PHP 8.1 oder 8.2
• HTTP/2 oder HTTP/3
• SSD oder NVMe
• OPcache aktiv
• Memory Limit ≥ 256 MB
• MySQL ≥ 8.0 oder MariaDB ≥ 10.4

Bedenke: Ein schwaches Hosting macht jede Optimierung wertlos!

Wenn du das Thema Elementor-Beschleunigung intensiver verfolgen möchtest, dann besuche die englischsprachige  How-to-Seite onlinemediamasters wo 18 Wege zur Speed-Optimierung erklärt werden.

Startseite mit Elementor nach der Optimierung

Das Ergebnis ist zwar hinsichtlich Largest Content Paint (LCP) noch nicht einwandfrei, aber immerhin im grünen Bereich.