So gehts: Elementor schneller machen

Vermeide Elementor wenn es geht. Und wenn nicht, nutze diese Anleitung – denn danach ist deine Seite schnell!

So beschleunigst du deine langsame Elementor-Website & bestehst die Core Web Vitals [Ein unkomplizierter Leitfaden]
Hier findest du eine Liste mit den wichtigsten Einstellungen für Elementor.

Bevor Du beginnst, wird empfohlen, Deine Website im Chrome DevTools-Netzwerkbericht und mit dem KeyCDN-Leistungstest zu analysieren. Außerdem nutze ich GTMetrix, um die Website-Geschwindigkeit zu messen.
Diese Tools zeigen dir, ob Deine Website aufgrund von CSS/JavaScript, Bildern, Schriftarten oder der TTFB (Time to First Byte) langsam ist.

1. Experimentelle Funktionen aktivieren

Gehe zu Elementor → Einstellungen → Experimente und aktiviere die folgenden Optionen:

• Inline Font Icons: Icons wie Font Awesome werden inline als SVGs geladen, was zu weniger CSS-Anfragen führt und Render-Blockierungen in PageSpeed Insights reduziert.
• Lazy Load Background Images: Ermöglicht das verzögerte Laden von Hintergrundbildern, was vorher nur über spezielle Plugins möglich war.
• Optimized DOM Output: Entfernt unnötige div-Wrapper, um eine übermäßige DOM-Größe zu vermeiden.
• Improved Asset Loading: Lädt Bibliotheken wie Lightbox und Screenful nur dann, wenn sie tatsächlich auf einer Seite verwendet werden.
• Improved CSS Loading: Lädt CSS und Animationen nur dort, wo sie gebraucht werden, was zu weniger render-blockierenden Ressourcen führt.
• Usage Data Sharing: Deaktiviere die Datennutzung, da das Teilen von Daten mit Plugin-Entwicklern einige Server-Ressourcen benötigt.

2. Methode zum Laden von CSS auf „External File“

Externe CSS-Dateien können gecacht werden und erhöhen nicht die Größe des HTML. In den meisten Fällen wird empfohlen, „External File“ zu verwenden.

3. Deaktiviere Standard-Schriftarten und -Icons

Deaktiviere sowohl Google Fonts als auch Font Awesome Icons. Im nächsten Schritt wird erklärt, wie Du nur die benötigten Schriftarten lokal lädst und prelädst.

4. Hoste Schriftarten lokal (& im WOFF2-Format)

Wenn auf Deiner Website Schriftarten von Drittanbietern wie fonts.gstatic.com geladen werden, hoste sie stattdessen lokal:

• Schritt 1: Besuche die Google Fonts-Website und lade Deine gewünschten Schriftarten herunter. Wähle nur die Gewichte, die Du benötigst.
• Schritt 2: Konvertiere die Schriftarten mit einem Tool wie CloudConvert in das WOFF2-Format, da es kleiner ist als .ttf.
• Schritt 3: Lade die Schriftarten als benutzerdefinierte Schriftarten in Elementor hoch. Falls Du Elementor Pro nicht verwendest, kannst Du Plugins wie OMGF verwenden, um die Schriftarten automatisch zu optimieren und vorzubereiten.

5. Schriftarten vorladen

Preloade die oberhalb der Falte sichtbaren Schriftarten, um die Ladezeit zu verringern. Du kannst dies in den meisten Optimierungs-Plugins einstellen. Sobald die Schriftarten vorab geladen sind, sollte sich die Blockierzeit (sichtbar als brauner Balken im Waterfall-Diagramm) verringern.

Mit einem GTMetrix Test kannst du schauen, welche Schriftarten wann geladen werden.

6. Lasse Google Fonts im „Swap“-Modus laden

Setze Google Fonts auf „swap“, um sicherzustellen, dass der Text während des Ladens der Webfonts sichtbar bleibt. Dies löst das Problem „Ensure text remains visible during webfont load“ in PageSpeed Insights.

7. Deaktiviere die Gutenberg-Blockbibliothek

Wenn Du Elementor nutzt, kannst Du die Gutenberg-Blockbibliothek deaktivieren, die zusätzliche CSS-Dateien auf Deiner Website lädt. Verwende dafür das Plugin „Disable Gutenberg“ oder den Script Manager von „Perfmatters“. Beide Tools ermöglichen es Dir, Gutenberg nur dann zu aktivieren, wenn Du es wirklich brauchst.

8. Entferne ungenutztes CSS mit Ausnahmen für Elementor

• Mit WordPress Cache Plugins wie FlyingPress, Perfmatters oder LiteSpeed Cache kannst Du ungenutztes CSS von Deiner Seite entfernen und so die Ladezeit verbessern. Wichtig: Einige Dateien müssen von der Entfernung ausgenommen werden, damit Deine Elementor-Seiten korrekt angezeigt werden.
• Ausnahmen für Elementor:
  • /wp-content/plugins/elementor/assets/css/frontend-lite.min.css
  • /wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css
  • Wähle zudem die Menü-Selektoren aus, die nicht entfernt werden sollen.

9. Nutze „Transform“ und „Translate“ in Animationen

Falls Du Animationen auf Deiner Website verwendest, nutze CSS-Eigenschaften wie „transform“ und „translate“. Das verhindert Layoutverschiebungen, die die Nutzererfahrung beeinträchtigen können. Mit Plugins wie „Happy Addons“ kannst Du diese Effekte einfach hinzufügen.

10. Gestalte Header und Footer mit CSS

Dein Header und Footer erscheinen auf jeder Seite Deiner Website und sollten daher so leicht wie möglich sein.

Anstatt sie mit Elementor zu erstellen, nutze direktes CSS. So sparst Du Ressourcen und reduzierst die Anzahl der von Elementor generierten Elemente.

11. Verzögere JavaScript, ohne Elementor zu beeinträchtigen

Verwende Cache Plugins wie WP Rocket, Perfmatters oder FlyingPress, um das Laden von JavaScript zu verzögern.

Damit verhinderst Du, dass die Website langsam geladen wird. Du musst jedoch sicherstellen, dass einige Elementor-Dateien von dieser Verzögerung ausgeschlossen werden, damit Deine Seiten nicht beschädigt werden. Achte auf folgende Dateien:

• jquery.min.js
• frontend.min.js
• /elementor/
• /elementor-pro/
• Die genauen Einstellungen findest Du in der Dokumentation des verwendeten Plugins.

12. Überprüfe alle Plugins auf Performance

• Einige Plugins können Deine Website verlangsamen, indem sie zu viel CSS, JavaScript oder Speicherplatz beanspruchen. Verwende Tools wie Chrome DevTools, WP Hive oder Query Monitor, um die „schwergewichtigen“ Plugins zu identifizieren und bei Bedarf zu deaktivieren.

13. Deaktiviere Plugins auf nicht genutzten Seiten

• Elementor-Plugins laden oft auf der gesamten Website, selbst wenn sie nur auf einigen Seiten benötigt werden. Mit Tools wie „Perfmatters“ oder „Asset CleanUp“ kannst Du Plugins auf bestimmten Seiten oder Beiträgen deaktivieren, um Ressourcen zu sparen und die Ladezeit zu verkürzen.

14. Nutze weniger Elementor-Widgets und -Spalten

• Je weniger Widgets und Spalten Du verwendest, desto schneller lädt Deine Seite. Überlege, ob Du wirklich alle Funktionen benötigst, und reduziere die Anzahl der Elemente, um den Code schlank zu halten. Ein Video von „Oooh Boi“ gibt hilfreiche Tipps zur Optimierung.

15. Lade Bilder im WebP-Format hoch

Verwende das WebP-Format für Deine Bilder, um ihre Größe zu reduzieren und die Ladezeit zu verkürzen. Du kannst die Bilder vor dem Hochladen konvertieren und anschließend mit Chrome DevTools überprüfen, ob sie auf Deiner Website korrekt angezeigt werden.

16. Nutze ein CDN

• Bild-CDNs wie Optimole oder Cloudflare Mirage/Polish optimieren Deine Bilder automatisch und auf Abruf. Das entlastet Deinen Server und verbessert die Ladezeit. Außerdem bieten sie zusätzliche Funktionen wie AVIF-Unterstützung und mobile Bildanpassung.

17. Viewport-Bilder vorladen & vom Lazy-Load ausschließen

Bilder, die beim ersten Seitenaufruf im sichtbaren Bereich sind, sollten nicht verzögert geladen werden (Lazy Load). Lade diese „kritischen“ Bilder vorab, um sie schnell anzuzeigen und das LCP (Largest Contentful Paint) zu verbessern. Mit Plugins wie Perfmatters oder FlyingPress kannst Du dies automatisch einrichten.

18. Nutze Hosting mit NVMe-SSDs

NVMe-SSDs bietet eine deutliche Leistungssteigerung. Es ist schneller als herkömmliches Hosting und verbessert die Ladezeiten erheblich. Kombiniere LiteSpeed-Hosting mit einem CDN wie QUIC.cloud oder Cloudflare APO, um optimale Performance zu erzielen.

19. Nutze Full Page Caching (von Cloudflare)

Damit kannst du die komplette Webseite quasi auf Cloudflare hosten.

20. Die Hosting-Einstellungen

• PHP-Version: Nutze immer die höchste stabile PHP-Version, die mit Deinen Plugins kompatibel ist, um eine optimale Leistung zu erreichen.
• Memory-Limit: Elementor empfiehlt 768 MB für eine optimale Performance. Stelle dies in Deinem Hosting-Dashboard ein.
• Redis/Memcached: Redis ist besonders vorteilhaft für dynamische Websites. Wenn Dein Hosting es unterstützt, aktiviere es und verbinde es mit Deinem Cache-Plugin.
• OPcache: OPcache verbessert die PHP-Leistung und reduziert die CPU-Belastung.
• Brotli-Komprimierung: Wenn Dein Hosting dies anbietet, aktiviere Brotli, um die Datenübertragung zu beschleunigen.

21. Überlege Dir, welches Optimierungs-Plugin Du verwendest

• Auf einem LiteSpeed-Server ist „LiteSpeed Cache“ die beste Wahl. Andernfalls empfiehlt sich „FlyingPress“. Beide Plugins bieten umfassende Optimierungsoptionen, die über WP Rocket hinausgehen.
• Hinweis: SiteGround Optimizer ist gut für das Caching, schneidet aber bei den Core Web Vitals schlechter ab. FlyingPress und LiteSpeed Cache haben hier deutlich mehr Funktionen.

22. Verwende Lazy Render für Elementor-Sektionen

Mit FlyingPress oder LiteSpeed Cache kannst Du Lazy Render aktivieren, was bedeutet, dass Sektionen erst dann geladen werden, wenn sie im sichtbaren Bereich erscheinen. Klicke dazu mit der rechten Maustaste auf die gewünschte Sektion, kopiere den CSS-Selektor und füge ihn in den Einstellungen des Plugins ein.

23. Entferne unnötige Elemente und bereinige die Datenbank

• Unnötige Elemente: Verwende Plugins wie „Perfmatters“ oder „Debloat“, um nicht benötigte Features auf Deiner Website zu deaktivieren.
• Datenbank bereinigen: Mit „WP-Optimize“ kannst Du alte Datenbankeinträge, wie veraltete Tabellen, entfernen. Achte darauf, Backups zu erstellen, bevor Du große Bereinigungen durchführst.
• Module deaktivieren: In einigen Plugins kannst Du bestimmte Funktionen abschalten, die Du nicht benötigst, um den Ressourcenverbrauch zu minimieren.

Fertig! Mit diesen Schritten holst Du das Maximum an Geschwindigkeit aus Deiner Elementor-Website heraus.
Falls Du Hilfe bei der Umsetzung brauchst, lass es mich wissen!