dowebwork logo
In diesem Beitrag werbe ich unabhängig für Produkte. Wenn jemand ein von mir beworbenes Produkt anklickt, kann ich eine Vergütung erhalten.
Home Guides Die 25 Schritte um eine langsame Elementor Webseiten Performance schneller machen (Leitfaden für Fortgeschrittene-Optimierung)

Die 25 Schritte um eine langsame Elementor Webseiten Performance schneller machen (Leitfaden für Fortgeschrittene-Optimierung)

Dies ist eine umfassende Liste von Elementor Geschwindigkeitsoptimierungen, die Sie finden werden.

Bevor Sie mit diesem Tutorial beginnen, empfehle ich Ihnen dringend, Ihre Website mit dem Chrome Dev Tools Network Report und dem KeyCDN Performance Test zu testen. Diese sagen Ihnen, ob Ihre Elementor-Site durch CSS/JavaScript, Bilder, Schriftarten oder TTFB langsam ist (was auch 40% von LCP in Core Web Vitals ist).

Experiments werden in den Schritten 1-4 behandelt, Schriftarten in den Schritten 3-6, CSS/JavaScript in 7-14, Bilder in 15-17, und TTFB/Speichernutzung sind hauptsächlich mit Hosting/CDN in den Schritten 18-20 verbunden.

Es ist wahr, Elementor fügt mehr CSS/JavaScript hinzu als Gutenberg. Aber das wird in der Regel nur ein Problem, wenn Sie zusätzliche Elementor-Plugins installieren und Ihre Website nicht richtig optimieren. Dann überprüfen Sie Ihren Coverage-Report. Ein langsames Hosting/CDN/Cache-Plugin ist dabei auch nicht dienlich.

Elementor-CSS-JavaScript

Da dies ein Blog über Geschwindigkeitsoptimierung von WordPress ist, empfehle ich Elementor durch GeneratePress zu ersetzen, das löst viele Probleme.

Früher habe ich Cloudways mit WP-Rocket Plugin verwendet. Jetzt benutze ich Rocket.net als Hosting, FlyingPress und Perfmatters sind meine Cache-Plugins und ich kann dieses Setup gar nicht genug empfehlen. Das beste WordPress Setup, das ich jemals hatte.

Aber ich bin nicht hier, euch zu erzählen, dass hervorragende Geschwindigkeit nur mit einem Wechsel zu meinem Hosting möglich ist.

Jeder kann gute Elementor PageSpeed-Werte auch auf langsameren Hosts erzielen, es erfordert nur etwas zusätzliche Arbeit und das Wissen, worauf man achten muss.

langsame elementor webseite beschleunigen

1. Aktiviere die Einstellung „Elementor Experiments“

Lasst uns starten! Gehe gleich zu Elementor → Einstellungen → Experimente und aktiviere die folgenden Punkte:

Elementor
  • Verbessertes Asset Loading – verbessert das „remove unused JavaScript“ Problem durch dynamisches Laden von Widget-JS-Handlern und Swiper nur dann, wenn sie verwendet werden. Elementor sagt: „Damit dieses Experiment richtig funktioniert, musst du die Version Elementor Pro 3.0.9 und höher verwenden.“
  • Verbessertes CSS Loading – löst das „remove unused CSS“ und „eliminate render-blocking resources“ Problem in Page Speed Insights durch das Laden von Widget-CSS und Animationen nur dann, wenn sie tatsächlich auf der Seite verwendet werden. Durch die Aktivierung dieser Funktion wurden im Elementor-Test 177 KB eingespart.
  • Inline Font Icons – Font Awesome Icons werden inline als SVGs geladen, ohne dass die gesamte Bibliothek geladen wird. Dadurch wird verhindert, dass Anfragen von zusätzlichen CSS- und Schriftdateien auf deiner Website geladen werden.
  • Optimierte DOM Ausgabe – Vermeidung übermäßiger DOM Größe in Page Speed Insights von Google durch Entfernen unnötiger Div-Wrapper (elementor-inner, elementor-row und elementor-column-wrap).

2. Schriftarten lokal hosten und vorladen

Geh zu Theme Customizer → Performance.

Diese Einstellung in GeneratePress lädt Google Fonts lokal und lädt sie vor, wenn sie von fonts.gstatic.com bereitgestellt werden. Falls du diese Einstellung nicht nutzt, musst du deine Schriftarten lokal hinzufügen. Überprüfe danach unbedingt deine Schriftartendateien im GTmetrix-Wasserfalldiagramm, um sicherzustellen, dass diese wirklich von deinem Server (ohne fonts.gstatic.com) geladen werden.

Elementor Host Google Fonts Locally
Local vs third party fonts
Elementor With Without Font Optimization

3. Versuche Font Display „Tauschen“

Um sicherzustellen, dass dein Text während dem Ladeprozess sofort in der richtigen Schriftart angezeigt wird, gehe zu Elementor → Einstellungen → Erweitert → Google Fonts laden → Tauschen. Für Font Awesome empfiehlt Elementor die Verwendung von font-display: block, wodurch die Ressourcen nicht gerendert werden müssen. Du kannst font-display: tauschen oder block testen und dann deine eigenen Ergebnisse in PageSpeed Insights überprüfen.

Elementor Google Fonts Swap

4. Elementor CSS + JavaScript entfernen

Der Tab Coverage in Chrome Dev Tools ist dein bester Freund, wenn es darum geht, zu große CSS/JS-Dateien zu finden.

Diese können mit Elementor, Elementor Pro (oder anderen Elementor-Plugins), andere Plugin oder sogar mit Skripten von Drittanbietern, wie z.B. Google Tag Manager, zu tun haben. Da die meisten Core Web Vitals mit CSS/JS zusammenhängen, sollte Reduzieren und Optimieren dieser Dateien deine oberste Priorität sein.

Elementor CSS

Der einfachste Weg ist: Plugins/Skripte, die CSS/JS hinzufügen, von vornherein zu vermeiden. Behalte diese Nutzungsvisualisierung besonders dann im Auge, wenn du ein neues Plugin installierst. Zusätzlich kannst du die WP Hive Extension verwenden, um mögliche negative Auswirkungen eines Plugins auf den PageSpeed schon im Vorhinein zu sehen. Schließlich ist es naheliegend, langsame Plugins durch leichtgewichtige Plugin Alternativen zu ersetzen.

Eine weitere Lösung ist die Verwendung der Funktion „remove unused CSS“ die in Cache-Plugins oder Perfmatters zu finden ist. Wie Vikas in einem Facebook-Post erklärte, leistet FlyingPress bessere Arbeit als WP Rocket und Perfmatters. Das Plugin LiteSpeed Cache ist ebenfalls eine solide Option (aber Achtung: nie mehrere Cache-Plugins gleichzeitig verwenden).

Remove unused CSS WP Rocket vs Perfmatters vs FlyingPress

Schließlich solltest du ein Asset Unloading Plugin verwenden, um ungenutzte CSS/JS auf bestimmten Seiten zu entfernen. Ich bevorzuge Perfmatters gegenüber Asset CleanUp, weil dort die Benutzeroberfläche übersichtlicher ist. Dazu enthält Perfmatters mehr Optionen zum Entfernen von Dateiüberresten, es ist besser aufgebaut und wird regelmäßig weiterentwickelt.

Wenn du Perfmatters verwendest (so wie ich), aktivierst duunter Einstellungen → Perfmatters → Extras → Skriptmanager den Skriptmanager. Dann kannst du jede beliebige Seite auf deiner Website aufrufen und den Skript-Manager in deinem Verwaltungsmenü finden, wo du jetzt Plugins/CSS/JS auf einzelnen Seiten deaktivieren kannst, die nicht geladen werden müssen.

Ich habe einen vollständigen Guide geschrieben, falls du noch mehr Hilfe benötigst, um ungenutztes JavaScript in WordPress zu entfernen.

Disable Elementor Plugins Perfmatters
Sie können die Elementor-Plugins überall deaktivieren, außer an den Stellen, an denen sie verwendet werden
Disable Plugins Perfmatters
Machen Sie dasselbe mit anderen Plugins

5. Sitewide Elemente in CSS statt in Elementor erstellen

Erstelle Header, Footer, Sidebar (Elemente, die sich auf jeder deiner Unterseiten wiederholen) nicht im Elementor.

Hard-Coded CSS ist viel schlanker als der aufgeblähte Code von Elementor und es gibt absolut keinen Grund den Elementor dafür zu verwenden. Wenn du nicht weißt, wie man das macht, lohnt es sich zu 100 %, einen Entwickler zu engagieren. Nachdem ich dies getan hatte, tauchte „Elementor“ nur noch etwa 152 Mal in meinem Quellcode auf (vorher war es das Wort 1856 Mal zu finden).

Du kannst dafür eine Freelancer Plattform wie zb. Fiverr verwenden. Natürlich kannst du Elementor danach immer noch für die Gestaltung deiner Unterseiten verwenden.

Speed Up Elementor Tips

6. Hintergrundbilder zeitverzögert laden

Wenn du in PageSpeed Insights einen Fehler für „defer offscreen images“ siehst, findest du in diesem Tutorial eine Anleitung.

Es gibt ein paar Möglichkeiten, dies zu beheben:

  • Füge die Hilfsklasse lazy-bg in FlyingPress zur CSS-Klasse deines Hintergrundbildes hinzu.
  • Deaktiviere lazy load in WP Rocket und verwende dann Optimole, das CSS-Selektoren lazy laden kann.
  • Füge manuell eine CSS-Klasse „lazy-bg“ hinzu, setze sie in die Warteschlange und füge dann lazy-bg zu deinem Hintergrund hinzu.
  • Verschiebe Hintergrundbilder in Inline-HTML, indem du Hintergrundbilder mit divs markierst

Viele Cache-Plugins, wie WP Rocket, laden Bilder nur, wenn du Inline-HTML verwendest. Du musst also entweder Hintergrundbilder in Inline-HTML verschieben, ein Plugin verwenden, welches eine lazy-bg-Helferklasse unterstützt, oder selbst eine hilfreiche Klasse hinzufügen. WP Rocket empfiehlt das Lazy Load Background Images für Elementor Plugin, aber es wird nicht gepflegt und hat schlechte Bewertungen. Mach das besser manuell per Hand.

Elementor lazy bg CSS class
Am einfachsten ist es, eine lazy-bg CSS-Klasse zu verwenden (fügen die Klasse einfach manuell hinzu)

7. Weniger Elementor Widgets/Spalten verwenden

Dieses Video hat einige großartige Tipps für die Verwendung von weniger Elementor Widgets/Spalten, was zu weniger Code führt. Es lohnt sich auf jeden Fall, die vollen 15 Minuten anzuschauen, falls du es nicht schon gesehen hast.

Der Hauptteil beginnt bei 3:23.

8. Gehe vorsichtig mit Elementor-Plugins um

Mache dich nicht verrückt mit den ganzen Elementor-Add-ons von Drittanbietern.

Ich z.B. habe Ultimate Addons, Premium Addons und mehrere Jet-Plugins gelöscht, da diese nur in einigen wenigen Bereichen meiner Website verwendet wurden und den zusätzlichen Speicherplatz nicht wert waren. Überprüfe auch hier deinen Chrome Dev Tools-Bericht, um zu sehen, wie viel CSS/JS du damit deiner Website hinzufügst.

Vermeide zusätzliche langsame Plugins

Einige Plugins wirken sich auf die Core Web Vitals aus, während andere CPU-belastende Hintergrundaufgaben ausführen und deine CPU Usage erhöhen. Dazu habe ich einen extra Guide erstellt, um die CPU Auslastung in WordPress deutlich zu reduzieren.

Die Plugins: Statistik, Backup, Portfolio, Live-Chat, Formular, Slider und JetPack sind nur einige Beispiele. Query Monitor findet Ihre langsamen Plugins, aber auch Query Monitor und Broken Link Checker laufen ständig im Hintergrund und erhöhen die Auslastung, also lösche diese Plugins (wenn möglich).

Slow WordPress Plugins Query Monitor

Mit WP Hive kannst du Plugins im WordPress-Repository anzeigen und sehen, ob sie sich auf die Speichernutzung + Webseiten Ladezeit auswirken, bevor sie installiert werden. Allerdings testet es nur frische Installationen und nicht, wie viel CSS/JS du zu einer Website hinzufügst, sobald du tatsächlich Inhalte mit dem Plugin hinzufügst. Also ist das Plugin nicht 100% genau, deshalb habe ich diese Liste mit langsamen Plugins erstellt. Merk dir einfach: Verwende wenig Plugins!

x = hat Auswirkungen (schlecht)
= hat keine oder minimale Auswirkungen (gut)

Plugin Kategorie Speicher Auswirkung Ladezeit Auswirkung
All In One SEO SEO x x
Broken Link Checker SEO x
Disqus Kommentare x
Divi Builder Page Builder x x
Elementor Page Builder x x
Elementor Premium Addons Page Builder x
Elementor Pro Page Builder x x
Elementor Ultimate Addons Page Builder x
JetElements Page Builder x x
Jetpack Security x x
NextGEN Gallery Gallery x x
Popup Builder Popup x x
Site Kit by Google Analytics x
Slider Revolution Slider x x
Social Media Share Buttons Social Sharing x
WooCommerce WooCommerce x x
Wordfence Security x
wpDiscuz Comments x x
WPML Translate x x
Yoast SEO SEO x

9. Ersetze Symbole durch benutzerdefinierte Symbole

Du solltest Font Awesome und Icons deaktivieren und stattdessen benutzerdefinierte Icons verwenden. Du kannst sie aus der Warteschlange entfernen (siehe unten) und dann benutzerdefinierte Icons unter Elementor → Benutzerdefinierte Icons hinzufügen.

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}
Elementor Custom Icons

10. Deaktiviere nicht verwendete Module in Ultimate Addons

Ultimate Addons, Premium Addons, Rank Math und viele andere Plugins sind modulbasiert, d. h. du kannst Funktionen deaktivieren, die du nicht benötigst. Einige Nutzer fanden heraus, dass Ultimate Adds für Elementor deine Webseite verlangsamt und zu viele Autoloads hinzufügt. Selbst wenn du beim Aktivieren von Addons nicht sofort bemerkst, kann es trotzdem sein, dass CSS/JS hinzufügt wird und deine CPU Auslastung erhöht.

11. Heavy Elemente auf dem Handy entfernen

Disable Unused Modules

Verwende den responsiven Modus von Elementor, um Elemente mit einer großen Dateigröße auf dem Handy zu entfernen. Verwende statt eines Sliders ein Bild (oder verwende einfach weniger Bilder). Entferne umfangreichen Code von Drittanbietern und JavaScript von deiner mobilen Website. Google verwendet Mobile First Indexing – darum sollte die mobile Geschwindigkeit das sein, worauf du dich am meisten konzentrieren solltest.

Elementor Mobile Editing

12. Verwende Transformieren + Übersetze in Animationen

Die Verwendung von Animationen ohne Transformieren + Übersetzen kann zu Layoutverschiebungen führen.

Du kannst Happy Addons verwenden, um diese hinzuzufügen. Mit CSS transform kannst du die Breite/Höhe von Animationen ändern, während du mit CSS übersetzte Elemente verschieben kannst, ohne dass sich dein Layout verschiebt.

CSS Transform Translate Elementor

13. Schnelleres Hosting nutzen (Die große Debatte)

Leider werden Mainstream Hoster (wie SiteGround, Hostinger, GoDaddy und WPX) ihrem Hype nicht gerecht. Sie bieten kaum CPU/RAM, verwenden langsamere SATA-SSDs und nutzen Shared Hosting mit strengen CPU-Limits, um dich zu einem Upgrade zu zwingen. Cloud-Hosting ist schneller, aber Kinsta und WP Engine verwenden immer noch SATA-SSDs mit niedrigen Limits für PHP-Workers und haben monatliche Besucherlimits, die teuer werden können. Anstatt sich auf Geschwindigkeit/Technologie zu konzentrieren, betreiben sie aggressives Marketing… Fall bitte nicht darauf herein.

Für Cloud-Hosting empfehle ich Rocket.net (was ich selbst benutze) oder Cloudways Vultr HF (was ich vorher benutzt habe). Beide verwenden Cloudflare Enterprise, das eine wesentliche Verbesserung gegenüber TTFB darstellt, mit Full Page Caching, HTTP/3, Bildoptimierung und Argo Smart Routing. Beide nutzen auch NVMe, Redis und haben monatliche Abrechnung. Rocket.net ist jedoch definitiv schneller, da du viel mehr Ressourcen (32 CPU + 128 GB RAM), LiteSpeed’s PHP (schneller als Cloudways‘ PHP-FPM) und Brotli erhältst. Es gibt auch keine PHP-Worker-Limits aufgrund des kostenlosen/automatischen Cloudflare Enterprise auf Rocket.net, wird etwa 90 % des Datenverkehrs darüber abwickelt, was zu viel wendiger Anfragen an deinen Ursprungsserver führt. Zusätzlich hat Rocket.net ein einfaches Dashboard und A+ Support und damit sogar besser als der von Kinsta. Cloudways hat mehr Bandbreite/Speicherplatz, aber die Software ist nicht ganz so schnell. Nutze einen dieser Cloud-Hoster + Cloudflare Enterprise + FlyingPress (Cache-Plugin), das ist die Kombination, die ich verwenden würde.

WP Engine SiteGround Kinsta Cloudways Vultr High Frequency Rocket.net
Hosting Typ Cloud Cloud Cloud Cloud Privat Cloud
CPU Kerne Nicht bekannt 4 12 1 32
RAM (GB) Nicht bekannt 8 8 1 128
Speicher-typ SATA SATA SATA NVMe NVMe
Speichermenge (GB) 10 40 10 32 10
Objekt Cache Redis Memcached Redis ($100/mo) Redis (Pro) Redis
Server Apache + Nginx Apache + Nginx Nginx Apache + Nginx Apache + Nginx
PHP Verarbeitung Nicht bekannt FastCGI FastCGI PHP-FPM LiteSpeed
Bandbreite oder monatliche Zugriffe 25,000/mo 5TB 25,000/mo 1TB 50GB + 250,000/mo
CDN Cloudflare SiteGround CDN Cloudflare Enterprise Cloudflare Enterprise ($5/mo) Cloudflare Enterprise
CDN PoPs 270 14 270 270 270
Full Page Caching x Demnächst verfügbar
Komprimierung Brotli Brotli Brotli GZIP Brotli
HTTP/3
WAF
Argo intelligentes Routing x x x
Ladeausgleich x x x
Optimierung von Bildern x begrenzt x
CPU Grenzen Niedrige PHP workers Sehr häufig Niedrige PHP workers Durchschnitt None
Email Hosting begrenzt x x x
TrustPilot Bewertung 4.4/5 4.6/5 4.3/5 4.6/5 4.9/5
Monatlicher Preis $25 $100 $30 $13 + $5 für Enterprise $25
Pläne Nicht empfohlen Nicht empfohlen Nicht empfohlen Pläne ansehen Pläne ansehen

Bei Rocket.net gehostete Websites haben im Durchschnitt ein globales TTFB von 100 ms (siehe TrustPilot Bewertungen). Du kannst TTFB auch in KeyCDN testen oder dich durch meine Website klicken, um zu sehen, wie sie lädt.

Rocket.net TrustPilot Reviews
Kinsta To Rocket.net Migration
Moved to Rocket.net vs SiteGround 1
Rocket.net positive review
Rocket.net vs Cloudways Vultr HF TrustPilot review
Rocket.net Facebook Review 1
Kinsta to Rocket.net TTFB Redis
Rocket.net vs Kinsta
Rocket.net WooCommerce Elementor

Teste Rocket.net für 1 $, fordere eine kostenlose Migration an und teste dann dein TTFB erneut (oder wende dich persönlich an CEO Ben Gabler)

Warum Rocket.net’s Cloudflare Enterprise besser ist

Cloudflare Enterprise von Rocket.net ist kostenlos, wird automatisch eingerichtet und verwendet (im Gegensatz zu Cloudways) vollständiges Full Page Caching. Im Vergleich zu Kinsta verfügt Rocket.net über Argo Smart Routing (besonders gut für WooCommerce-Sites), Lastausgleich und Bildoptimierung. Der CEO von Rocket.net, Ben Gabler, war früher auch Chief Product Officer von StackPath und hat sogar die Rechenzentren von Rocket.net an denselben Standorten wie die von Cloudflare errichten lassen. Und im Gegensatz zu beiden Hosts begrenzt Rocket.net nicht die PHP Workers (es gibt keine CPU-Limits) und auch die monatlichen Besuchslimits sind 10-25 Mal höher als bei Kinsta.

Cloudflare Enterprise (Kinsta) Cloudflare Enterprise (Cloudways) Cloudflare Enterprise (Rocket.net)
CDN PoPs 270 270 270
Priorisiertes Routing
Full Page Caching x
HTTP/3
WAF
Argo intelligentes Routing x
Ladeausgleich x
Optimierung von Bildern x
Automatische Konfiguration x x
Preis Gratis $5/mo (1 domain) Gratis

Für Shared Hosting empfehle ich NameHero. Sie verwenden LiteSpeed-Server, was bedeutet, dass du LiteSpeed Cache + QUIC.cloud CDN (wohl das schnellste Setup auf einem Budget) verwenden wirst. Es ist ähnlich wie bei Hostinger/A2 mit LiteSpeed und cPanel, aber du erhältst mehr CPU/RAM und der Support/die Öffnungszeiten sind besser, was sich in deinen TrustPilot Bewertungen widerspiegelt. Ich empfehle im Allgemeinen ihren Turbo Cloud-Plan für 7,38 $/Monat, der 3 CPU + 3 GB RAM, der einen schnelleren NVMe-Speicher enthält. Der größte Nachteil ist, dass sich die Rechenzentren nur in den USA/Niederlanden befinden. Wenn deine Besucher nicht in der Nähe sind, stelle sicher, dass du QUIC.cloud einrichtest, das über HTML-Caching verfügt (idealerweise der bezahlte Plan, der alle 73 PoPs nutzt).

SiteGround Hostinger GoDaddy WPX NameHero Turbo Cloud
Hosting Typ Shared Shared Shared Shared Shared
Speicher SATA SATA SATA SATA NVMe
CPU Kerne Nicht bekannt 1-2 1-2 Nicht bekannt 3
RAM (GB) Nicht bekannt .768 – 3.072 .512 – 2 Nicht bekannt 3
Objekt Cache Memcached x x x Redis
Server Apache + Nginx LiteSpeed Apache LiteSpeed LiteSpeed
CDN SiteGround CDN Cloudflare Enterprise QUIC.cloud QUIC.cloud Cloudflare Enterprise
CDN PoPs 14 73 14 73 73
Full Page Caching x
Komprimierung Brotli Brotli Brotli GZIP Brotli
HTTP/3 x
WAF x
Optimierung von Bildern Limited x x
CPU Limits Gewöhnlich Niedriger RAM Gewöhnlich Nicht bekannt Akzeptabel
Cache Plugin SG Optimizer LiteSpeed Cache x LiteSpeed Cache or W3TC LiteSpeed Cache
Email Hosting begrenzt Sehr begrenzt begrenzt
Wichtige Vorfälle Google blockierte DNS für 4 Tage Sicherheitslücke betraf 14 Mio. Kunden Fast jedes Jahr ein Vorfall Weltweiter Ausfall 2-tägiger Ausfall
Gratis Migration $30/Seite Gratis Kostenpflichtig Gratis Gratis
Preis $3-8/mo (1 Jahr) dann $15-40/mo $29/mo (jährlich) $20.38/mo (jährlich) $20.83/mo (jährlich) $7.38/mo (1-3 Jahre)
TrustPilot Bewertung 4.6/5 4.4/5 4.9/5 4.5/5 4.9/5
Plans Nicht empfohlen Nicht empfohlen Nicht empfohlen Nicht empfohlen Pläne ansehen
LiteSpeed vs Nginx vs Apache
LiteSpeed ist schneller als Nginx/Apache (und effizienter mit geringerer Wahrscheinlichkeit von CPU-Spitzen)
LiteSpeed Cache LiteSpeed Server
NameHero vs SiteGround Feedback
CPU Cores on LiteSpeed Hosting Plans
RAM on LiteSpeed Hosting Plans

Probleme mit Mainstream Hostern

Ich habe einige ziemlich schlechte Kritiken über SiteGrounds langsames TTFB, CPU-Limits und darüber geschrieben, warum SG Optimizer bei den wichtigsten Webvitalen schlechte Arbeit leistet (sie kontrollieren auch mehrere Facebook-Gruppen und drohen, Leute zu verklagen, die schlechte Kritiken schreiben). Hostinger schreibt gefälschte Bewertungen und ist nur deshalb so günstig, weil man weniger Ressourcen wie CPU/RAM bekommt. Kinsta und WP Engine sind viel zu teuer für die Anzahl der Ressourcen, PHP-Arbeiter und monatlichen Besuche, die man bekommt. Hinzu kommen größere Vorfälle wie der weltweite Ausfall von WPX und die 4-tägige Sperrung des DNS von SiteGround durch Google (sowohl WPX als auch SiteGround leugnen die Verantwortung). Eines ist klar: Die meisten Mainstream-Hosts scheinen eher an Gewinn/Reputation als an Leistung interessiert zu sein. Recherchiere selbst, bevor du dich beraten lässt.

Die 12 Dinge die man über Hosting/TTFB wissen sollte

  1. Das Hosting ist der #1 Faktor für die Geschwindigkeit einer Website.
  2. TTFB ist ein Schlüsselindikator für die Hosting-Leistung.
  3. TTFB ist Teil der core web vitals und macht 40 % von LCP aus.
  4. TTFB wirkt sich auch auf INP aus (da die Latenzzeit Teil von TTFB ist).
  5. SpeedVitals testet TTFB an 35 Stellen – nutze dieses Tool!
  6. Teste deine Website 3 Mal, um genaue Zahlen in SpeedVitals zu erhalten.
  7. Damit stellst du sicher, dass dein Caching und CDN richtig funktioniert.
  8. Prüfe den durchschnittlichen TTFB weltweit in jedem 3ten SpeedVitals-Test.
  9. Google flaggt deinen TTFB, wenn er über 600 ms liegt, aber unter 200 ms ist besser.
  10. PageSpeed Insights (und andere Test-Tools) testen TTFB nur an einem Standort.
  11. WP Hosting Benchmark testet auch die Hosting-Leistung.
  12. Die Kombination eines guten Hosts/CDN ist wohl der beste Weg, um TTFB zu verbessern (die Verwendung eines Hosts mit verbesserten Spezifikationen zusätzlich zu Cloudflare Enterprise schlägt zwei Fliegen mit einer Klappe).

Wenn du nun ein schnelles Hosting verwendst, habe ich einen umfassenden Guide erstellt um die Server-Antwortzeit (TTFB) noch weiter zu reduzieren.

NameHero Cloudways Rocket.net
NameHero for shared, Cloudways Vultr HF for cloud, but Rocket.net outperforms both

14. Investiere in ein besseres Cache-Plugin

FlyingPress und LiteSpeed Cache sind besser als WP Rocket und SiteGround Optimizer (das musste einfach mal gesagt werden).

Sie leisten bessere Arbeit bei der Optimierung für die tatsächliche Browsing-Geschwindigkeit, und nicht nur für die zentralen Webvitalien (im Gegensatz zu WP Rocket). Sie werden gut gewartet und veröffentlichen nicht ständig verfrühte Updates und nutzen Kunden als Beta-Tester (im Gegensatz zu SiteGround Optimizer). Außerdem bieten sie mehr Funktionen (Lazy Rendering von HTML-Klassen, Vorladen kritischer Bilder, CSS-Hilfsklasse für Lazy Load Background Images, selbst gehostete YouTube-Platzhalter und eine effektivere Funktion zum Entfernen ungenutzter CSS. LiteSpeed Cache hat seine eigenen einzigartigen Optimierungen wie Guest Mode und Caching auf Serverebene.

Ich habe von WP Rocket zu FlyingPress gewechselt und habe sofort einen großen Unterschied bemerkt, als ich mich durch meine Beiträge geklickt habe (die zentralen Webvitalen blieben gleich). Der Support von Gijo war der beste, den ich je erlebt habe. Verwende keine kostenlosen Cache-Plugins, denn mit Ausnahme von LiteSpeed Cache wurden die meisten nicht einmal für CWV aktualisiert und werden nicht gewartet.

OMM Switches To FlyingPress

15. Aktiviere Redis oder Memcached

Du solltest entweder das eine oder das andere verwenden (ich bevorzuge Redis).

Als Erstes solltest du prüfen, ob dein Hoster dies unterstützt (Cloudways hat Redis, SiteGround hat Memcached, und du fiindest beide normalerweise im cPanel unter PHP Selector → Extensions (oder ähnlich). Nach der Aktivierung haben einige Cache-Plugins auch Einstellungen für Redis/Memcached (z. B. LiteSpeed Cache, SiteGround Optimizer, W3 Total Cache). Du solltest natürlich nur eines davon verwenden.

Redis Memcached cPanel 1

16. Verwende eine bessere CDN-Konfiguration

Cloudflare Enterprise (über Rocket.net), FlyingProxy, FlyingCDN und der Standardplan von QUIC.cloud sind allesamt solide CDN-Entscheidungen.

Was ist meine Begründung?

  • Cloudflare Enterprise ist schwer zu schlagen. Rocket.net und FlyingProxy bieten mehrere Enterprise-Level-Funktionen für relativ wenig Geld (oder kostenlos), einschließlich Full Page Caching, das bei Cloudways/Kinsta nicht enthalten ist. Obwohl beide gut sind, würde ich persönlich zu Rocket.net tendieren, da sie mehr Optimierungen (wie Argo + Tiered Cache und Lastausgleich) erhalten, ohne etwas konfigurieren zu müssen. FlyingProxy kann jedoch auf jedem Host verwendet werden. Allein das Premium-Netzwerk, priorisiertes Routing, mehr PoPs und WAF machen einen großen Unterschied.
  • Was ist mit FlyingCDN? Ich habe es ausprobiert und es ist großartig. Der Grund, warum ich BunnyCDN zusätzlich benutze ist, weil ich dort Affiliate-Guthaben habe. Es hat Bunny Optimizer integriert + Geo-Replikation eingebaut und kostet nur $.03/GB.
  • Zwei CDNs? Gijo empfiehlt, sowohl Cloudflare als auch BunnyCDN zu verwenden.
  • Der Standardplan von QUIC.cloud ist ebenfalls solide. Es verfügt über HTML-Caching (ähnlich wie Cloudflare APO), aber der kostenlose Plan verwendet nur 6 PoPs und hat keinen DDoS-Schutz, so dass du bekommsst, wofür du bezahlst.
  • Verwende nicht RocketCDN. Es verwendet StackPath, das nach großen Problemen von cdnperf.com entfernt wurde. Hat einen niedrigen Tbps im Vergleich zu BunnyCDN und bietet keine Georeplikation. Es ist nur ein CDN (sonst nichts), das von WP Rocket leicht einzurichten ist, aber folglich 0 Anpassungsmöglichkeiten hat. Schließlich ist es nicht „unbegrenzt“, wie WP Rocket hier behauptet. Nicht gut.
  • Verwende nicht das CDN von SiteGround. Es hat nur 14 PoPs und man muss den DNS von SiteGround verwenden, um es zu nutzen, der zuvor von Google für 4 Tage blockiert wurde. Ich würde dem nicht trauen, aber das ist deine Entscheidung.
Cloudflare with BunnyCDN

17. Verwende PHP 8.0

Prüfe deine PHP-Version in Elementor → Systeminfo.

Es dauert 2 Minuten, sich in dein Hosting-Konto einzuloggen und die PHP-Versionen zu aktualisieren.

Elementor System Info 1

18. Speicherlimit erhöhen

Du kannst auch die Speicherbegrenzung, die maximale Beitragsgröße, die maximale Uploadgröße und andere Dinge in der Systeminfo finden. Elementor benötigt ein Speicherlimit von 256 MB, aber du kannst es sogar noch weiter erhöhen. Die meisten dieser Werte können auch in deinem Host geändert werden. Erhöhe das Speicherlimit hier oder fügen den Code zur wp-config.php hinzu.

define( 'WP_MEMORY_LIMIT', '1024M' );
Cloudways Memory Limit

19. Bilder optimieren

Es gibt eine ganze Reihe von Möglichkeiten, Bilder zu optimieren:

  • Angemessene Größe der Bilder – Ändere die Größe der Bilder auf kleinere Abmessungen.
  • Bilder außerhalb des Bildschirms aufschieben – Hintergrundbilder in Schritt #6 mit Verzögerung laden.
  • Bilder effizient kodieren – ShortPixel/CDNs sind für die Komprimierung sehr beliebt.
  • WebP – die meisten Bildoptimierungs-Plugins und CDNs unterstützen jetzt WebP.
  • Erstes inhaltsreiches Bild vorladen – PSI sagt Ihnen, welches Bild vorgeladen werden soll.
  • Lazy load images, iframes, videos – schließe above the fold-Bilder für schnelleres LCP aus.
  • Verwenden Sie explizite Breite und Höhe – mehrere Plugins ermöglichen es dir, fehlende Bildabmessungen hinzuzufügen.
  • Verwenden Sie adaptive Bilder – stelle kleinere Bilder für mobile Geräte mit einem Plugin für adaptive Bilder bereit.
  • Nutzen Sie Bilder aus einem CDN – stelle sicher, dass deine Bilder auch aus dem CDN ausgeliefert werden.
Image Optimization PageSpeed Insights

20. Code von Drittanbietern optimieren

Öffne den Code von Drittanbietern in PSI und befolge die Tipps:

  • Hoste Schriftarten, Analysen, Tag Manager, Gravatare und YouTube Platzhalter lokal.
  • Verzögere das Laden von YouTube-Videos und ersetze Iframes durch ein Vorschaubild.
  • Verzögere JavaScript (automatisch in WP Rocket oder siehe diese Liste der zu verzögernden JS).
  • Verzögere Kommentar-Plugins/Gravatare von Drittanbietern, wenn du viele Kommentare hast.
  • Verwende Cloudflare Zaraz, um Ads, Analytics, FB Pixel und anderen Code von Drittanbietern auszulagern.
  • Versuche Grow von Mediavine für Social Sharing Buttons, um Social Media Anfragen zu verhindern.
Third party code 1

21. Preload, Prefetch und Preconnect

Du hast diese Funktionen wahrscheinlich schon in PageSpeed Insights gesehen, die im Wesentlichen dazu beitragen, dass kritische Ressourcen oder Ressourcen Dritter schneller geladen werden. Du kannst dies in deinem Cache-Plugin, Perfmatters oder mit manuellem Code tun.

  • Preload – mache das für Schriftarten, die sich in CSS-Dateien befinden, und für Schriftarten, die oberhalb des Falzes geladen werden. Du kannst Schriftartendateien in GTmetrix Waterfall finden. Das Vorladen von Links lädt eine Seite herunter, wenn der Benutzer mit dem Mauszeiger über einen Link fährt, wodurch die Seite scheinbar sofort geladen wird, aber dies kann auch die CPU-Auslastung erhöhen, wenn Ihre Benutzer mit dem Mauszeiger über viele Links fahren. Dies ist eine Einstellung in vielen Cache-Plugins.
  • Preconnect – wird normalerweise nur bei Schriftarten von Drittanbietern (fonts.static.com) und CDN-URLs durchgeführt. Viele Cache-Plugins verbinden diese automatisch vor, aber überprüfe die Dokumentation.
  • Prefetch – wird für andere externe Domänen durchgeführt (siehe Screenshot oben oder allgemeine Domänen).
Preload font Perfmatters

22. Unbenutzte Datenbanktabellen entfernen

Viele Geschwindigkeits Plugins bereinigen Ihre Datenbank, löschen aber nicht die hinterlassenen Plugin Tabellen und hier kommt WP Optimize ins Spiel.

Lass dir Tabellen anzeigen, die von Plugins hinterlassen wurden, die als „nicht installiert“ markiert sind. Wahrscheinlich hast du das Plugin installiert und dann gelöscht, und es hat vorkonfigurierte Einstellungen in deiner Datenbank hinterlassen. Wenn du also nicht vorhast, das Plugin erneut zu verwenden, sollten du diese entfernen. Ansonsten sind WP Rocket und andere Cache-Plugins für regelmäßige Datenbankbereinigungen gut geeignet. Installiere WP-Optimize regelmäßig, besondere nach dem Löschen von Plugins.

WP Optimize Unused Database Tables

23. Vollende die letzten 10% mit Perfmatters

Perfmatters kann mehr als nur ungenutzte CSS/JS entfernen.

Es wurde mehrfach aktualisiert und umfasst nun Optimierungen, die von den meisten Cache-Plugins nicht vorgenommen werden. Dies kann bei der Entladung von Assets, der Entfernung von Datenmüll, der Reduzierung der CPU-Auslastung und bei Problemen mit Core Web Vitals helfen.

Vorteile:

  • Ungenutzte CSS entfernen (1-Klick).
  • Entferne ungenutztes JavaScript über den Skript-Manager.
  • Beitragsrevisionen begrenzen + Intervall für automatische Speicherung erhöhen.
  • JavaScript verzögern (wird oft für Code von Drittanbietern verwendet).
  • Vorladen kritischer Bilder oberhalb des Falzes, um LCP zu verbessern.
  • CDN Rewrite, um URLs umzuschreiben, damit Assets von Ihrem CDN geliefert werden.
  • Sofortige Seite (dasselbe wie „Link Preloading“, das in Cache-Plugins zu finden ist).
  • Füge fehlende Bildabmessungen hinzu, um das PSI-Element „explicit width/height“ zu beheben.
  • Hoste Google Analytics lokal und anonymisiere die IP für die Einhaltung der GDPR.
  • Optimierung des Google Analytics-Tracking-Codes, damit er kleiner ist und weniger Anfragen benötigt.
  • Schriften lokal hosten und über eine CDN-URL bereitstellen (nicht erforderlich für Cloudflare).

24. Core Web Vitals (LCP, CLS, TBT)

Ich habe ein ausführliches Tutorial über die Optimierung von WordPress für Core Web Vitals (und wie man mehr als 25 Punkte in PageSpeed Insights behebt), aber ich möchte ein paar wichtige Dinge teilen, um bessere Scores zu erhalten.

Größtes inhaltsreiches Bild

  • Optimiere deine LCP-Elemente.
  • Schließe Bilder oberhalb der Falz vom Lazy Load aus.
Largest Contentful Paint Background Image

Kumulative Layout-Verschiebung

  • Teste deine Website mit dem Layout-Shift-Debugger von Google.
  • Lege die Abmessungen von Bildern, Videos, Iframes und Ad-Div-Code fest.
  • Stelle sicher, dass der Text während des Ladens der Webfont sichtbar bleibt (FOIT beheben).
  • Hoste Schriftarten lokal auf deinem Server und prüfe, ob das Vorladen der Schriften hilft.
  • Verwende CSS-Transformationen in Animationen anstelle von Breiten-/Höhenattributen.
  • Stelle sicher, dass die optimierte CSS-Auslieferung funktioniert (z. B. in WP Rocket), um FOUC zu vermeiden.
  • Wenn du Elemente verschiebst, verwendee transform: translate() anstelle von top, bottom, left, right.
Cumulative Layout Shift

Blockierungszeit insgesamt

  • Finde lange Main-Thread-Aufgaben (über 50ms) in der PSI.
  • Konzentriere dich auf das Entfernen und Optimieren von JavaScript/CSS.
  • Finde die Quelle der blockierten Zeit in GTmetrix Waterfall.
  • Vermeide die Verwendung von Plugins und Themen mit umfangreichen JavaScript-Dateien.
  • Verschiebe, verzögere, minifiziere und optimiere JavaScript so gut du kannst.
  • Identifiziere Skripte von Drittanbietern mit hoher Blockierungszeit und optimiere diese.
  • Überprüfe deinen Bericht „Vermeide lange Main-Thread-Aufgaben“ in PSI, um Dateien zu identifizieren.
Avoid long main tasks

25. Ersetze Elementor durch Gutenberg-Blöcke

Ich habe einen Test mit den schnellsten WordPress-Themes durchgeführt und dabei verschiedene Startvorlagen/Layouts verwendet.

Fastest WordPress Theme Starter Templates

Das nächste Mal, wenn du eine Website erstellst oder neu gestaltest, versuche GeneratePress oder Kadence.

Ich habe viele meiner Webseiten mit GeneratePress + GenerateBlocks neu gestaltet und habe damit meine Seitengröße um die Hälfte reduziert, direkt nachdem ich Elementor entfernt hatte. Entferne Drag-and-Drop und Page-Builder und verwende stattdessen Block-Editoren.

Hier noch ein toller Beitrag von Vikas, um das ganze noch einmal zusammenzufassen.

Elementor Speed Tips
Vikas verwendet übrigens Cloudways Vultr Hosting

Warum ist meine Elementor-Website langsam?

Elementor fügt zusätzliche CSS, JavaScript, Schriftarten und Div-Wrapper hinzu. Versuche, die integrierten Optimierungen in Elementor Experiments zu aktivieren, Schriftarten lokal zu hosten und vorzuladen. Hosting, Cache-Plugin und CDN sind ebenfalls der Schlüssel zur Beschleunigung von Elementor.

Was sind häufige Gründe für eine langsame Elementor-Website?

Zu viele aufgeblähte Plugins, unnötige Module, billiges Shared Hosting und nicht optimierte Schriftarten, Bilder und Code von Drittanbietern können deine Elementor-Site verlangsamen.

Warum ist mein Elementor Editor langsam?

Wenn dein Elementor-Editor langsam ist, liegt das höchstwahrscheinlich an einem hohen CPU-Verbrauch, der durch Plugins oder fehlende Server-Ressourcen verursacht wird. Erhöhe dein Speicherlimit oder prüfe ein Cloud-Hosting.

Warum ist Elementor auf mobilen Geräten langsam?

Versuchen mobiles Caching, adaptive Bilder ges, responsive Layouts, und vermeide Hamburger-Menüs. Die meisten Desktop-Optimierungen werden jedoch auch auf Mobilgeräte übertragen, also versuche zuerst, diese zu beheben.

Warum ist WooCommerce auf Elementor langsam?

Sowohl Elementor als auch WooCommerce fügen zusätzliche Skripte und Stile zu deiner Website hinzu. Versuchee, diese mit Asset CleanUp oder Perfmatters selektiv zu deaktivieren. Du kannst auch versuchen, Warenkorbfragmente zu deaktivieren, wenn deine Kunden diese nicht verwenden, sowie WooCommerce-Administratoren zu überlasten.

author image
Ich biete meinen Service an, deine Webseiten-Geschwindigkeit für Dich zu verbessern.
Meine Empfehlung

Elementor/Divi fügen Ihrer Website zusätzliches CSS/JS hinzu (überprüfen Sie den Abdeckungsbericht Ihrer Chrome Dev Tools). Ich bin zu GeneratePress gewechselt, aber auch Blocksy, Kadence und Oxygen Builder sind hervorragend.

Meine WordPress-Hilfe

Autor Joe Speedmaster
Joe Speedmaster

Joe ist Inhaber und Chefredakteur. Er beschreibt sich selbst als WordPress Nerd der PageSpeed Optimierung. Mit +5 Jahre Erfahrung im Bereich WordPress, CDN, Hosting und Webentwicklung ist Joe nebenberuflich als Freelancer und Publisher tätig. Mit ehrlichen Erfahrungsberichten möchte er maximalen Mehrwert für seine Leser generieren.