Willkommen bei der umfassendsten Anleitung zu WordPress Ladezeit Verbesserung, die du finden wirst.
Dies ist mein Versuch, die Geschwindigkeit von WordPress und Core Web Vitals in einem kompletten Beitrag zusammenzufassen (ja, er ist laaang geworden).
Warum dieser Leitfaden anders ist: Erstens sind meine Empfehlungen zu Tools/Plugins/Diensten wohl besser als das, was andere Leute dir empfehlen. Ich bin sehr transparent, zb. über SiteGrounds langsames TTFB und Cache-Plugin, Kinstas überteuerten Service und fehlende Ressourcen, NitroPack als Blackhat, RocketCDNs schlechte Leistung und das Elementor/Divi langsam sind.
Das ist der zweite Grund, warum es anders ist: Konfigurationsanleitungen! Du brauchst Hilfe bei der Konfiguration von FlyingPress, LiteSpeed Cache oder Perfmatters? Möchtest du TTFB oder LCP verbessern? Oder vielleicht fragst du dich, welche Cloudflare-Einstellungen du verwenden sollst. Ich habe eine Antwort zu all diesen Themen.
- Test-Tools
- DNS
- Hosting
- Page Builder
- CDN
- Cache-Plugins
- Erweitertes Caching
- Plugins
- CSS und JavaScript
- Code von Drittanbietern
- Schriftarten
- Bilder
- Videos
- Kommentare
- LCP
- CLS
- Preload, Prefetch, Preconnect
- Datenbank
- Hintergrund-Aufgaben
- Mobil
- WooCommerce
- Sicherheit
- PHP-Version
- Teste die vorgenommenen Optimierungen
- Geschwindigkeits-Plugins
- Hilfe
- Meine Einrichtung
![langsame wordpress seite schneller machen](https://www.dowebwork.de/wp-content/uploads/2023/02/langsame-wordpress-webseite-beschleunigen.png)
Jeden Tag gibt es Updates zu Dingen wie Core Web Vitals, Plugin Changelogs und Cloudflare Enterprise. Während die Website-Geschwindigkeit komplexer geworden ist, sind die Grundlagen die gleichen geblieben.
Tipp: Verwende leichtgewichtige Themes/Plugins auf schnellen Servern und idealerweise mit einem leistungsfähigen Cache-Plugin/CDN.
Wenn du Vorschläge hast, um dieses Tutorial zu verbessern (oder eine Frage hast), schreibe mir einen Kommentar. Ich bin ganz Ohr und bin nicht käuflich, weil ich so viel Zeit mit dem Schreiben dieser Anleitungen verbringe 🙂
Viel Glück und Los geht’s!
1. Test-Tools
Finde Engpässe auf deiner Website, bevor du loslegst.
- Chrome Dev Tools – der Abdeckungsbericht zeigt deine größten CSS/JS-Dateien und woher sie geladen werden (Plugins und Code von Drittanbietern sind häufige Übeltäter). Ein großer Teil der Geschwindigkeit und der Webvitalität hängt mit CSS/JS zusammen, und es ist am besten, sie an der Quelle zu bekämpfen. Es ist besser, Dinge zu entfernen, die man nicht braucht, als zu versuchen, sie zu optimieren.
- KeyCDN Performance Test – misst TTFB an 10 globalen Standorten. Dies wird hauptsächlich durch besseres Hosting und die Verwendung eines leistungsfähigen CDN mit vollständigem Seiten-Caching (wie APO oder FlyingProxy) verbessert. Es zeigt auch DNS-Lookup-Zeiten und TLS, die mit einem schnellen DNS (z. B. Cloudflare) und der Konfiguration ihrer SSL/TLS-Einstellungen verbessert werden können.
- PageSpeed Insights – die meisten Punkte beziehen sich auf die Reduzierung oder Optimierung von CSS, JS, Schriftarten, Bildern, TTFB und Above-the-Fold-Inhalten. Lade z. B. dein LCP-Bild vor und schließe es vom Lazy Load aus, verschiebe große Plugins/Elemente unter die Falz, damit sie verzögert werden können. Konzentriere dich auf die Empfehlungen in den PSI-Abschnitten „Möglichkeiten“ und „Diagnose“, und überwache den Bericht über die Core Web Vitals in der Search Console.
- CLS Debugger – sehe die Layout-Verschiebungen deiner Website (CLS) auf dem Handy/Desktop in einem GIF.
- WP Hive – Chrome-Erweiterung, mit der du das WordPress-Plugin-Repository durchsuchst und feststellen kannst, ob ein Plugin die Speichernutzung und die PageSpeed-Scores beeinflusst, aber nur die „Out-of-the-Box-Einstellungen“ misst und nicht, wenn Inhalte zum Frontend hinzugefügt werden.
- Wordfence Live Traffic Report – sehe Bots, die auf deine Website zugreifen in Echtzeit. AhrefsBot, SemrushBot, compute.amazonaws.com und andere Bots können blockiert werden, wenn du deren Service nutzt. Da die meisten Bot-Schutzdienste die Bots deiner Dienste nicht blockieren, müsst du dies manuell mit Firewall-Regeln von Cloudflare tun.
- WP-Optimize – zeigt an, welche Plugins Datenbank-Overhead verursachen und entfernt alte Tabellen, die von gelöschten Plugins/Themes zurückgelassen wurden. Macht einen besseren Job als Cache-Plugins mit geplanten Bereinigungen, weil es eine bestimmte Anzahl von Post-Revisionen behalten kann, während es Müll entfernt (Cache-Plugins löschen sie alle, so dass du keine Backups hast).
- cdnperf.com + dnsperf.com – diese können als Grundlage für die Auswahl eines DNS/CDN-Anbieters dienen, enthalten aber nicht das CDN von StackPath (aus cdnperf entfernt und von RocketCDN verwendet), das CDN von QUIC.cloud oder das CDN von LiteSpeed und andere Dienste.
- Wasserfalldiagramme – das Testen von „Scores“ ist nicht annähernd so effektiv wie das Messen von Dingen in einem Wasserfalldiagramm. Das Video von Google zur Optimierung von LCP ist eine hervorragende Ressource und zeigt dir die Grundlagen. Du kannst eines in WebPageTest, Chrome Dev Tools und GTmetrix finden.
- Diagnose-Plugins – der Abschnitt Geschwindigkeits Plugins listet alle im Leitfaden erwähnten Plugins auf. Dazu gehören Diagnose-Plugins wie Query Monitor (dies ist wahrscheinlich am besten geeignet, um Engpässe zu finden), WP Server Stats, WP Hosting Benchmark und WP Crontrol.
2. DNS
Ein langsames DNS verursacht Latenzzeiten, die Teil von TTFB sind (und TTFB ist Teil von LCP).
Wer auch immer deine Domain registriert hat, ist derjenige, den du für ein DNS verwendst. GoDaddy, NameCheap und sogar Amazon Route 53 (bei Kinsta verwendet) schneiden bei dnsperf.com nicht gut ab. Bessere Optionen sind Cloudflare, QUIC.cloud oder Google (wenn du Google Domains verwendest). Ich empfehle in der Regel Cloudflare, da es kostenlos ist und bei jeder Einrichtung durch Änderung der Nameserver verwendet werden kann.
![DNS von Cloudflare](https://www.dowebwork.de/wp-content/uploads/2022/11/DNS-Cloudflare.png)
3. Hosting
Rocket.net mit ihrem kostenlosen Cloudflare Enterprise wird jeden „Mainstream-Host“ übertreffen, da sie 32 CPU-Kerne + 128 GB RAM, NVMe-Speicher, Redis und Cloudflare’s Full Page Caching + Argo Smart Routing erhalten. Ich benutze sie und habe im Durchschnitt einen globalen TTFB von <150ms (klicke dich einfach durch meine Beiträge).
Die 12 Dinge die man über Hosting/TTFB wissen sollte
- Das Hosting ist der #1 Faktor für die Geschwindigkeit einer Website.
- TTFB ist ein Schlüsselindikator für die Hosting-Leistung.
- TTFB ist Teil der zentralen Webvitalen und macht 40 % von LCP aus.
- TTFB wirkt sich auch auf INP aus (da die Latenzzeit Teil von TTFB ist).
- SpeedVitals testet TTFB an 35 Stellen – nutze dieses Tool!
- Teste deine Website 3 mal, um genaue Zahlen in SpeedVitals zu erhalten.
- Damit stellst du sicher, dass dein Caching und CDN richtig funktionieren.
- Prüfe deinen durchschnittlichen TTFB weltweit in deinem 3. SpeedVitals-Test.
- Google kennzeichnet deinen TTFB, wenn er über 600 ms liegt, aber unter 200 ms ist besser.
- PageSpeed Insights (und andere Test-Tools) testen TTFB nur an einem Standort.
- WP Hosting Benchmark testet auch die Hosting-Leistung (hier sind meine Ergebnisse).
- 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).
Mainstream-Hosts (wie SiteGround, Hostinger und WPX) haben nicht viel CPU/RAM, verwenden langsamere SATA-SSDs und sind Shared-Hosting mit strengen CPU-Limits, die dich zwingen, Pläne zu aktualisieren. Cloud-Hosting ist schneller, aber Kinsta verwendet immer noch SATA-SSDs mit wenig CPU/RAM, PHP-Worker und monatliche Besuche (Redis kostet auch $100/Monat). Cloudways Vultr HF ist der Anbieter, den ich zuvor verwendet habe, aber auch hier beginnen sie mit nur 1 CPU + 1 GB RAM auf langsameren Apache-Servern, PHP-FPM und GZIP.
Hier sind die Komponenten von Rocket:
Alle Pläne verwenden 32 CPU-Kerne + 128 GB RAM mit NVMe (schneller als SATA), Redis (besser als Memcached), PHP von LiteSpeed und Brotli (geringere Kompression als GZIP). Es gibt keine PHP-Worker-Limits, da nur etwa 10 % des Traffics aufgrund von Cloudflare Enterprise auf Ihren Ursprung trifft.
SiteGround | Hostinger | Kinsta | Cloudways Vultr HF | Rocket.net | |
---|---|---|---|---|---|
Hosting Typ | Shared | Shared | Cloud | Cloud | Privat Cloud |
Speicher | SATA | SATA | SATA | NVMe | NVMe |
CPU Kerne | Nicht bekannt | 1-2 | 12 | 1 | 32 |
RAM (GB) | Nicht bekannt | .768 – 1.536 | 8 | 1 | 128 |
Objekt Cache | Memcached | x | Redis ($100/mo) | Redis (Pro) | Redis |
Server | Nginx | LiteSpeed | Nginx | Apache | Nginx |
PHP Verarbeitung | FastCGI | LiteSpeed | FastCGI | FPM | LiteSpeed |
Komprimierung | Brotli | Brotli | Brotli | GZIP | Brotli |
CPU Limit | Sehr häufig | Geringer Speicher | Niedrige PHP workers | Akzeptabel | Keine |
Warum du Cloudflare Enterprise brauchst
Weil du Enterprise-Funktionen wie 270+ PoPs, priorisiertes Routing, Full Page Caching, HTTP/3, WAF und Bildoptimierung erhältst. 3 Probleme mit den meisten CDNs sind ihr kleines Netzwerk (PoPs) und kein Full Page Caching oder Bildoptimierung. Das RocketCDN von WP Rocket verwendet zum Beispiel StackPath, das von cdnperf.com entfernt wurde, und bietet keine Bildoptimierung mit einer mittelmäßigen Tbps-Geschwindigkeit von 65+. Das CDN von SiteGround hat nur 14 PoPs. QUIC.cloud CDN (für LiteSpeed) und BunnyCDN sind gut, aber sie schlagen Cloudflare Enterprise immer noch nicht. Sicher, du kannst $5/mo für Cloudflare’s APO bezahlen, aber verpasst immer noch alle anderen Enterprise-Funktionen.
Die 3 beliebte Hoster mit Cloudflare Enterprise
Rocket.net’s Cloudflare Enterprise ist kostenlos, wird automatisch eingerichtet und verwendet vollständiges Seiten-Caching (im Gegensatz zu Cloudways). Und im Gegensatz 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 ging so weit, die Rechenzentren von Rocket.net an denselben Standorten wie die von Cloudflare zu errichten. Und im Gegensatz zu beiden Hosts begrenzt Rocket.net nicht die PHP-Arbeiter (es gibt keine CPU-Limits) und 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 Smart Routing | x | ✓ | ✓ |
Lade Ausgleich | x | ✓ | ✓ |
Optimierung von Bildern | x | ✓ | ✓ |
Automatische Konfiguration | x | x | ✓ |
Preis | Free | $5/mo | Free |
Meine 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. Aber bitte recherchiere selbst, bevor du dich beraten lässt.
Erste Schritte bei Rocket.net
Schritt 1: Erstelle ein Rocket.net Konto und mit einem Klick auf die obere Leiste kannst du einen Gutschein erhalten. Melde dich mit dem Coupon an und erhalte den ersten Monat für $1 (verlängert sich zu $30/mo oder $25/mo bei jährlicher Zahlung).
Schritt 2: Beantrage eine kostenlose Migration. Das wurde noch am selben Tag erledigt und ich konnte meine Website überprüfen, bevor sie ohne Ausfallzeit gestartet wurde. Der Support ist übrigens besser als der von Kinsta und du kannst Ben Gabler oder sein Team (per Telefon/Chat/E-Mail) kontaktieren, wenn du Fragen hast.
Schritt 3: Aktualisiere auf PHP 8.1 und bitte den Support, Redis zu installieren (sie verwenden Redis Object Cache). Dies sind die einzigen Dinge, die ich getan habe, da Cloudflare Enterprise und Backups beide automatisch sind.
Schritt 4: Teste dein TTFB erneut in SpeedVitals und klicke dich durch deine Seiten, um den Unterschied zu sehen. Du kannst auch ihr TrustPilot-Profil nach Leuten durchsuchen, die „TTFB“ erwähnen, wo sie mit 4,8/5 bewertet werden.
![Moved to Rocket.net vs SiteGround 1](https://www.dowebwork.de/wp-content/uploads/2022/11/Moved-to-Rocket.net-vs-SiteGround-1.png)
![Kinsta To Rocket.net Migration](https://www.dowebwork.de/wp-content/uploads/2022/11/Kinsta-To-Rocket.net-Migration.png)
![Rocket.net positive review](https://www.dowebwork.de/wp-content/uploads/2022/11/Rocket.net-positive-review.png)
![Kinsta to Rocket.net TTFB Redis](https://www.dowebwork.de/wp-content/uploads/2022/11/Kinsta-to-Rocket.net-TTFB-Redis.png)
![Rocket.net Facebook Review 1](https://www.dowebwork.de/wp-content/uploads/2022/11/Rocket.net-Facebook-Review-1.png)
![Rocket.net vs Kinsta](https://www.dowebwork.de/wp-content/uploads/2022/11/Rocket.net-vs-Kinsta.png)
![Hostingvergleich NameHero Cloudways Rocket.net](https://www.dowebwork.de/wp-content/uploads/2022/11/Hostingvergleich-NameHero-Cloudways-Rocket.net_.png)
Ich war vorher bei Cloudways Vultr HF, was großartig war, aber deren Cloudflare Enterprise nutzt (noch) kein Full Page Caching und kostet $5/mo mit nervigen Challenge Pages. Selbst wenn dein Cloudflare Enterprise identisch wäre, übertrifft Rocket.net sie immer noch mit besseren Spezifikationen, wie mehr CPU/RAM, Brotli und LiteSpeed’s PHP (plus besserem Support, einfacher zu bedienen und in der Regel preislich). Während Cloudways eine große Verbesserung gegenüber den meisten Hosts darstellt, zahlst du bereits $18/mo für den niedrigsten 1-CPU-Plan von Vultr HF mit Cloudflare Enterprise. An diesem Punkt sind die zusätzlichen $7/Monat, die du bei Rocket.net ausgeben würdest es wert. Das Dashboard von Rocket.net ist auch viel einfacher.
Für kleine Websites mit kleinem Budget ist NameHero’s Turbo Cloud Plan ähnlich wie Hostinger zwischen LiteSpeed, cPanel und Preis. Allerdings hat NameHero’s Turbo Cloud Plan etwa 1,5x mehr Ressourcen (3 CPU + 3GB RAM) mit NVMe-Speicher. NameHero’s Support/Unterbrechungszeiten sind auch in TrustPilot-Bewertungen besser dargestellt. Dies ist eine der schnellsten Konfigurationen für ein kleines Budget. Du erhältst einen LiteSpeed-Server + LiteSpeed Cache + QUIC.cloud CDN und E-Mail-Hosting. Der größte Nachteil ist, dass sich die Rechenzentren nur in den USA und den Niederlanden befinden. Wenn sich diese nicht in der Nähe deiner Besucher befinden, solltest du das CDN von QUIC.cloud mit HTML-Caching einrichten (idealerweise den kostenpflichtigen Plan, der alle 70 PoPs nutzt).
![litespeed cache webserver vorteile](https://www.dowebwork.de/wp-content/uploads/2022/11/LiteSpeed-Cache-LiteSpeed-Server.png)
![RAM litespeed hosting vergleich](https://www.dowebwork.de/wp-content/uploads/2022/11/RAM-on-LiteSpeed-Hosting-Plans.png)
![Wechsel von Siteground zu Namehero](https://www.dowebwork.de/wp-content/uploads/2022/11/NameHero-vs-SiteGround-Feedback.png)
![CPU litespeed hosting vergleich](https://www.dowebwork.de/wp-content/uploads/2022/11/CPU-Cores-on-LiteSpeed-Hosting-Plans.png)
4. Page Builder
Elementor/Divi sind langsamer als Gutenberg/Oxygen.
Da mehrere PSI-Elemente mit CSS/JS/Schriftarten zusammenhängen, ersetzen viele Leute sie durch leichtgewichtige Alternativen. Das letzte, was du tun möchtest, ist, einen langsamen Page Builder zu verwenden und dann eine Reihe von Plugins mit „zusätzlichen Funktionen“ zu installieren, die noch mehr CSS/JS hinzufügen. Tappe nicht in diese Falle. Wenn du deine Page Builder nicht ganz aufgeben willst, gibt es immer noch Möglichkeiten, ihn zu optimieren.
- Divi/Elementor fügen zusätzliche CSS/JS/Schriftarten zu deiner Website hinzu.
- Das Hinzufügen weiterer Page-Builder-Plugins kann die Seite noch mehr verlangsamen.
- GeneratePress (was ich verwende), Kadence, Blocksy, Oxygen sind schneller.
- Wenn du Elementor verwendest, versuche die Einstellungen unter Elementor → Experimente.
- Dasselbe gilt für Divi unter Divi → Theme Options → General → Performance.
- Wenn du Astra Starter Sites verwendest, benutze eine in Gutenberg erstellte Vorlage (nicht Elementor).
- Verwende CSS für deine Header/Footer/Sidebar (anstelle von aufgeblähtem Page-Builder-Code).
- Elementor verfügt über eine Theme-Anpassungseinstellung, um Schriftarten lokal zu hosten und vorzuladen.
- Wenn du keine Elementor Schriftarten oder Icons verwendest, deaktiviere sie oder verwende stattdessen benutzerdefinierte Icons.
- Wenn du elementor-dialog.js nicht für Popups verwendest, deaktiviere es (z. B. mit Perfmatters).
- Viele Page-Builder-Plugins sind modulbasiert, also deaktiviere Module, die du nicht verwendest.
- Vereinfache dein Design, indem du weniger Widgets/Spalten verwendest (hier ist ein YouTube-Video dazu).
- Wenn du kritische Bilder in FlyingPress oder Perfmatters vorladest, schließt dies Bilder oberhalb der Falz von Lazy Load aus und lädt sie vor, um LCP zu verbessern. Es funktioniert jedoch nicht mit Elementor Image Widgets (lese die Dokumentation deines Page Builder + Cache Plugins).
- Hintergrundbilder werden standardmäßig nicht „lazy“ geladen, da sie aus einer separaten CSS-Datei geladen werden. Einige Cache-Plugins unterstützen eine lazy-bg-Klasse, die du für das Lazy Loading von Hintergründen verwenden könntest.
![schnellste wordpress frameworks](https://www.dowebwork.de/wp-content/uploads/2022/11/Fastest-WordPress-Theme-Starter-Templates.png)
![Wasserfalldiagramm größte Datei](https://www.dowebwork.de/wp-content/uploads/2022/11/Elementor-CSS.png)
5. CDN
Hast du einen langsamen TTFB im Leistungstest von KeyCDN?
Ein leistungsfähiges CDN mit HTML-Caching (und anderen CDN-Funktionen) kann den Unterschied ausmachen. Das Werkzeug: cdnperf.com ist zwar eine gute Grundlage, aber es gibt noch andere Dinge zu beachten.
Schau dir zunächst die Netzwerkseite an (Du wirst feststellen, dass das Netzwerk von BunnyCDN mehr PoPs und schnellere Tbps als StackPath hat). Schau dir auch die Funktionen an (RocketCDN serviert zum Beispiel nur Dateien aus dem CDN und nichts anderes, während andere CDNs viel mehr tun als nur „Dateien servieren“. Das Dashboard von Cloudflare bietet Hunderte von Optimierungen zur Verbesserung von Geschwindigkeit, Sicherheit und CPU-Auslastung. Wähle nicht nur ein gutes CDN, sondern nutze auch alle Vorteile, die es bietet. Oder nutze einfach einen Dienst wie FlyingProxy/Rocket.net, der Cloudflare Enterprise integriert.
CDN | PoPs | Preis | Bewertung |
---|---|---|---|
Cloudflare | 270 | Freemium | 2.0 |
BunnyCDN | 93 | $.01 – $.06/GB | 4.7 |
QUIC.cloud | 70 | Gratis oder $.02 – $.08/GB | 3.0 |
Google Cloud CDN | 100+ | Vom Kaufort abhängig | N/A |
CloudFront | 310 | Gratis 50GB/yr dann $0.02 – $.16/GB | 4.4 |
KeyCDN | 40 | $.01 – $.11/GB | 4.5 |
StackPath (Used By RocketCDN) | 50 | Vom Kaufort abhängig oder $7.99/mo | 1.9 |
SiteGround CDN | 14 | Gratis auf SiteGround | N/A |
WPX XDN | 25 | Gratis auf WPX | N/A |
Cloudflare – es ist schwer, Cloudflare mit 270+ Rechenzentren und all den robusten Funktionen zu schlagen. Öffne dein Cloudflare-Dashboard und verwende die unten stehenden Empfehlungen, um die Einstellungen zu konfigurieren.
Die besten kostenlosen Cloudflare-Funktionen
- CDN – suche in deinen DNS-Einstellungen deine Domain und ändere den Proxy-Status auf Proxied (orangefarbene Wolke). Dies ist erforderlich, damit mehrere Cloudflare-Funktionen funktionieren.
- TLS-Version – setze die minimale TLS-Version auf 1.2 und stelle sicher, dass TLS 1.3 aktiviert ist.
- Firewall-Regeln – werden oft verwendet, um den Zugriff auf wp-login, XML-RPC und „hacky“ Länder zu blockieren. Firewalls blockieren Angriffe und unerwünschte Anfragen an den Server.
- Bot-Schutz – blockiert spammige Bots, die auf deine Server zugreifen. Ich würde auch deinen Wordfence-Live-Verkehrsbericht überprüfen, um zu sehen, welche Bots in Echtzeit auf deine Website zugreifen, und Bots wie AhrefsBot und SemrushBot manuell blockieren, wenn du diese nicht verwendest. Der Bot-Bekämpfungsmodus kann eine JS-Datei zu deiner Website hinzufügen (invisible.js) und PSI-Fehler verursachen (teste dies daher).
- Brotli – dies funktioniert nur, wenn dein Host Brotli unterstützt, ansonsten wird GZIP verwendet.
- Frühe Hinweise – während der Server auf eine Antwort wartet, werden Preload/Preconnect-Hinweise an den Browser gesendet, so dass die Ressourcen früher geladen werden, was die Denkzeit des Servers reduziert.
- Browser-Cache-TTL – 1 Jahr ist gut für statische Websites (mein Blog ist größtenteils statisch, daher verwende ich diesen Wert) oder 1 Monat für dynamische Websites. Dies wird von Google empfohlen und kann statische Inhalte mit einer effizienten Cache-Richtlinie in PageSpeed Insights fixieren.
- Crawler-Hinweise – hilft Suchmaschinen, das Crawling effizient zu gestalten und Ressourcen zu sparen.
- Cache-Reserve – verbessert die Cache-Trefferrate, indem sichergestellt wird, dass bestimmte Inhalte von Cloudflare bereitgestellt werden, auch wenn die Inhalte seit Monaten nicht mehr angefordert wurden.
- Workers – Bereitstellung von Code auf den Edge-Servern von Cloudflare (probiere den Spielplatz aus). Workers sind serverlos mit automatischer Skalierung und Lastausgleich. Dies erfordert natürlich Programmierkenntnisse und kann die LCP um 80% reduzieren. Es kann auch für externe Cron-Jobs verwendet werden.
- Cache everything page rule – die häufigste Seitenregel, die HTML zwischenspeichert und TTFB verbessert, aber ich empfehle stattdessen APO oder Super Page Cache für Cloudflare.
- HTTP/3 – kein echtes HTTP/3, aber dennoch ein nettes Feature (teste deine Website mit HTTP/3-Test).
- 0-RTT Verbindungswiederaufnahme – gut für wiederkehrende Besucher, Latenz, mobile Geschwindigkeit.
- Hotlink-Schutz – spart Bandbreite, indem es verhindert, dass jemand deine Bilder kopiert und auf deiner eigenen Website verwendet, während sie auf deinem Server gehostet werden.
- Zaraz – lädt Skripte von Drittanbietern wie Google Analytics, Facebook Pixel, Chatbots und benutzerdefiniertes HTML auf Cloudflare aus. Teste aber deine Ergebnisse gegen die Verzögerung dieser.
- Überwachen Sie die Bandbreite/Analytik – je mehr Bandbreite Sie auf Cloudflare auslagern, desto besser. Dies sollte deinen Server entlasten und die CPU-Auslastung verringern.
Die besten kostenpflichtigen Cloudflare-Funktionen
- APO – Zwischenspeichern von HTML, was TTFB an mehreren globalen Standorten verbessern kann.
- WAF – blockiert unerwünschte Anfragen, verbessert die Sicherheit und reduziert die CPU-Auslastung.
- Argo + Tiered Cache – leitet den Datenverkehr über effiziente Pfade mit Tiered Cache um.
- Bildoptimierungen – ich ziehe diese den Plugins vor. Bei allen 3 (Bildgrößenanpassung, Mirage, Polnisch) musst du kein aufgeblähtes Bildoptimierungs-Plugin verwenden und sie leisten in der Regel bessere Arbeit. Sie verfügen über Funktionen wie Komprimierung/WebP und bieten auch Optimierungen für Mobilgeräte, wie z. B. die Auslieferung kleinerer Bilder, um LCP für Mobilgeräte zu reduzieren.
- Signed Exchanges – verbessert die LCP beim Anklicken von Links in den Google-Suchergebnissen durch Prefetching, was laut Google zu einer erheblichen Verbesserung führen kann.
- Load Balancing – schafft eine Ausfallsicherung, sodass dein Datenverkehr von ungesunden Ursprüngen zu gesunden Ursprüngen umgeleitet wird. Kann Dinge wie Latenz, TLS und allgemeine Fehler reduzieren.
- Cloudflare Enterprise – zu den Hauptvorteilen gehören priorisiertes Routing, mehr PoPs, Argo + Tiered Cache, vollständiges Seiten-Caching, Bildoptimierung und andere Funktionen, je nachdem, woher du es beziehst. Der einfachste/günstigste Weg ist die Nutzung eines Hosts mit Cloudflare Enterprise oder FlyingProxy (ich empfehle Rocket.net, die ihre Rechenzentren sogar an denselben Standorten wie Cloudflare errichtet haben). Das ist einfach besser durchdacht als Cloudways/Kinsta. Du kannst auch die Verwendung von Cloudflare Pro in Betracht ziehen, das über einige dieser Funktionen verfügt. Es erfordert mehr Konfiguration, aber gibt dir mehr Kontrolle.
![OP cache erweiterung](https://www.dowebwork.de/wp-content/uploads/2022/11/OPcache.png)
BunnyCDN – Gijo schlägt Cloudflare + BunnyCDN vor, was ich eine lange Zeit verwendet habe. Wenn du FlyingPress verwendest, ist in FlyingCDN automatisch BunnyCDN integriert und Bunny Optimizer + Geo-Replikation inkludiert. Es ist auch billiger als der Kauf dieser direkt durch BunnyCDN und einfach zu installieren.
![cloudflare mit bunnycdn](https://www.dowebwork.de/wp-content/uploads/2022/11/Cloudflare-with-BunnyCDN.png)
QUIC.cloud – verwende dies, wenn du LiteSpeed nutzt. Du solltest den (kostenpflichtigen) Standardplan verwenden, da der kostenlose Plan nur 6 PoPs verwendet und keinen DDoS-Schutz bietet. Es verfügt über HTML-Caching, das dem Full Page Caching von Cloudflare ähnelt und auch für die Bild-/Seitenoptimierungen von LSC benötigt wird.
![quic.cloud gratis vs. standard](https://www.dowebwork.de/wp-content/uploads/2022/11/QUIC.cloud-CDN-Free-vs-Standard.png)
RocketCDN – verwendet StackPath, das von cdnsperf.com entfernt wurde, und hat weniger PoPs, langsamere Tbps, keine Bildoptimierung, kein HTML-Caching und keine anderen Funktionen, außer der Bereitstellung von Dateien von einem CDN. Außerdem ist es nicht „unbegrenzt“, wie WP Rocket wirbt, da es Ihnen irgendwann den Hahn zudreht.
SiteGround CDN – nicht viele PoPs/Features und du musst deren DNS verwenden, um es zu nutzen (was, wenn du dich erinnerst, von Google für 4 Tage blockiert wurde). Ich persönlich würde dem nicht mit meiner Website vertrauen.
6. Cache-Plugins
Lass uns 5 beliebte Cache-Plugins in 10 Zeilen oder weniger zusammenfassen.
FlyingPress – optimiert für Core Web Vitals und Real-World Browsing besser als die letzten 3. Wenn ein neues Core Web Vital Update herauskommt (wie z.B. Fetchpriority Resource Hints), ist Gijo fast immer der erste, der es hinzufügt. Tolle Funktionen, die in den meisten Cache-Plugins nicht zu finden sind: Beim Vorladen von kritischen Bildern kannst du die Anzahl der Bilder festlegen, die normalerweise oberhalb des Falzes angezeigt werden, um sie vom Lazy Load auszuschließen, während sie vorgeladen werden. FlyingPress kann auch HTML-Elemente lazy rendern, YouTube-Platzhalter selbst hosten und hat eine lazy-bg-Helferklasse für das Lazy Loading von Hintergrundbildern. FlyingCDN verwendet BunnyCDN mit Bunny Optimizer und Georeplikation (eine gute Wahl). Die Funktion zum Entfernen von unbenutztem CSS ist schneller als die von WP Rocket, da sie benutztes CSS in eine separate Datei lädt (statt inline), was auch laut Perfmatters für Besucher schneller ist. Das Wichtigste was es nicht hat, ist das Caching auf Serverebene. Ich bin von WP Rocket zu FlyingPress gewechselt und habe einen großen Unterschied in der Geschwindigkeit festgestellt.
SG Optimizer | WP Rocket | FlyingPress | |
---|---|---|---|
Serverseitiges Caching | ✓ | x | x |
JavaScript verzögern | x | ✓ | ✓ |
Entferne unbenutztes CSS | x | Inline | Separate Datei |
Kritisches CSS | x | ✓ | ✓ |
Vorladen kritischer Bilder | x | x | Mit Nummer |
Exclude above the fold images | Mit Klasse | Mit URL | Mit Nummer |
Hintergrundbilder verzögert laden | x | Inline | Hilfsklasse |
Abrufpriorität von Ressourcen | x | x | ✓ |
HTML Elemente verzögert rendern | x | x | ✓ |
Fehlende Bildgröße hinzufügen | x | ✓ | ✓ |
YouTube Vorschaubild | x | ✓ | ✓ |
Selbst gehosteter YouTube-Platzhalter | x | x | ✓ |
Lokal gehostete Schrift | x | x | ✓ |
Font-display: swap | x | ✓ | ✓ |
Links vorladen | x | ✓ | ✓ |
CDN (neben Cloudflare) | SiteGround CDN | StackPath | BunnyCDN |
CDN PoPs | 14 | 60 | 93 |
CDN Tbps | N/A | 65 | 80 |
Dynamisches Caching | ✓ | x | x |
CDN Geo Replikation | x | x | ✓ |
CDN Bild-Optimierung | ✓ | x | ✓ |
CDN-Bildanpassung für Mobil | x | x | ✓ |
Dokumentierte APO Kompatibilität | x | x | ✓ |
LiteSpeed Cache – leistet ebenfalls gute Arbeit bei der Optimierung für Webvitalien und echte Benutzer, unterscheidet sich aber von FlyingPress. Vor allem, weil es nur auf LiteSpeed verwendet werden sollte, ist es kostenlos, und hat schnellere Server-seitige Caching. Allerdings können die Einstellungen kompliziert sein. Während einige Einstellungen ähnlich wie bei FlyingPress sind, wie z.B. das Laden von CSS in einer separaten Datei und das langsame Laden von HTML-Elementen, hat es seine eigenen einzigartigen Funktionen, wie z.B. die Lokalisierung von Drittanbieter-Ressourcen, ESI, Gastmodus, LQIP und HTML-Caching durch QUIC. Verwende LSC, wenn du auf einem LiteSpeed-Host sind. Für alles andere würde ich FlyingPress verwenden.
WP Rocket – das Entfernen von ungenutztem CSS ist langsamer für Besucher und RocketCDN ist kein gutes CDN. WP Rocket hostet keine Schriftarten selbst (oder empfiehlt es sogar) oder Video-Platzhalter. Es ist mühsam, Bilder oberhalb der Falz vom Lazy Load auszuschließen und sie einzeln vorzuladen. Immer noch keine Bildoptimierung oder dokumentierte APO-Kompatibilität. Während Gijo viele neue Funktionen veröffentlicht und FlyingPress aktualisiert, um die wichtigsten Updates für das Web zu berücksichtigen, scheint WP Rocket hinterherzuhinken. Zwei gute Dinge an WP Rocket sind die automatische Verzögerung von JavaScript und die Dokumentation.
SiteGround Optimizer – großartig für Caching, nicht für Webvitales. Fehlt viel zu viele Funktionen und hat eine Geschichte von Kompatibilitätsproblemen, die die Entwickler auf Plugins/Themen von Drittanbietern schieben, wenn du Support-Threads überprüfst. Mein Rat ist, es nur für das Caching zu verwenden, alles andere zu deaktivieren und dann FlyingPress oder WP Rocket zu verwenden (stelle sicher, dass das Seiten-Caching nur in einem Plugin aktiviert und im anderen deaktiviert ist). Natürlich wird SiteGround sein Cache-Plugin anpreisen, auch wenn es eindeutig minderwertig ist.
NitroPack – verwende es nicht! Der einzige Grund, warum du bessere „Ergebnisse“ erhältst, ist, dass es Elemente aus dem Haupt-Thread verschiebt, so dass sie von den Geschwindigkeitstests nicht erkannt werden können. Dies führt zu großartigen (aber falschen) Ergebnissen und macht deine Website im Vergleich zu anderen Plugins nicht wirklich schneller. Google „NitroPack blackhat“ und du wirst viele Artikel darüber finden.
7. Erweitertes Caching
Cache-Plugins sind nur eine Ebene.
Prüfe, ob dein Host Objekt-Cache (Redis/memcached), OPcache und HTTP-Beschleuniger wie Varnish/FastCGI unterstützt. Die meisten tun dies, aber sie müssen aktiviert oder manuell eingerichtet werden.
Es gibt auch CDN-Caching, das eine eigene Schicht darstellt. Alle diese Systeme sind für unterschiedliche Zwecke gedacht, und du solltest idealerweise die meisten (wenn nicht sogar alle) davon verwenden. Viele Leute haben Angst, dass sie zu viel Caching verwenden, aber solange du nur eine Art von Layer verwendest (nicht sowohl Redis als auch Memcached), ist das eine gute Sache.
- OPcache – in deinem Host aktivieren (kann helfen, die CPU-Auslastung zu reduzieren).
- Browser-Cache – in deinem Cache-Plugin aktivieren (speichert Dateien in Browsern).
- HTTP-Beschleuniger – aktiviere sie in deinem Host (wahrscheinlich Varnish oder FastCGI).
- Objekt-Cache – Redis nutzt den Speicher im Allgemeinen effizienter als Memcached und eignet sich gut für große/eCommerce-Sites. Sobald er bei deinem Hoster aktiviert ist, verbinde ihn mit deiner Website über ein Plugin (z. B. LiteSpeed Cache, W3 Total Cache, SG Optimizer, WP Redis). Informiere dich in der Dokumentation/Support deines Hosts darüber, welches Plugin am besten geeignet ist. Bei Rocket.net musst du z. B. das WP Redis-Plugin installieren, während du bei Cloudways das Redis-Addon installieren musst.
- CDN-Cache – APO ist nicht dasselbe wie eine Cache-Alles-Seiten-Regel oder das Super Page Cache-Plugin. QUIC führt auch HTML-Caching durch, dann gibt es Dienste, die den vollständigen Seiten-Cache von Cloudflare enthalten, wie Cloudflare Enterprise von Rocket.net, FlyingProxy und SiteGround Optimizer. Das Wichtigste ist, dass du HTML irgendwo zwischenspeichern, da dies den TTFB erheblich verbessern kann.
8. Plugins
Achte auf Plugins, die:
- CSS/JS zum Frontend hinzufügen – verwende den Chrome Dev Tools-Abdeckungsbericht, um zu sehen, welche Plugins CSS und JS hinzufügen. Dies schließt Plugins ein, die JavaScript oder Schriftarten von Drittanbietern einfügen.
- Erhöhte CPU Auslastung – häufig bei Plugins, die „Statistiken“ sammeln, wie der Live-Traffic-Bericht von Wordfence, Query Monitor und Broken Link Checker. Aber das kann wirklich von jedem Plugin kommen. WP Hive sagt dir, ob ein Plugin die Speichernutzung erhöht, wenn du das WP Plugin Repo durchsuchst.
- Datenbankaufblähung – verwende WP-Optimize, um zu sehen, welche Plugins (oder bestimmte Plugin-Module) den größten Datenbank-Overhead verursachen. Dies wird im Abschnitt über die Datenbank in diesem Handbuch näher erläutert.
- Laden oberhalb der Falz – langsame Plugins sind schon schlimm genug, aber sie oberhalb der Falz zu laden ist noch schlimmer. Wenn Plugins unterhalb des Folds geladen werden, kannst du sie verzögern (z.B. Kommentar-Plugins).
- Verwenden Sie jQuery – Perfmatters hat eine Skriptmanager-Einstellung, um Abhängigkeiten anzuzeigen. Sobald sie aktiviert ist, gehe zum Skriptmanager → jQuery und er zeigt dir alle Plugins, die jQuery verwenden. Felix Arntz schrieb einen Artikel darüber, wie das Entfernen von jQuery JavaScript um bis zu 80% reduzieren kann.
![perfmatter zeigt jquery plugins](https://www.dowebwork.de/wp-content/uploads/2022/11/WordPress-jQuery.png)
Leichte Alternativen
- Soziales Teilen – Grow Social.
- Tabellen – Gutenberg-Block (kein Plugin).
- Galerie – Gutenberg-Block (kein Plugin).
- Schaltflächen – Gutenberg-Block (kein Plugin).
- Kommentare – native Kommentare (kein Plugin).
- Bild-Optimierung – Bild CDN (kein Plugin).
- Übersetzen – MultilingualPress, Polylang (nicht WPML).
- Sicherheit – kein Sicherheits-Plugin (Cloudflare, Firewall, etc.).
- Schieberegler – Soliloquy oder MetaSlider (aber idealerweise keine Schieberegler).
- Analytics – nenne mich verrückt, aber ich benutze nur Google Search Console.
- SEO – Rank Math oder SEOPress (aber die meisten SEO-Plugins verwenden jQuery).
- CSS – brauchst du ein individuelles Styling oder sogar ein Inhaltsverzeichnis? Verwende einfach CSS.
- Backups – Hosting-Backups oder eine leichtgewichtige Alternative wie UpdraftPlus.
In Query Monitor zeigt der Abschnitt „Abfragen nach Komponenten“ deine langsamen Plugins an. Du kannst auch meine Liste der 75+ häufigsten langsamen Plugins verwenden. Lösche schließlich alle Plugins, die du nicht verwendest (sowie deren Datenbanktabellen in WP-Optimize), und deaktiviere Plugin-Funktionen/Module, die du nicht verwendest.
Plugin | Kategorie | Speicher Auswirkungen | PageSpeed Auswirkungen |
---|---|---|---|
All In One SEO | SEO | x | x |
Broken Link Checker | SEO | x | ✓ |
Disqus | Comments | ✓ | 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. CSS und JavaScript
Wahrscheinlich der Grund Nr. 1 für schlechte Core-Webvitalien.
Neue Optimierungen
- Entferne ungenutztes CSS – WP Rockets Methode, verwendetes CSS inline zu laden, ist zwar langsamer für Besucher, aber besser für die Ergebnisse. Idealerweise solltst du hierfür FlyingPress, LiteSpeed Cache oder Perfmatters verwenden, die verwendetes CSS in eine separate Datei laden, damit es gecached werden kann und die HTML-Größe nicht erhöht. Du solltest nur 1 Plugin für diese Aufgabe verwenden. Wenn du kein Optimierungs-Plugin verwendest, das dies tut, versuche DeBloat oder PurifyCSS.
- Entferne Gutenberg CSS – wenn du Gutenbergs Blockbibliothek nicht verwendest(d. h. du verwendest den klassischen Editor), kannst du Gutenbergs CSS entfernen, das standardmäßig geladen wird.
- Entladen von Plugins – Entferne Sie CSS/JS (oder ganze Plugins) von bestimmten Seiten/Beiträgen, wo sie nicht geladen werden müssen. Gängige Beispiele sind das ausschließliche Laden von Kontaktformularen auf der Kontaktseite, das ausschließliche Laden von Social-Sharing-Plugins auf Posts und das Deaktivieren von WooCommerce-Plugins, wenn sie nicht verwendet werden. Du kannst auch bestimmte Dateien wie jQuery und elementor-dialog deaktivieren, wenn du sie nicht verwendest. Ich empfehle Perfmatters vor allem, wenn du WP Rocket oder SiteGround Optimizer verwendest, da es viele Optimierungen bietet, die in diesen Plugins nicht enthalten sind. Stelle sicher, dass du den Testmodus und die Abhängigkeiten in den Einstellungen deines Skriptmanagers verwendest. Für ein kostenloses Plugin versuche Asset CleanUp.
- Critical CSS – lädt das Above-the-Fold-CSS sofort, was die LCP verbessert. Die meisten Cache-Plugins tun dies, während andere (wie SG Optimizer) dies nicht tun. Wenn du Änderungen an Stylesheets oder benutzerdefinierten CSS vornimmst, solltest du die kritischen CSS neu generieren, damit sie für deine Website aktuell sind.
- Laden Sie CSS/JS ohne Rendering-Blocking – sowohl das Aufschieben von JavaScript als auch kritisches CSS helfen dabei, Ressourcen ohne Rendering-Blocking bereitzustellen. Vergewissere dich, dass sie in deinem Cache-Plugin funktionieren, und schließe Dateien von der Aufschiebung aus, wenn sie deine Website beschädigen. Oder versuche Async JavaScript.
- Minify – Cloudflare ermöglicht dies, aber du solltest stattdessen dein Cache-Plugin verwenden.
- Nicht kombinieren – sollte fast immer ausgeschaltet sein, besonders auf großen Websites oder bei HTTP/2.
In anderen Abschnitten behandelte Optimierungen
- Seitenersteller – Elementor/Divi fügen zusätzliche CSS/JS hinzu, die mit deinen eingebauten Performance-Einstellungen optimiert werden können, Kodierung von Header/Footer/Sidebar in CSS, Deaktivierung von Elementor-Schriften/Dialog, Lazy Loading von Hintergrundbildern in CSS, usw.
- Plugins – sieh dir einfach den Screenshot unten an (Plugins sind offensichtlich ein wichtiger Faktor).
- Code von Drittanbietern – das lokale Hosten von Dateien, das Verzögern von JavaScript und die Verwendung eines kleineren GA-Tracking-Codes können dessen Größe oder Verzögerung reduzieren, so dass er die anfänglichen Ladezeiten nicht beeinträchtigt.
- Schriftart Icons – deaktiviere diese, wenn du sie nicht verwendest oder verwende die benutzerdefinierten Icons von Elementor.
- WooCommerce – Deaktiviere Skripte/Styles für nicht-eCommerce-Inhalte und deaktiviere Woo-Plugins, wenn sie nicht geladen werden müssen (viele werden auf der gesamten Website geladen).
![CSS in Crome Developer Tools](https://www.dowebwork.de/wp-content/uploads/2022/11/CSS-JavaScript-Chrome-Dev-Tools.png)
10. Code von Drittanbietern
Dies sind alle Elemente auf deiner Website, die Informationen von einer Drittanbieter-Domain abrufen müssen (wie Google Fonts, Google Analytics-Tracking-Code oder ein eingebettetes YouTube-Video). Dies ist ein häufiger Grund für JS-bezogene Fehler in der PSI. Glücklicherweise kann das meiste davon optimiert werden, vor allem wenn es unterhalb der Falz angezeigt wird.
- Schritt 1: Dateien lokal hosten – einige Codes von Drittanbietern können lokal gehostet werden (siehe Tabelle unten). LiteSpeed Cache kann Ressourcen lokalisieren, FlyingPress kann Schriftarten/YouTube-Thumbnails lokal hosten, Perfmatters übernimmt Schriftarten und Analysen, und WP Rocket tut nichts.
Third-Party Code | URL(s) | Plugins To Host It Locally |
---|---|---|
Google Fonts | fonts.gstatic.com | Most optimization plugins, Elementor, OMGF |
Google Analytics | google-analytics.com | Flying Analytics, Perfmatters |
Gravatars | gravatar.com | Simple Local Avatar |
YouTube Thumbnails | i.ytimg.com | FlyingPress, WP YouTube Lyte |
- Schritt 2: Verzögere JavaScript – für Code von Drittanbietern, der nicht lokal gehostet werden kann, verzögere dessen JavaScript, wenn er unterhalb der Falz geladen wird (Du kannst auch das Laden von Plugins unterhalb der Falz verzögern). WP Rocket tut dies automatisch, während du bei anderen Cache-Plugins die Dateien manuell hinzufügen musst. Wenn dein Cache-Plugin dies nicht unterstützt, verwende Perfmatters oder Flying Scripts. In diesen Plugins kannst du eine Timeout-Periode einstellen und diese erhöhen, wenn du keine guten Ergebnisse siehst. Du kannst versuchen, den Code von Drittanbietern auf Cloudflare Zaraz auszulagern, aber ich bevorzuge die Verzögerung des JS.
ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name
- Schritt 3: Prefetch oder Preconnect für alles andere – für alle Drittanbieter-Codes, die nicht lokal gehostet oder verzögert werden können, füge einen DNS-Prefetch-Ressourcen-Hinweis hinzu. Preconnect wird normalerweise nur für CDN-URLs (für Cloudflare nicht erforderlich) und Schriftarten von Drittanbietern (sollten lokal gehostet werden) verwendet. Oder YouTube, wenn du die Anfragen nicht durch die Video-Optimierungen in Schritt 13 eliminieren kannst.
- Google Analytics – Perfmatters + Flying Analytics können einen minimalen Analytics-Tracking-Code verwenden, der nur 1,5 KB groß ist. Perfmatters kann auch eine Doubleclick Anfrage verhindern, indem die Anzeigefunktionen deaktiviert werden, aber beides sollte nur verwendet werden, wenn du bestimmte Daten in GA nicht benötigst.
- Vermeide übermäßiges Tracking – einer der häufigsten „Fehler“, die ich sehe, sind Websites, die zu viele Tracking-Tools verwenden: Analytics, Tag Manager, Heatmaps, Pixel, usw. Brauchst du sie wirklich alle?
![Unbenutzes Javascrip reduzieren](https://www.dowebwork.de/wp-content/uploads/2022/11/Reduce-unused-JavaScript.png)
11. Schriftarten
Wahrscheinlich die größte Datei nach CSS/JS.
Dein GTmetrix-Wasserfalldiagramm zeigt die Ladezeiten für Schriften, die Anzahl der Anfragen und ob sie lokal oder von einer Drittanbieterdomäne wie fonts.gstatic.com oder use.fontawesome.com bereitgestellt werden. Behalte dein Waterfall-Diagramm im Auge, wenn du Optimierungen vornimmst. Schriftarten können auch FOIT und FOUT verursachen, was zu Layoutverschiebungen führt. Mit ein paar einfachen Änderungen kannst du deine Schriften viel schneller laden.
- Reduziere Schriftfamilien, Schriftschnitte und Symbole – versuche nur 1 Schriftfamilie zu verwenden und nur die Schriftschnitte zu laden, die du tatsächlich verwendest. Deaktiviere Font Awesome und Eicons, wenn du sie nicht verwendest (Elementor hat eine Anleitung dazu). Einige Schriftarten haben auch größere Dateigrößen als andere.
- Verwende WOFF2 – das leichteste/universellste Format, das schneller ist als .ttf und .otf.
- Hoste lokal – wenn deine Schriften von fonts.gstatic.com bereitgestellt wird, hoste sie lokal.
- Vorladen – Schriftarten sollten vorgeladen werden, wenn sie oberhalb des Falzes geladen oder in CSS-Dateien verwendet werden. Die meisten Cache-/Optimierungs-Plugins erfordern das manuelle Hinzufügen von Schriftartendateien (und wenn es eine Crossorigin-Option wie in Perfmatters gibt, sollte diese für Schriftarten verwendet werden). Elementor hostet Schriftarten lokal und lädt sie unter Theme Customizer → Performance vor. PSI hat dir früher in „preload key requests“ mitgeteilt, welche Schriftarten vorgeladen werden sollen, aber ich glaube nicht, dass sie das noch tun.
- Fügen Sie font-display: optional hinzu – wenn du sicherstellen möchtest, dass der Text während des Ladens der Webfont sichtbar bleibt“, füge font-display: optional zum CSS deiner Schriftart hinzu. Dies wird von Google empfohlen, um die schnellste Leistung zu erzielen und gleichzeitig Layout-Verschiebungen zu verhindern. Es verzögert das Laden von Text um bis zu 100 ms. Zum Zeitpunkt der Erstellung dieses Artikels unterstützen die meisten Plugins nur den Swap, der in Elementor, Perfmatters und den meisten Cache-Plugins enthalten ist. Um Optional zu verwenden, musst du es manuell zum CSS deiner Schriftart hinzufügen, WP Foft Loader verwenden oder Swap verwenden bis dein Optimierungs-Plugin optional unterstützt. Vorladen von Schriftarten, die Font-Display verwenden: optional eliminiert Layout-Verschiebungen (FOIT) von Schriftarten vollständig.
- Schriften inline laden – Elementor und Divi haben entsprechende Optionen, FlyingPress ebenfalls.
- System Fonts – System-Fonts generieren 0 Anfragen und sind offensichtlich am besten für die Geschwindigkeit.
- Verwende eigene Icons für Elementor – ersetze Font Awesome und Eicons durch eigene Icons.
- Serve Google Fonts von Cloudflare Workers – Ich lasse dies hier, wenn du dich im Thema einlesen möchtest.
12. Bilder
Es gibt 7 PSI-Elemente, die sich auf die Bildoptimierung beziehen, und das deckt nicht einmal alles ab.
![Bild Gechwindigkeits Optimierung](https://www.dowebwork.de/wp-content/uploads/2022/11/Image-Optimization-PageSpeed-Insights.png)
Lade kritische Bilder vor und schließe sie vom „Lazy Load“ aus – „Above the fold“-Inhalte sollten sofort geladen werden, was ein wichtiger Faktor von LCP ist. Anstatt Bilder mit Lazy Load zu verzögern, sollte der Browser sie sofort herunterladen, indem er sie vorlädt. Der einfachste Weg, dies zu tun (bei weitem) ist „preload critical images“ in FlyingPress oder Perfmatters. Anstatt auf jeder einzelnen Seite/jedem einzelnen Beitrag die Above-the-Fold-Bilder manuell auszuschließen/vorzuladen (weil sie in der Regel unterschiedlich sind), legt man die Anzahl der Bilder fest, die normalerweise above the fold angezeigt werden. In meinem Fall sind es 3. Dadurch werden die obersten 3 Bilder vorgeladen, während sie vom „Lazy Load“ ausgeschlossen werden. Derzeit ist FlyingPress das einzige mir bekannte Cache-Plugin, das fetchpriority unterstützt, das von Google empfohlen wird, um Dinge wie dein LCP-Bild auf „hohe Priorität“ zu setzen. Props an den Founder Gijo von FlyingPress.
![Above the fold images](https://www.dowebwork.de/wp-content/uploads/2022/12/Above-the-fold-images.png)
- LCP-Bild – Dein wichtigstes Bild, das für einen niedrigeren LCP-Wert optimiert werden sollte (in PSI angezeigt).
- Hintergrundbilder – Seitenersteller stellen Hintergrundbilder in deinem CSS zur Verfügung und werden nicht „lazy“ geladen, was zu „defer offscreen images“-Fehlern führt. Einige Cache-Plugins haben eine lazy-bg-Helferklasse, Perfmatters hat eine CSS-Einstellung für Hintergrundbilder, und WP Rocket lässt dich diese in Inline-HTML verschieben. Schaue in der Dokumentation deines Cache-/Bildoptimierungs-Plugins nach, wie du die Bilder verzögert laden kannst. Du kannst auch Optimal verwenden oder selbst eine Hilfsklasse hinzufügen.
- Bild-CDNs – Ich verwende Cloudflare für die Bildoptimierung, aber auch Bunny Optimizer und QUIC sind gut. Sie leisten in der Regel bessere Arbeit als Plugins (und es ist 1 Plugin weniger auf deiner Website).
- Ändere die Größe von Bildern für Mobiltelefone – stelle sicher, dass dein Bildoptimierungs-Plugin (oder Bild-CDN) kleinere Bilder für Mobiltelefone bereitstellt, was auch deine LCP auf Mobiltelefonen verbessern sollte. Dies ist die Funktion „Bildgrößenanpassung“ in Cloudflare, oder du kannst ShortPixel Adaptive Images verwenden.
- Richtiges Verkleinern von Bildern – Verkleinere große Bilder auf eine kleinere Größe. Mein Blog ist 765px breit, also schneide ich Blogbilder auf diese Größe zu (die Chrome-Erweiterung Zoom ist praktisch, um die perfekten Abmessungen zu erhalten, wenn ich Screenshots mache). Ich empfehle immer, einen „Spickzettel“ mit den Bildabmessungen zu erstellen, damit du die Größe deiner Blog-, Featured-, Sidebar-Bilder usw. kennst.
- WebP – schneller als JPEG/PNG und die meisten Bildoptimierungs-Plugins oder CDNs können dies.
- Komprimierung – Lighthouse testet Bilder mit 85 %, was in der Regel ein guter Komprimierungsgrad ist.
- CSS – kombiniert mehrere kleine/dekorative Bilder zu einem Bild, so dass nur eine Anfrage gestellt wird. Meine alte Homepage verwendete ein CSS-Sprite und war sehr schnell. Du kannst es für Abschnitte wie „featured on“ verwenden, wo du eine Reihe von Logos zeigst. Du würdest einen CSS-Sprite-Generator verwenden.
- Gebe die Abmessungen an – die meisten Cache-Plugins können „fehlende Abmessungen hinzufügen“, andernfalls musst du dem HTML- oder CSS Code des Bildes eine Breite/Höhe hinzufügen. Dies verhindert Layout-Verschiebungen.
- Herabstufung der Qualität bei langsamen Verbindungen – Dienste wie Cloudflare Mirage + Optimole liefern Bilder mit niedriger Qualität bei langsamen Verbindungen, bis eine schnellere Verbindung zur Verfügung steht.
- Hotlink-Schutz – hindert andere daran, deine Bilder zu verwenden, wenn sie auf deinem Server gehostet werden und spart Bandbreite. Dies kommt häufig bei Websites vor, die Bilder von hoher Qualität verwenden, oder wenn deine Inhalte kopiert werden. Kann bei deinem Hoster oder mit dem Hotlink-Schutz von Cloudflare aktiviert werden.
- Platzhalter für Bilder niedriger Qualität (LQIP) – wenn du QUIC.cloud auf LiteSpeed verwendest, können diese Layout-Verschiebungen verhindern, aber du musst sicherstellen, dass du es richtig machst, sonst sieht es schlecht aus.
13. Videos
Wenn Videos nicht optimiert sind, sind sie wahrscheinlich das langsamste Element auf einer Seite.
Während die meisten Cache-Plugins Videos nur langsam laden und Iframes durch ein Vorschaubild ersetzen, sind FlyingPress und WP YouTube Lyte einige der einzigen Plugins, die Platzhalter optimieren.
- Lazy-Load-Videos – in Cache-Plugins, Perfmatters oder mit WP YouTube Lyte.
- Ersetze YouTube-iframes durch Vorschaubilder – der iframe (der das schwerste Element des Videos ist) wird erst geladen, wenn deine Besucher tatsächlich auf den Play-Button klicken.
- YouTube-Platzhalter selbst hosten – FlyingPress und WP YouTube Lyte können Platzhalter selbst hosten, um zu verhindern, dass i.ytimg.com-Anfragen in deinem „Drittanbieter-Code“-Bericht angezeigt werden.
- Preconnect – wenn du nicht in der Lage bist, die oben genannten Optimierungen vorzunehmen und immer noch Domains von Drittanbietern von YouTube geladen werden, kanns du Domains von youtube.com, i.ytimg.com und Roboto, die derzeit als Schriftart im YouTube-Player verwendet wird, vorab verbinden.
14. Kommentare
Kommentar-Plugins von Drittanbietern, Gravatars oder einfach viele Kommentare können WordPress verlangsamen.
- Verwende native Kommentare (keine Plugins).
- Cache Gravatars, wenn du LiteSpeed Cache verwendest.
- Verzögere Kommentar-Plugins und Gravatars von Drittanbietern.
- Verwende ein lokales Avatar-Plugin, um Gravatar-Anfragen zu verhindern.
- Wenn du Disqus verwenden musst, verwende das Plugin für bedingtes Laden.
- Unterbreche Kommentare in deinen WordPress-Diskussionseinstellungen.
- Versuche eine Schaltfläche „Weitere Kommentare laden“ zu verwenden, insbesondere auf mobilen Geräten.
- Lazy load comments/footer (kann in FlyingPress oder LSC gemacht werden).
- wpDiscuz verfügt über Optionen für „Lazy Loading“ und das Auslösen von AJAX-Laden nach der Seite.
![Lazy render HTML elements FlyingPress](https://www.dowebwork.de/wp-content/uploads/2022/12/Lazy-render-HTML-elements-FlyingPress.png)
15. LCP
Largest contentful paint ist das Kernstück des Webs, mit dem die meisten Leute zu kämpfen haben.
Sieh dir den Bericht „Längste Haupt-Thread-Aufgaben“ in PageSpeed Insights an und optimiere diese Dateien. LCP besteht aus 4 Teilbereichen und das YouTube-Video von Google ist eine gute Ressource für die Optimierung jedes einzelnen Teilbereichs.
![Largest Contentful Paint Breakdown Google](https://www.dowebwork.de/wp-content/uploads/2022/12/Largest-Contentful-Paint-Breakdown-Google.png)
LCP Sub-Part | Factors | LCP % |
---|---|---|
TTFB | Primarily hosting and CDNs + full page caching | ~40% |
Resource load delay | Exclude above the fold content from optimizations, resource hints | <10% |
Resource load time | Reduce image/CSS/JS sizes, critical CSS, CDN, cache expiration | ~40% |
Element render delay | Render-blocking CSS/JS, JS file size, font-display optional | <10% |
- Schließe Bilder die sich oberhalb der Falz befinden vom Lazy Load aus – Du solltest niemals Bilder, die sich oberhalb der Falz befinden, verzögern oder aufschieben, da diese Inhalte sofort geladen werden sollten.
- Priorisiere Bilder oberhalb der Faltung – lade Bilder oberhalb der Faltung vor (oder verwende fetchpriority). PSI zeigt dein größtes inhaltsreiches Bild an, das am wichtigsten zu optimieren ist.
- Reduziere CSS, JS, Schriftgrößen – ein großer Teil der Reduzierung der Ladezeit ist die Reduzierung deiner Dateigrößen.
- Reduziere TTFB – 40 % des LCP können in der Regel durch ein besseres Hosting + CDN-Setup verbessert werden.
- Beseitige Rendering-blockierende CSS/JS – Rendering-blockierende Ressourcen führen zu Verzögerungen (siehe Video).
- Schriftartanzeige verwenden: optional – wenn Schriftarten nicht richtig geladen werden, können sie ebenfalls zu Verzögerungen führen.
- Lazy Rendering von HTML-Elementen – ermöglicht es Browsern, sich auf den Inhalt oberhalb der Faltung zu konzentrieren.
- Preload, preconnect, prefetch – gibt Browsern den Hinweis bestimmte Ressourcen schneller herunterzuladen.
- Erhöhe die Cache-Laufzeit – auch von Google erwähnt (Cloudflare Browser Cache TTL).
- Wähle das richtige Cache-Plugin bzw. die richtigen Cache-Einstellungen – einige haben bessere Optimierungen als andere.
- Aktiviere Signed Exchanges (SXGs) – dies findest du bei Cloudflare (Geschwindigkeit → Optimierung).
- Verwende Cloudflare Workers – der Google-Ingenieur hat Workers verwendet, um die LCP um etwa 80% zu verbessern.
- Verschiebe Plugin-Inhalte, Anzeigen und Animationen unter die Falz – so können sie verzögert werden.
16. CLS
Layoutverschiebungen treten auf, wenn Dinge beim Laden der Seite herumspringen.
Du kannst den Layout-Shift-Debugger von Google verwenden, um diese in einem GIF zu sehen. PSI hat auch einen Punkt „Vermeiden Sie große Layout-Verschiebungen“, der dir zeigt, welche Abschnitte auf deiner Website am meisten zu CLS beitragen. Selbst mit diesen Empfehlungen ist es schwer herauszufinden, warum der Abschnitt eine Layoutverschiebung verursacht.
- Ändere die Anzeige der Schriftart auf swap oder optional – mache das, wenn du „sicherstellen, dass der Text während des Ladens der Webfont sichtbar bleibt“ siehst. Wie in Abschnitt #11 gezeigt, ist „font-display: optional“ die beste Methode.
- Probleme beim asynchronen Laden von CSS – dies ist eine Einstellung in Cache-Plugins, die Layout-Verschiebungen durch FOUC (Flash of Unstyled Content) verursachen kann. Verwende stattdessen idealerweise die Methode „Unbenutztes CSS entfernen“. Wenn das deine Website beschädigt und du zum asynchronen Laden von CSS zurückkehrst, stelle sicher, dass du problematische Dateien, die FOUC verursachen, ausschließt, stelle sicher, dass kritisches CSS funktioniert, und kritisches CSS nach der Aktualisierung von Stylesheets/angepasstem CSS immer neu generieren.
- Schriftarten vorladen – das Vorladen von Schriftarten verhindert Layoutverschiebungen, wenn du display: optional verwenden.
- Gebe die Abmessungen von Bildern, Videos, Iframes und Anzeigen an – die ersten drei sind einfach (stelle sicher, dass bei Bildern eine Breite und Höhe angegeben wird). Für Anzeigen und andere dynamische Inhalte sollte Platz reserviert werden, indem du in einem div-code platziert werden. Die Breite/Höhe sollte der größten Größe der Anzeige entsprechen.
- Verwende CSS-Transformation in Animationen – ich bin kein Fan von Animationen, aber hier ist die Dokumentation.
- Verwende einen separaten mobilen Cache (wenn es sinnvoll ist) – wenn sich deine mobile Website von der Desktop-Website unterscheidet und du keinen separaten mobilen Cache verwendest, kann dies zu Layout-Verschiebungen führen. Du musst jedoch in der Dokumentation deines Cache-Plugins nachlesen, wann dies sinnvoll ist und wann nicht.
- Ändere das Cookie-Hinweis-Plugin – suche im Support-Thread deines Plugins. Es wurde berichtet, dass einige Cookie-Plugins Layout-Verschiebungen verursachen. Ich empfehle die Lösung von Gijo oder dieses Cookie-Plugin.
![Cumulative Layout Shift](https://www.dowebwork.de/wp-content/uploads/2022/12/Cumulative-Layout-Shift.gif)
17. Preload, Prefetch, Preconnect
Diese helfen Browsern, Ressourcen mit hoher Priorität schneller herunterzuladen.
Du priorisierst Inhalte oberhalb der Falz (Preload + Fetchpriorität). Preload wird auch in Cloudflare’s Early Hints und für das Herunterladen von internen Seiten im Hintergrund verwendet, damit sie schneller geladen werden, wenn Besucher darauf klicken (Link Preloading + Flying Pages). Prefetch + Preconnect helfen dabei, frühzeitige Verbindungen zu Third-Party-Domains herzustellen, wenn die Ressourcen nicht bereits verzögert werden.
Preload – wird üblicherweise für „above the fold“-Bilder verwendet (dies kann auch ein WebP-Bild sein), kann aber auch für CSS/JS (z. B. die Block-Bibliothek), Videos, Audio, Cloudflare-Arbeiter und andere Dateien verwendet werden.
<link rel="preload" href="/image.webp" as="image">
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Fetchpriority – ähnlich wie preload, weist nur eine Priorität zu (niedrig, hoch, auto). Wenn du zum Beispiel ein großes LCP-Bild hast, würdest du diesem Bild die Priorität „hoch“ zuweisen. Wenn du aber ein Bildkarussell hast, das oberhalb des Falzes geladen wird, könntest du den Bildern eine niedrige Priorität zuweisen. FlyingPress ist das einzige Plugin, von dem ich weiß, dass es die, im Changelog gezeigte fetchpriority unterstützt.
<img src="lcp-image.webp" fetchpriority="high">
Link-Preloading – es gibt 2 Haupttypen: Preloading von Links im Viewport, damit interne Links im unmittelbaren Inhalt schneller geladen werden, wenn sie angeklickt werden (unterstützt von Flying Pages und FlyingPress). Und das „Link-Preloading“, bei dem der Nutzer mit dem Mauszeiger über einen internen Link fährt (oder ihn auf dem Handy berührt) und die Seite im Hintergrund herunterlädt, so dass sie, wenn der Nutzer sie tatsächlich anklickt, sofort zu laden scheint (zu finden in Cache-Plugins wie WP Rocket). Beide verbessern zwar nicht die Ergebnisse, aber die wahrgenommene Ladezeit. Sei aber vorsichtig… das Vorladen zu vieler Seiten im Hintergrund erhöht die CPU-Auslastung, besonders wenn du so etwas wie einen WooCommerce-Shop mit internen Links in Bildern hast Wenn Besucher mit dem Mauszeiger über Produktbilder fahren, werden viele Seiten heruntergeladen. Das ist nicht gut!
![flying seiten plugin](https://www.dowebwork.de/wp-content/uploads/2022/12/Flying-Pages-by-WP-Speed-Matters.png)
DNS Prefetch – hilft den Browsern, Domänen von Drittanbietern zu erkennen, indem ein DNS-Lookup durchgeführt wird. Wird aber normalerweise nicht benötigt, da die Domänen von Drittanbietern lokal gehostet oder verzögert werden sollten.
<link rel="dns-prefetch" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://www.googletagservices.com">
Preconnect – stellt frühzeitig Verbindungen zu wichtigen Drittanbieter-Domains her. Häufig bei CDN-URLs und Drittanbieter-Schriftarten wie fonts.gstatic.com, use.fontawesome.com und use.typekit. Die meisten Cache-Plugins fügen preconnect automatisch hinzu, wenn du eine CDN-URL hinzufügst oder wenn du „Google Font Optimization“ (oder eine ähnliche Einstellung) aktivierst, aber du solltest in der Dokumentation nachsehen.
<link rel="preconnect" href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>
![Preload font Perfmatters](https://www.dowebwork.de/wp-content/uploads/2022/12/Preload-font-Perfmatters.png)
18. Datenbank
Es gibt in der Regel 3 Probleme, wenn du ein Cache-Plugin zum Reinigen deiner Datenbank verwendest:
- Es kann keine Datenbank-Backups erstellen.
- Es kann keine Datenbanktabellen entfernen, die von alten Plugins zurückgelassen wurden.
- Es löscht alle Beitragsrevisionen, aber du möchtest vielleicht ein paar behalten.
Deshalb empfehle ich WP Optimize für Datenbankbereinigungen. Gehe deine Datenbanktabellen durch und suche nach Tabellen, die nicht installiert oder inaktiv sind. Diese kannst du, wenn du das Plugin (oder Theme) nicht mehr verwenden willst, da du in der Regel Informationen in der Datenbank für die zukünftige Verwendung speicherst.
![WP Optimize Unused Database Tables](https://www.dowebwork.de/wp-content/uploads/2022/12/WP-Optimize-Unused-Database-Tables.png)
Bestimmte Plugin-Module/Funktionen können auch eine Menge Overhead verursachen, insbesondere wenn du Daten sammelst. Das Google-Analytics-Modul von Rank Math fügt viel Overhead hinzu. Erwäge daher, dieses Rank Math-Modul zu deaktivieren und deine Analysedaten stattdessen direkt von der Google-Analytics-Website zu beziehen.
![Rank Math Database Bloat](https://www.dowebwork.de/wp-content/uploads/2022/12/Rank-Math-Database-Bloat.png)
Für die laufende Datenbankbereinigung entfernt WP-Optimize alles, was die meisten Cache-Plugins tun, aber es lässt dich eine bestimmte Anzahl von Beitragsrevisionen behalten, damit du Backups hast (ich empfehle 5-10). Du kannst auch UpdraftPlus anschließen, das vor geplanten Optimierungen eine Datenbanksicherung vornimmt.
![WP Optimize Schedule Database Cleanup Settings](https://www.dowebwork.de/wp-content/uploads/2022/12/WP-Optimize-Schedule-Database-Cleanup-Settings.png)
19. Hintergrundaufgaben
Background-tasks können deinen Server ausbremsen und die CPU-Auslastung erhöhen.
Dies ist häufig bei Cache-Plugins (Vorladen und automatisches Löschen des Caches), Plugins, die Statistiken sammeln oder automatische Ladevorgänge erstellen, und sogar beim WordPress-Kern (Heartbeat, Autosaves, Pingbacks) der Fall. Viele dieser Funktionen lassen sich deaktivieren, einschränken oder mit Hilfe eines Cron-Jobs auf Zeiten außerhalb der Spitzenlastzeiten legen.
- Kontrolliere das Vorladen – das Vorladen in Cache-Plugins ist berüchtigt dafür, die CPU-Auslastung zu erhöhen (WP Rockets Vorladen, LSC-Crawler, SG Optimizer’s Preheat-Cache, usw.). Der erste Schritt besteht darin, die Einstellungen so zu ändern, dass nur wichtige Sitemap-URLs vorgeladen werden (z. B. page-sitemap.com + post-sitemap.com) und nicht die gesamte Sitemap. Als nächstes kannst du das Intervall für das Vorladen erhöhen.
![WP Rocket Sitemap Preloading](https://www.dowebwork.de/wp-content/uploads/2022/12/WP-Rocket-Sitemap-Preloading.png)
- Automatische Cache-Löschung: Es gibt bestimmte Aktionen, die dazu führen, dass dein gesamter Cache geleert wird (und wenn die Lebensdauer des Caches abläuft). Anstatt den Cache ständig mit diesen Aktionen zu leeren, solltest du die automatische Cache-Löschung deaktivieren und einen Cron-Job verwenden, der den Cache zu einem bestimmten Zeitpunkt (einmal pro Nacht) löscht. Es ist am besten, einen Cron-Job sowohl für die Cache-Löschung, als auch für das Cache-Preloading zu verwenden.
- Deaktiviere WP-Cron – die Verwendung eines externen Cron-Jobs zur Planung von Aufgaben wie den beiden oben genannten hilft, die CPU-Auslastung zu reduzieren. Der erste Schritt ist das Hinzufügen des Codes unter deiner wp-config.php-Datei. Als Nächstes richte einen echten Cron-Job bei deinem Hoster, bei Cloudflare oder bei einem Drittanbieterdienst, wie EasyCron, ein. Einige Hoster haben spezielle Anweisungen für das Hinzufügen eines Cron-Jobs, schaue also in deren Dokumentation nach.
define('DISABLE_WP_CRON', true);
Füge nun einen echten Cron-Job hinzu.
![cron job erstellen](https://www.dowebwork.de/wp-content/uploads/2022/11/Cron-Job-10-Minutes.png)
wget -q -O - https://yourwebsite.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1
![externern cronjob einstellen](https://www.dowebwork.de/wp-content/uploads/2022/11/External-cron-job.png)
- Entferne ungenutztes CSS – verringere die Stapelgröße von WP Rocket und erhöhe das Cron-Intervall.
- Vorladen von Links – einige Cache-Plugins können Links „vorladen“. Das klingt nach einer guten Idee, denn wenn Nutzer mit dem Mauszeiger über einen Link fahren, wird die Seite im Hintergrund heruntergeladen, damit sie schneller geladen wird, wenn der Nutzer sie tatsächlich anklickt. Wenn deine Website jedoch viele Links enthält (z. B. ein WooCommerce-Shop mit Links in den Produktbildern), solltest du diese Einstellung deaktivieren.
- Plugins – denke an Query Monitor, den Live-Verkehrsbericht von Wordfence und Backup-/Statistik-Plugins (sie alle führen Hintergrundaufgaben aus). Du kannst diese Aufgaben planen, bestimmte Funktionen in Plugins deaktivieren oder das Plugin ganz löschen. Plugins/Themes können beim Löschen auch automatisch geladene Daten hinterlassen, die in der Tabelle wp_options bereinigt werden können.
- Automatische Speicherung – Wenn du einen Beitrag bearbeitest, speichert WordPress jede Minute automatisch einen Entwurf. Du kannst eine einfache Codezeile (oder Perfmatters) verwenden, um dies auf etwa 5 Minuten zu erhöhen.
define('AUTOSAVE_INTERVAL', 300); // Sekunden
- Heartbeat – wird alle 15 Sekunden aufgerufen und kann in der Regel im Frontend/Backend deaktiviert und dann im Post-Editor eingeschränkt werden, da man dort wahrscheinlich Funktionen (wie Autosaves) beibehalten möchte.
- Pingbacks – Deaktiviere Pingbacks, da dunicht jedes Mal benachrichtigt werden möchtest, wenn du einen internen Link hinzufügst. Du kannstTrackbacks eingeschaltet lassen, um Blogs zu benachrichtigen, die du mit ihnen verlinkt hast.
- Beitragsrevisionen – werden jedes Mal gespeichert, wenn du auf Speichern, Veröffentlichen oder Aktualisieren klickst, und sammeln sich mit der Zeit an. Du kannst Überarbeitungen in einigen Optimierungs-Plugins oder manuell mit Code begrenzen oder WP-Optimize verwenden, um geplante Datenbankbereinigungen durchzuführen und dabei eine bestimmte Anzahl von Überarbeitungen beizubehalten.
define( 'WP_POST_REVISIONS', 10 );
- Plugin-Datenaustausch – in Plugins deaktivieren, um ein wenig Ressourcen zu sparen, sorry Plugin-Entwickler!
- Bots – das Blockieren von Spam-Bots und die Verwendung der Crawler-Hinweise von Cloudflare spart Ressourcen von Bots.
- Kommentarspam – ich verwende Antispam Bee und setze diese Wörter in den Einstellungen auf eine schwarze Liste.
- Hosting-Funktionen – WP Johnny hat gute Tipps zum Deaktivieren von ungenutzten Diensten in deinem Hosting-Konto wie DNS, E-Mail, FTP/SFTP, Proxies oder anderen Diensten, wenn du diese nicht nutzt.
- Plugins zum Entfernen von Bloat – Unbloater + WooCommerce Bloat die aufgeblähten Dateien entfernen.
20. Mobil
Schlechte mobile Ergebnisse in PSI sind ein häufiges Problem. Die meisten Desktop-Optimierungen lassen sich auf Mobilgeräte übertragen, also beginne zunächst mit den „allgemeinen Optimierungen“. Ansonsten findest du hier mobilspezifische Tipps.
- Ändere die Größe von Bildern für Mobilgeräte – Bild-CDNs und adaptive Bild-Plugins übernehmen diese Aufgabe.
- Verringere die Latenzzeit – verwende einen schnelleren DNS, schnellere TLS-Versionen und 0-RTT von Cloudflare.
- Ersetze Schieberegler/Galerien durch statische Bilder – verwende dazu responsive Bearbeitung.
- Entferne ungenutzte CSS/JS – Perfmatters kann ungenutzte CSS/JS nach Gerätetyp deaktivieren.
- Verwende AMP nicht – es gibt viele Herausforderungen und die meisten WordPress-Nutzer sind sich einig es nicht zu verwenden.
- Behebe mobile Layout Verschiebungen – Googles Layout-Shift-Debugger testet mobile Layout-Verschiebungen.
- Verwende mobiles Caching – aktiviere dies in deinem Cache-Plugin oder verwende eines, das dies unterstützt.
- Erkenne, wann du einen separaten mobilen Cache verwenden solltest – lese die Dokumentation deines Cache-Plugins.
- Reduziere die Bildqualität bei langsamen Verbindungen – versuche Cloudflare Mirage oder Optimole.
- Prüfe die Reaktionsfähigkeit – auch wenn du ein responsives Theme verwendest, prüfe dies manuell.
- Füge eine Schaltfläche „Mehr Kommentare laden“ auf dem Handy hinzu – das hilft, wenn du viele Kommentare hast.
![FlyingPress Responsive Images](https://www.dowebwork.de/wp-content/uploads/2022/12/FlyingPress-Responsive-Images.png)
![Perfmatters disable plugins on mobile](https://www.dowebwork.de/wp-content/uploads/2022/12/Perfmatters-disable-plugins-on-mobile.png)
21. WooCommerce
WooCommerce-Websites haben oft mehr Plugins, Skripte und Stile und sind ressourcenhungriger als statische Websites. Du musst deine Website noch weiter optimieren, wenn du gute Ergebnisse erzielen willst.
- Hosting – wphostingbenchmarks.com hat mehrere WooCommerce-Hosts getestet, obwohl ich denke, dass es viel bessere Optionen als die getesteten gibt (ich persönlich würde zu etwas wie Rocket.net, GridPane, RunCloud tendieren). Offensichtlich sehr wichtig.
- Entferne WooCommerce admin bloat – Disable WooCommerce Bloat ist gut für diese.
- Cloudflare Argo + Tiered Cache – besonders gut für die Beschleunigung von dynamischen Anfragen.
- Redis – auch speziell gut für WooCommerce (insbesondere Redis Object Cache Pro).
- Gehe sparsam mit WooCommerce-Erweiterungen um – genau wie bei anderen Plugins solltest du diese nur minimal einsetzen.
- Entlade WooCommerce-Plugins – Woo-Plugins sind berüchtigt schlecht mit dem Laden über deine gesamte Website. Verwende dein Asset-Entlade-Plugin, um sie dort zu deaktivieren, wo sie nicht verwendet werden.
- Größe der Produktbilder – Erscheinungsbild → Anpassen → WooCommerce → Produktbilder.
- Erhöhe das Speicherlimit – bei WooCommerce-Websites muss es in der Regel noch weiter erhöht werden.
- Browser-Cache-TTL – Google empfiehlt 1 Jahr, aber 1 Monat ist gut für dynamische Websites.
- Elasticsearch – beschleunigt die Suche insbesondere bei Websites mit Tausenden von Produkten.
- Lösche abgelaufene Transienten – diese können sich schnell ansammeln, also lösche sie häufiger.
22. Sicherheit
Mit den richtigen Optimierungen (und einer Firewall) solltest du kein Sicherheits-Plugin benötigen.
![WordPress Security Checklist 1](https://www.dowebwork.de/wp-content/uploads/2022/12/WordPress-Security-Checklist-1.png)
Ein paar weitere Tipps:
- Verstecke deine WordPress-Version.
- Verwende einen Hoster, der Sicherheit ernst nimmt.
- Füge Sicherheits-Header hinzu (versuche das HTTP-Header-Plugin).
- Verwende Firewall-Regeln von Cloudflare (d.h. greife nur von deiner IP-Adresse auf wp-login zu).
- Deaktiviere die Dateibearbeitung um Hacker daran zu hindern Theme-/Plugin-Dateien zu bearbeiten.
- Folge sicherheitsrelevanten Social-Media-Konten wie Cloudflare/Wordfence.
- Prüfe auf bekannte Sicherheitslücken, bevor du etwas aktualisierst(insbesondere Plugins).
23. PHP-Version
Nur 7 % der Websites verwenden PHP 8.
Du weißt wahrscheinlich, dass höhere PHP-Versionen schneller und sicherer sind. Google „PHP-Version [deines Hosts] aktualisieren“ und du wirst eine Anleitung finden. Wenn die Aktualisierung deine Website beschädigt, kehre einfach zu deiner älteren Version zurück (oder entferne inkompatible Plugins, die nicht gut gewartet werden).
![WordPress PHP Versions](https://www.dowebwork.de/wp-content/uploads/2022/12/WordPress-PHP-Versions.png)
24. Teste ob die vorgenommenen Optimierungen funktionieren
Du hast die Dinge eingerichtet, aber funktionieren sie auch? Vergewissere dich, dass sie funktionieren.
- Caching – Cache-Plugins sollten eine Dokumentation haben, um zu überprüfen, ob das Caching funktioniert.
- Redis/memcached – der Verbindungstest von LiteSpeed Cache und die meisten Redis-Plugins sagen es dir.
![LiteSpeed Cache Object Cache](https://www.dowebwork.de/wp-content/uploads/2022/12/LiteSpeed-Cache-Object-Cache.png)
- CDN-Analysen – wie viele Anfragen werden von Bots, Hotlink-Schutz und WAF blockiert? Wie hoch ist deine Cache-Trefferrate (hoffentlich um die 90 %)? CDN-Analysen sind sehr nützlich.
- Dr. Flare – Chrome-Erweiterung zur Anzeige zahlreicher Cloudflare-Statistiken wie Cache-Trefferrate, nicht gecachte Anfragen, nicht-Cloudflare-Anfragen, wie viel % durch Polish/Minify reduziert wurde.
- CDN-Rewrites – werden deine Dateien tatsächlich von deinem CDN ausgeliefert? Überprüfe deine CDN-Analytics, Dr. Flare oder sieh dir deinen Quellcode an, um sicherzustellen, dass die Dateien vom CDN ausgeliefert werden, wenn du eine CDN-URL wie diese verwendest: cdn.mywebsite.com/wp-content/uploads/logo.png. Wenn du BunnyCDN verwendst, kannst du möglicherweise mehr Dateien von BunnyCDN bereitstellen, indem du deine CDN-URL zusätzlich zum BunnyCDN-Plugin zu deinem Cache-Plugin hinzufügst. Bei mir hat es funktioniert.
- APO – Überprüfe, ob der APO von Cloudflare funktioniert, indem du deine Website in uptrends.com testest und dann sicherstellst, dass die Header genau mit dem übereinstimmen, was Cloudflare in der Dokumentation anzeigt.
![Test Cloudflare APO 1](https://www.dowebwork.de/wp-content/uploads/2022/12/Test-Cloudflare-APO-1.png)
- Asynchrones CSS – wenn du dies verwenden, sollten Cache-Plugins auch eine Dokumentation haben.
- Externe Cron Jobs – überprüfe die Protokolle in deinem Hosting-Account, um sicherzustellen, dass diese ausgelöst werden.
- Wasserfalldiagramme – nach jeder Optimierung solltest du idealerweise die Auswirkungen anhand eines Wasserfalldiagramms überprüfen (besser als einen weiteren PageSpeed Insights-Test durchzuführen und die Ergebnisse zu testen).
- Cache leeren – möglicherweise musst du den Cache leeren oder kritische CSS neu generieren, um deine Änderungen zu sehen.
25. Geschwindigkeits-Plugins
Natürlich brauchst du nicht alle diese Plugins, vor allem, wenn du ein Cache-/Optimierungs-Plugin verwendst, das bereits einige dieser Aufgaben übernimmt, oder wenn du Cloudflare-Bilder optimieren oder Dinge manuell codieren kannst.
Plugin | Kategorie | Preis |
---|---|---|
FlyingPress | Cache | Kostenpflichtig |
LiteSpeed Cache | Cache | Kostenlos |
Perfmatters | Mehrere Kategorien | Kostenpflichtig |
Cloudflare | CDN | Kostenpflichtig |
Super Page Cache for Cloudflare | CDN | Kostenlos |
WP-Optimize | Datenbank | Kostenlos |
FlyingProxy | CDN | Kostenpflichtig |
Flying Pages | Hinweise zu Ressourcen | Kostenlos |
Flying Scripts | JavaScript verzögern | Kostenlos |
Flying Analytics | Analyse | Kostenlos |
Optimole | Bild | Freemium |
ShortPixel | Bild | Freemium |
ShortPixel Adaptive Images | Bild | Freemium |
WP YouTube Lyte | Video | Kostenlos |
OMGF | Schrift | Kostenlos |
WP Foft Loader | Schrift | Freemium |
Pre* Party Resource Hints | Hinweise zu Ressourcen | Kostenlos |
BunnyCDN | CDN | Kostenpflichtig |
WP Crontrol | Cron Job | Kostenlos |
Unbloater | Bloat entfernen | Kostenlos |
Debloat | Bloat entfernen | Kostenlos |
WooCommerce Bloat entfernen | Bloat entfernen | Kostenlos |
Heartbeat Control | Bloat entfernen | Kostenlos |
Disable XML-RPC | Bloat entfernen | Kostenlos |
Widget Disable | Bloat entfernen | Kostenlos |
Limit Login Attempts | Security | Kostenlos |
WPS Hide Login | Security | Kostenlos |
Redis Object Cache | Cache | Kostenlos |
Blackhole For Bad Bots | Bots blockieren | Kostenlos |
Simple Local Avatars | Kommentare | Kostenlos |
Preload Featured Images | LCP | Kostenlos |
Query Monitor | Diagnose | Kostenlos |
WP Server Health Stats | Diagnose | Kostenlos |
WP Hosting Benchmark | Diagnose | Kostenlos |
WP Hosting Performance Check | Diagnose | Kostenlos |
26. Hilfe holen
Brauchst du noch Hilfe? Ich bin nicht zu mieten, aber hier ist, was ich habe:
DIY
- Suche in der WP Speed Matters Facebook-Gruppe.
- Plugins wie Perfmatters haben eine hervorragende Dokumentation.
- Meine anderen Artikel (wenn dir dieser gefallen hat, habe ich noch viele weitere).
Hilfe anheuern
- WP Fix It – ich habe sie einmal beauftragt, um Probleme im Zusammenhang mit zentralen Webvitalen zu verbessern. Obwohl ich mit der Arbeit sehr zufrieden war, schlossen sie mein Ticket ohne Vorankündigung und sagten, das Projekt sei erledigt, selbst als ich ihnen sagte, ich würde mehr bezahlen, da die wirkliche Behebung der Probleme mehr Arbeit erforderte.
27. Meine Einrichtung
Mein gesamtes Setup kostet etwa 500 $/Jahr.
Es wird davon ausgegangen, dass du bereits ein leichtgewichtiges Theme hast (z.B. GeneratePress/Kadence) und jährlich für Rocket.net zahlst, da du 2 Monate kostenlos bekommst. Es setzt auch voraus, dass du Rocket.net’s niedrigeren $25/mo Plan verwendest (ich zahle $50/mo für den Business Plan). Für meine Website ist dies die beste Lösung, die ich gefunden habe.
Mein Blog kostet etwa 800 $/Jahr, was viel billiger ist als das, was ich bisher bezahlt habe (vor allem, weil das Hosting teurer wird, wenn man es skaliert). Die Skalierung bei Rocket.net ist vernünftig, da die monatlichen Besuche und der Arbeitsspeicher 10x so hoch sind wie bei Kinsta, und es gibt keine PHP-Worker-Limits, da nur etwa 10 % des Traffics auf den Ursprung trifft (dank Ben Gablers Cloudflare-Enterprise-Setup, das ich empfehle, sich an ihn zu wenden).
LiteSpeed ist ebenfalls solide und kann billiger sein, da LiteSpeed Cache kostenlos ist und E-Mail-Hosting oft inbegriffen ist. Sieh dir NameHero, ChemiCloud und Scala an (sie scheinen gute Spezifikationen und TrustPilot-Bewertungen zu haben). RunCloud, Liquidweb sind wahrscheinlich am besten für größere Websites geeignet.
Ich habe Cloudways verwendet. Ich denke immer noch, dass sie besser sind als die meisten Hoster, aber es wird teuer mit all den Add-ons, du verwendest Apache-Server und Cloudflare Enterprise + Breeze brauchen etwas Überarbeitung.
Service | Preis | Notiz |
---|---|---|
Rocket.net | $25/Monat |
|
Cloudflare Enterprise | Gratis auf Rocket.net |
|
GeneratePress | $249 (einmalig) |
|
GenerateBlocks | $39/Jahr |
|
FlyingPress | $3.5/Monat (Preis nach der Verlängerung) |
|
Perfmatters | $24.95/Jahr |
|
Gesamtpreis pro Jahr | $405.95/Jahr |
|
Natürlich verwende ich auch andere Tools/Plugins, aber das ist meine Grundlage.
Warum läuft WordPress langsam?
Es kann mehrere Probleme geben, warum deine WordPress-Website so langsam lädt. Es könnte ein langsamer Server-Host sein, zu viele oder veraltete Plugins, nicht optimierte Bilder, fehlende Caching-Möglichkeiten usw. Das Problem kann rein technischer Natur sein oder einfach daran liegen, dass deine Website nicht mit den neuesten aktualisierten Versionen Schritt hält.
Wie kann ich eine langsame WordPress Webseite schneller machen?
Lass uns die sieben Schritte zur Fehlerbehebung einer langsamen WordPress-Website von Anfang bis Ende wiederholen:
– Messe die anfänglichen Ladezeiten deiner Website.
– Lösche oder ersetze langsame Plugins.
– Optimiere deine Bilder.
– Bereinige deine WordPress-Datenbank.
– Füge „Lazy Loading“ zu deiner Website hinzu.
– Implementiere ein CDN.
Was beeinflusst die Geschwindigkeit von WordPress-Websites?
Der wichtigste Faktor, der die Geschwindigkeit einer Website beeinflusst, ist das Hosting deiner WordPress-Website. Es mag eine gute Idee sein, deine neue Website bei einem Shared-Hosting-Anbieter zu hosten, der „unbegrenzte“ Bandbreite, Speicherplatz, E-Mails, Domains und mehr bietet.
Verlangsamen Plugins WordPress?
Da viele Website-Besitzer keine Programmierkenntnisse haben, sind Plugins eine schnelle Lösung. Allerdings kann das Hinzufügen zu vieler Plugins zu deiner WordPress-Website problematisch werden. In den meisten Fällen verlangsamen zu viele Plugins deine Website und beeinträchtigen die Ladezeiten.
Ich hoffe, du hast etwas Neues gelernt! Schreibe mir einen Kommentar, wenn du Fragen/Vorschläge hast.
Liebe Grüße
Joe