WordPress PageSpeed & Ladezeit verbessern

Es gibt 3 gute Gründe für eine Ladezeit-Optimierung:

1. Die Geschwindigkeit deiner Website ist ein wichtiger Erfolgsfaktor bei der Usability-Optimierung: Neben einer einfachen Bedienung sind schnelle Ladezeiten das A und O, um die Conversion-Rate einer Website zu verbessern – abgesehen von den inhaltlichen Maßnahmen. Ein extremes Beispiel dazu: Für jede 100 Millisekunden, die Amazon schneller lädt, steigt der Umsatz des Online-Händlers um ein Prozent (Quelle).
2. Der Co2-Abdruck einer Website ist nach einer Performance-Optimierung in der Regel deutlich kleiner, da weniger Daten geladen werden müssen. Mit dem Tool Website Carbon kannst du den Fußabdruck deiner Website messen.
3. Wie stark sich schnelle Ladezeiten auf die SEO auswirken, ist allerdings unklar: Google legt zwar großen Wert auf schnelle Websites und gibt Ladezeit als „Core Web Vitals“ auch direkt in der Search Console – dem wichtigsten SEO-Tool an – aber durch eine PageSpeed-Optimierung alleine explodieren Rankings nicht. Eine professionelle Suchmaschinenoptimierung wäre ohne Berücksichtigung von Ladezeiten allerdings unmöglich.

Um dein WordPress-Projekt zu beschleunigen, habe ich dir die wichtigsten Tipps zur Performance- und PageSpeed-Optimierung zusammengestellt, die ich in den letzten zehn Jahren mit WordPress gesammelt habe und etwa alle 6 Monate für diesen Beitrag aktualisiere.

Performance-Tests

3 Sekunden sollte deine Website maximal laden. Unter 2 Sekunden Ladezeit und ein PageSpeed von über 90% (Desktop und Mobil) sind optimal.

Zu Beginn deiner Performance-Optimierung solltest du erst mal feststellen, wie schnell deine Seite überhaupt ist. Das geht am einfachsten mit den Google PageSpeed Insights. Ich empfehle dir dort erstmal nur deine Startseite zu prüfen, während der weiteren Optimierung zusätzlich die URLs der wichtigsten Unterseiten bzw. Layouts zu überprüfen.

• Ein PageSpeed von 0 bis 49 ist schlecht und sollte dringend optimiert werden
• Ein PageSpeed von 50 bis 89 ist verbesserungsfähig und sollte mobil bei B2C-Unternehmen dringend optimiert werden, bei B2B-Unternehmen mit mittlerer Priorität, da hier der Desktop-Traffic aktuell noch wichtiger ist
• Ein PageSpeed ab 90 ist gut und sollte sowohl bei B2C- als auch bei B2B-Unternehmen angestrebt werden.

Google bewertet den PageSpeed einerseits durch einen Live-Test, andererseits durch gespeicherte Testergebnisse des sogenannten Lighthouse Audits – einem 2019 eingeführten Testverfahren für sogenannte „Web Vitals“ (also allem, was eine Website nutzerfreundlicher machen kann).

Die Web Vitals sind seit April 2021 offizielle Rankingfaktoren. Wie anfangs beschreiben ist deren Gewichtung als Erfolgsfaktor aber unklar. Dabei sollte der Fokus auf folgende Faktoren gelegt werden, um Nutzerinnen eine optimale Website-Usability zu bieten:

• Largest Contentful Paint (LCP) misst die Ladeleistung = wie schnell die Inhalte dargestellt/ gerendert werden. Um ein gutes Benutzererlebnis zu bieten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite auftreten.
• First Input Delay (FID) misst die Interaktivität = wie schnell man die Seite bedienen kann. Um ein gutes Benutzererlebnis zu bieten, sollten Seiten eine FID von weniger als 0,1 Sekunden haben.
• Cumulative Layout Shift (CLS) misst die visuelle Stabilität = ob es beim Laden zu Sprüngen von Elementen kommt. Um ein gutes Benutzererlebnis zu bieten, sollten Seiten einen CLS-Wert von weniger als 0,1 Sekunden aufweisen.

Du kannst die Web Vitals im PageSpeed-Test, über web.dev/measure/ oder im Chrome Browser durch Klick auf die rechte Maustaste > Untersuchen auch direkt in den Entwickler-Tools ermitteln:

Da Google den PageSpeed nur prozentual angibt und nicht die reale Ladezeit angeben wird, empfehle ich dir zusätzlich mit WebPageTest zu messen. Das Tool ermittelt in drei Durchläufen die exakte Ladezeit, wie deine Website am Nutzerstandort lädt (z.B. Frankfurt für Deutschland, Dallas für USA).

Als Erinnerung vom Anfang: Maximal 3 Sekunden Ladezeit sollte deine Website an jedem Standort benötigen, den du mit entsprechenden Sprachen deiner Website fokussierst. Im folgenden Beispiel habe ich Frankfurt als nächstgelegen Teststandort gewählt, da ich mich in München befinde und erhalte als „Time“ für „Fully Loaded“ – also als Gesamtladezeit – 1,629s.

WebPageTest bewertet die Ladezeit zusätzlich mit amerikanischen Schulnoten: A entspricht der deutschen Note 1, F der Note 6. Wenn ein X da steht bedeutet heißt das, dass eine bestimmte Maßnahme nicht ergriffen wurde. Das bedeutet nicht unbedingt etwas Schlechtes, sondern nur, dass noch eine Option zur Ladezeit-Optimierung genutzt werden könnte. In meinem Screenshot ist das ein CDN, ein sogenanntes „Content Delivery Network“ oder Servernetzwerk, über welches ich mein WordPress-Projekt zusätzlich zum eigenen Server laden lassen könnte. Ein CDN ist prinzipiell nur für internationale Projekte oder Websites mit über 1 Millionen Besuchern empfehlenswert.

Eine weitere wichtige Aussage, die WebPageTest trifft ist, welche Elemente zur Verschlechterung der Ladezeit beitragen. Klickst du eines der „Waterfall“-Diagramme unter den „Test Results“, signalisieren dir die breitesten Balken die gemessene Ladezeit des jeweiligen Elements:

In meinem im Screenshot ist das eine JavaScript-Datei (Erkennst du an der Dateieindung .js in der linken Spalte), die 996 ms braucht. Das ist in meinem Projekt eine wichtige Datei und somit nicht weiter schlimm.

• Falls du im Wasserfall-Diagramm feststellst, dass hier einige Elemente mehr auftauchen, die recht breit sind (primär Bilder), ist eine Optimierung der Dateien empfehlenswert, also eine Bildkompression.
• Falls hier externe Skripte für Tracking-Tools und iframes auftauchen, solltest du diese erst nach Zustimmung im Cookie-Banner laden lassen – was auch aus DSGVO-Sicht empfehlenswert ist.

Grundlagen

Je voller deine Website mit Medien, Plugins und Widgets ist, desto langsamer wird sie. Übrigens, auch ein komplexes Layout kann deine Website verschlechtern, da dann Browser wie Suchmaschinen länger brauchen, sie zu darzustellen („rendern“) und dadurch Nutzerfreundlichkeit und SEO-Erfolge zusätzlich leiden können. Also: Fokussiere dich bei deiner Website auf das Nötigste – obligatorische Informationen und sichtbare Inhalte.

Vorgehen

1. Messe jedes Template (z. B. Startseite, Angebotsseite, Blogartikel) zu Stoßzeiten, also zu der Tageszeit und an den Wochentagen, wann laut deiner Statistik die meisten Nutzerinnen auf der Website sind.
2. Führe nach jeder Optimierung und Einstellung eine Messung durch und prüfe ganz genau in einem Inkognito-Fenster deines Browsers, ob es irgendwo visuelle Einschränkungen gibt.
3. Wiederhole die Performance-Tests alle drei bis sechs Monate.

Bilder

Bilder sind die größten Performance-Killer. Achte deswegen zunächst darauf, Fotos und Grafiken in den richtigen Dateiformaten und in den benötigten Dimensionen in deine Website zu laden:

• Fotos und Grafiken mit vielen Farben exportierst du als JPG- oder WebP-Dateien mit möglichst reduzierter Qualität fürs Web. Fotos bitte mit etwa 60–80 % Qualität speichern.
• Grafiken mit weniger Farben baust du als PNG-, GIF- oder SVG-Dateien (Vektorgrafiken) in deiner Website ein. Bei PNG- und GIF-Dateien reduzierst du die Anzahl der Farben beim „Für Web speichern“ auf das Nötigste.
• Alle Bilder sollten maximal in 1920 x 1080px (B x H) in die Website geladen werden, besser in geringerer bzw. nur in der wirklich benötigten Auflösung.

Für SVG-Dateien benötigst du aktuell eine Codeerweiterung deiner functions.php-Datei oder ein extra SVG Plugin, welches die SVG-Dateien in WordPress unterstützt – ansonsten kannst du keine SVGs in die Mediathek laden. Überflüssige Plugins wollen wir aber eigentlich vermeiden, deswegen empfehle ich immer die Erweiterung per Code.

Zusätzlich solltest du deine JPG- und PNG-Dateien vor Upload manuell mit TinyPNG (bis zu 20 Bilder auf einmal) oder automatisch bei Upload mithilfe des TinyPNG-WordPress-Plugins komprimieren. Eine nachträgliche serverseitige Komprimierung ist nicht so stark wie die beiden Tools. Deswegen lade ich notfalls alle Bilder einer Website per FTP-Programm herunter, komprimiere sie und überschreibe dann wieder auf dem Server. Damit riskiere ich zwar Bilder-Rankings, allerdings spielen Nutzerinnen, die über Bilder-Suchergebnisse auf unsere Website kommen, keine nennenswerte Rolle – sie kaufen einfach nichts und überfliegen Inhalte nur.

Eine Alternative zu TinyPNG ist Compressor.io, welches zusätzlich SVG-Dateien komprimieren kann. Allerdings gibt es dafür kein WordPress-Plugin.

Plugins & Slider

Vermeide alle unnötigen Plugins! Hinterfrage bei jeder Lösung, ob sie wirklich erforderlich ist und wenn ja, ob du sie eventuell durch eine Einprogrammierung ins Theme oder ein Plugin mit mehreren Lösungen statt vieler Einzelplugins ersetzen kannst.

Sofern du ein neues WordPress-Projekt hast oder den Wechselaufwand bei einem bestehenden Projekt in Kauf nimmst, empfehle ich dir auf den Standard-Editor von WordPress zu setzen, den Gutenberg-Block-Editor, da dieser schneller ist als WP Bakery Visual Composer, Elementor und Co.

Außerdem sind Slider hochproblematisch (insbesondere der Slider Revolution), da sie nicht nur per se langsam sind, sondern die Bilder in unsichtbaren Slides unnötig Ladezeit kosten, obwohl sich auch kaum jemand die Zeit nimmt, alle Slides anzusehen. Selbst Google rät dazu, Slider nur mit Bedacht einzusetzen und bspw. eine Autoplay-Funktion komplett zu vermeiden (Quelle: Google UX Playbook, Seite 8).

Setze statt Slidern besser auf eigene Animationen oder Videos. Es ist beispielsweise möglich, HTML5- und GIF-Animationen mittels Animatron zu erstellen und nur dann zu laden, wenn die Elemente in den sichtbaren Bereich scrollen. Gleiches gilt für eingebettete YouTube-Inhalte.

Tracking-Tools und iframes

Ähnlich schlecht für deinen PageSpeed sind die meisten Tracking-Tools. Damit sind weniger Web-Analysen wie Google Analytics, etracker oder Matomo (ehem. Piwik) gemeint, sondern vielmehr Werbe-Trackings wie das Facebook Pixel oder Mouse-Trackings wie hotjar.

Am besten lädst du alle externen Tracking- und Marketing-Tools sowie Medien mit Hilfe eines Cookie Plugins erst nach dem Einverständnis deiner Nutzerinnen. Das ist DSGVO-konform und hilft praktischerweise auch bei der Performance-Optimierung. Ich empfehle dazu das Plugin Borlabs Cookie (Partnerlink) einzusetzen, sofern du ausschließlich WordPress-Websites betreibst:

Wenn du allerdings mehrere CMS oder beispielsweise eine externe HR-Software zur Verwaltung von Stelleninseraten einsetzt, dann bist du mit Borlabs Cookie nicht gut beraten, da diese Lösung kein von WordPress entkoppeltes Cookie-Banner anbietet. Dann sind beispielsweise Usercentrics und Cookiebot eine bessere, wenngleich etwas langsamere Lösung.

Mit deinem Cookie-Banner solltest du auch iframes mit externen Inhalten, wie z.B. YouTube-Videos und Google Maps standardmäßig blockieren und erst nach dem Einverständnis deiner Nutzerinnen laden lassen. Das ist ebenfalls nicht nur zur Verbesserung der Ladezeiten, sondern auch aus DSGVO-Sicht erforderlich.

Google Schriftarten

Google-Schriftarten stellen einen ähnlichen Sachverhalt wie Tracking-Tools und iframes dar. Da sie jedoch oft ein wichtiges Designelement darstellen, kann ich nicht die Entfernung empfehlen, wenngleich das die beste Wahl wäre.

Generell empfehle ich den bewussten Einsatz von Webschriften und Google Fonts, sprich diese nur abgewogen und nicht mehr als 2 Schriftarten und 3 Schnitte (z.B. Normal, Fett, Furvsiv) einzusetzen.

Google Fonts sind nicht nur langsam, sondern dürfen auch aus Datenschutzgründen nicht von extern geladen werden und werden daher oft abgemahnt. Deswegen solltest du sie entweder mit dem WordPress-Plugin Local Google Fonts oder etwas Programmierung mithilfe des Google Webfonts Helpers lokal in deine Website laden. Zusätzlich solltest du dann im Caching-Plugin die Schriften vorladen, damit beim Aufbau deiner Website die Schriften nicht nachgeladen werden und Elemente springen – sprich das „Cumulative Layout Shift“ steigt. Dazu später mehr.

Kommentare

Ein weiterer Performance-Killer von WordPress ist das Avatar-System der Kommentarfunktion. Denn hierfür wird standardmäßig ein externer Dienst namens Gravatar eingesetzt, der bei jedem Laden einer URL, die Kommentare oder die Kommentarfunktion enthält, aufgerufen wird.

Gravatar verlangsamt nicht nur deine Website, sondern ist zumindest datenschutzrechtlich bedenklich, da wir nicht wissen, was Gravatar alles mit den Daten deiner Website-Besucher macht. Wenn du die Kommentare von WordPress aktiviert hast (in den Einstellungen unter Diskussion), empfehle ich dringend, die Avatare zu deaktivieren:

Durch die Einstellungen von paginierten Kommentaren („Kommentare in Seiten umbrechen“) und Archiven kannst du meist zusätzliche Ladezeit auf entsprechenden Seiten einsparen.

Cacheing

Nach den Grundeinstellungen in WordPress solltest du den Server- und Browser-Cache deiner Besucher (Zwischenspeicher) nutzen, um deine WordPress Seite noch schneller ausspielen zu lassen. Der Vorteil von einem Cache ist, dass alle wichtigen Dateien direkt an der richtigen Stelle für deine Besucher bereitgehalten und somit deine Inhalte viel schneller dargestellt werden, als wenn sich das CMS jede einzelne Datei aus dem Theme oder der Datenbank ziehen muss.

Bevor ich dir die Arbeit mit Cacheing-Plugins und -Einstellungen vorstelle, eine kleine, aber wichtige Erinnerung: Bitte teste nach jeder Einstellung deine Website in einem Inkognito-Fenster deines Browsers und leere deinen Browser-Cache, falls du Sachen anders dargestellt bekommst, als andere Tester oder Nutzerinnen.

Ich setze zum Caching am liebsten das Premium Plugin WP Rocket (Partnerlink) ein, da es das stärkste und gleichzeitig am einfachsten zu bedienende Cacheing-Plugin für WordPress ist.

Folgende Cacheing-Plugins sind kostenlose (und in der Regel langsamere) Alternativen zu WP Rocket:

• WP Fastest Cache ist auch einfach zu bedienen, leider nicht Multisite-kompatibel
• W3 Total Cache ist sehr komplex aber genauso stark und manchmal sogar stärker als WP Rocket).

Ich erkläre hier das Setup von WP Rocket. Bist du kein Profi, willst aber auf W3 Total Cache setzen, empfehle ich dir den kostenpflichtigen Setup-Service vom W3-Team.

Grundsätzlich empfehle ich dir einen separaten Cache für Desktop- und Mobilgeräte zu aktivieren, da mittlerweile die meisten Websites unterschiedliche Styles dafür laden können.

Außerdem solltest du in der Regel kein Cacheing für angemeldete WordPress-Benutzer aktivieren, damit du und deine eingeloggten Nutzerinnen immer die aktuellste Version deines Projektes siehst. Für alle anderen Nutzerinnen wird eine Cache-Lebenszeit eingestellt, nach welcher im Zwischenspeicher „gelagerte“ Informationen automatisch ablaufen und die aktuellste Version der Website geladen wird. Die Cache-Dauer wird von WP Rocket mit 10 Stunden empfohlen, was gut ist, veröffentlichst du jedoch häufiger als in dem Intervall neue Inhalte, würde ich die Dauer auf die Veröffentlichungsintervalle reduzieren, beispielsweise auf 30 oder 60 Minuten. Das ist nur zum Vorbeugen von Darstellungsproblemen gedacht, die mangels Aktualisierung entstehen können. Der Cache wird nämlich immer geleert, wenn du einen Inhalt veränderst oder einen neuen Inhalt veröffentlichst.

Anschließend probierst du nach und nach jede Option der Datei-Optimierung aus: Dazu testest du nach Aktivierung jeder einzelnen Funktion, ob Funktions- oder Darstellungsfehler auftauchen: Bei der CSS-Optimierung sind es meist Darstellungsfehler, bei der JavaScript-Optimierung sind es meist Funktions- und Animationsfehler, die vor allem bei Formularen und interaktiven Elementen auftauchen können. Wenn du Fehler feststellst, deaktivierst du die Option oder definierst Ausnahmeregeln für bestimmte Dateien. Hierzu kannst du erneut das Wasserfall-Diagram von WebPageTest öffnen und die einzelnen Dateipfade nach dem vorgegebenen Muster in den Ausnahmefeldern Absatz-separiert einfügen oder arbeitest mit den Entwicklertools deines Browsers (für Profis), um alle Fehlerquellen zu identifizieren.

Dann wechselst du in die Medienoptimierung und aktivierst alle Optionen.

Ich empfehle vor allem LazyLoading zu nutzen, damit Bilder, Videos und Inhalte externer Quellen nur dann nachgeladen werden, wenn sie in den sichtbaren Bereich des Browsers kommen. Mit Google Chrome Version 76 ist seit Mitte 2019 zwar eine browserseitige Nachladefunktion erschienen, die mittlerweile auch in anderen Browsern Einzug findet, allerdings ist Website-seitiges Nachladen immer noch empfohlen.

Unter dem Reiter „Cache füllen“ fügst du idealerweise die lokal gehosteten Web-Schriften und Google Fonts ein, um diese vorzuladen.

Hosting

Das Web Hosting spielt auch eine wichtige Rolle bei der Ladezeit-Optimierung. Stellst du bei Webpage Test fest, dass deine „First Byte Time“ schlechter oder gleich der Note C entspricht oder langsamer als 0,5s ist, empfehle ich dir deinen Hoster zu hinterfragen.

Speziell die bekannten Masse-Hoster wie Strato oder Ionos haben oft schlechte Reaktionszeiten sowie entsprechenden Service – auch wenn die Unternehmen gegenteiliges versuchen zu behaupten. Das liegt daran, dass sehr viele Kundenseiten auf einem Server liegen und die Rechner dann überlastet sind, wenn ein Kunde mal etwas mehr Traffic hat. Und das kommt häufig vor. Bei regelmäßigen Messungen der bekanntesten Webhoster in Deutschland, habe ich dieses Phänomen aber auch bei Hetzner, All Inkl und Alfahosting feststellen können. Die einzigen Hoster, die ich empfehlen kann, sind:

• HostPress (Partnerlink, die Empfehlung ist aber unabhängig davon zustande gekommen) mit extrem schnellen Servern und exzellentem Support. HostPress ist zwar etwas teurer als die meisten anderen Hoster, aber bietet dafür das beste Setup, das ich kenne. Du kannst dort auch einen kostenlosen Demo-Umzug (Partnerlink) durchführen lassen, um dich selber davon zu überzeugen. Und noch ein Schmankerl für den besten WordPress Hoster: Mit dem Code 25-delucks bekommst du bei Vertragsschluss einmalig 25€ Rabatt.
• Host Europe, wobei ich ausschließlich die klassischen Webhosting-Tarife empfehle, welche äußerst preiswert sind. Die WordPress-Tarife sind durch eine schlechte Kooperation mit ManageWP, das zum gleichen Mutterkonzern Godaddy gehört, extrem langsam und umständlich in der Verwaltung. Hiervon rate ich explizit ab. Der E-Mail- und Telefon-Support von HostEurope ist schnell, aber denkt nicht immer aktiv mit und in die Zukunft.

Einstellungen

Logge dich dazu in dein Web Hosting ein und suche in den Einstellungen nach:

• PHP-Version: Diese sollte bei einer aktuellen WordPress-Version mindestens 8.0 betragen, besser PHP 8.1. Für ältere WordPress-Projekte, die nicht auf dem aktuellsten Stand sind, könnte aber auch PHP 7.4 erforderlich sein.
• PHP Memory Limit: Dieses sollte so hoch wie möglich eingestellt sein. Idealerweise beträgt es mindestens 256M (M steht für Megabyte), wir haben es sogar auf 512M gestellt, um möglichst viele Daten in unseren Arbeitsspeicher – also den Serverseitigen Cache – zu legen.
• Optional aktivierst du noch den APC User Cache (APCu), ein Modul zur Beschleunigung der PHP-Programmiersprache.
• Optional aktivierst du noch NGINX, ein super schnelles Caching.

Fazit

WordPress Performance-Optimierung ist eine Herausforderung, die aber mit ein paar Einstellungen und Plugins gut in den Griff zu bekommen ist: Wenn du dich schon bei der Konzeption deiner Seite auf die nötigsten Funktionen beschränkst und alle Bilder vor Upload komprimierst, bist du auf dem richtigen Weg. Cacheing und Hosting richten außerdem viel aus.

Umgekehrt bringt aber auch das schnellste System wenig, wenn Administratoren große Bilder hochladen und massenhaft externe Ressourcen einbetten. Arbeitest du im Team, solltest du also auch deine Kolleginnen auf das Thema sensibilisieren.

Vergesse am Ende jeder Performance-Optimierung nicht den Vorher-Nachher-Vergleich.