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.

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.

1. Aktiviere die Einstellung „Elementor Experiments“

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

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

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.

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.

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

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.

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.

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.

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

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' ); 
}

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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' );

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.

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.

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

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.

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.

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.

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.

25. Ersetze Elementor durch Gutenberg-Blöcke

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

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.