Icon for WordPress Performance and Cacheing Optimization

WordPress langsam? So geht Performance-Optimierung

Lerne die richtigen Einstellungen in WordPress, Bildkompression, Caching und Hosting um die Ladezeit zu beschleunigen, den PageSpeed zu optimieren und deine Google Rankings zu verbessern.

Die Geschwindigkeit deiner Website ist ein wichtiger Rankingfaktor: Neben einer einfachen Bedienung, ansprechenden und umfangreichen Inhalten sowie positiver Reputation sind schnelle Ladezeiten das A und O um besser in der Suchmaschine gefunden zu werden. Als Grundregel gilt:

3 Sekunden sollte deine Website maximal laden. 1 Sekunde Ladezeit und ein PageSpeed von über 85% sind das Ziel.

Die Ladezeit deiner Seite kann sich auch auf deinen finanziellen Erfolg auswirken, wie folgendes Beispiel zeigt: Für jede 100 Millisekunden, die Amazon schneller lädt, steigt der Umsatz des Online Händlers um ein Prozent (Quelle). Das ist natürlich ein Extrembeispiel.

Um deine WordPress-Seite zu beschleunigen, habe ich dir die wichtigsten Tipps zur Performance Optimierung zusammengestellt. Falls du Unterstützung zur Ladezeit-Optimierung brauchst, kontaktiere uns: Unsere Programmierer sind PageSpeed-Experten.

Performance-Tests

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, und WebPagetest oder Pingdom. Bitte teste deine Ladezeit immer mit mindestens zwei Tools, denn jedes Tool hat eigene Betrachtungsweisen:

Screenshot fast website through Google PageSpeed test
Screenshot aus Google

Googles PageSpeed Test hat nur sehr bedingt Aussagekraft. Er sagt dir zwar, ob die Suchmaschine deine Seite als schnell befindet, allerdings sind die Optimierungsvorschläge zum Großteil nicht im CMS umsetzbar. Bitte nur den Desktop-Score beachten, da der mobile Score seit dem letzten Update Mitte 2018 kaum Aussagekraft mehr hat:

Google will seit Mitte letzten Jahres mithilfe des sog. Lighthouse-Projekts, anhand dessen die mobile Ladezeit gemessen wird, primär Accelerated Mobile Pages pushen – eine Art Website-Template von Google für mobile Seiten. Diese Technologie ist aber aktuell nur für Newsportale geeignet und bringt diesen neben super schnellen Ladezeiten in eine stärkere Abhängigkeit von Google. Normale Webseiten und Blogs sollen sich Google zufolge auf „Progressive Web Apps“ konzentrieren (Hybride zwischen mobiler Website und nativer App), allerdings werden die von kaum einen aktuellen Browser unterstützt und sind daher genauso wenig konstruktiv einsetzbar. Selbstverständlich habe ich unterschiedliche Progressive Web App-Ansätze ebenfalls für diesen Artikel geprüft, nur bringen die (noch) nichts in Sachen Ladezeit.

Webpage Test ist zwar etwas unübersichtlich, dafür kannst du durch die zahlreichen Auswahlfunktionen zur Standortwahl die Geschwindigkeit deiner Seite an unterschiedlichen Orten messen. Ist deine Seite nur auf Deutsch, reicht der Test mit einem der deutschen Anbieter aus. Ist deine Seite auch auf anderen Sprachen verfügbar, solltest du die Geschwindigkeit auch an anderen Standorten messen, um zu erfahren, ob du vielleicht in einem Land auf ein separates Hosting oder ein Servernetzwerk (sogenanntes Content Delivery Network, kurz: CDN) gehen solltest. Für mich ist Webpage Test der beste Anbieter, wenn es um die Messung der realen Ladezeit und Bewertung der Geschwindigkeit nach (amerikanischen) Schulnoten geht, da jede Website exklusiv und unter realistischen Bedingungen getestet wird.

Screenshot from WebPagetest for a fast website
Screenshot aus WebPagetest

Ich nutze zusätzlich das Tool Pingdom, da es recht übersichtlich aufschlüsselt, wo wie viel Ladezeit noch gespart werden kann:

Screenshot from Pingdom website speed test
Screenshot aus Pingdom

Leider ermittelt das Tool keine subjektiven Ladezeiten, da Pingdom keine exklusiven Tests macht, so wie Webpage Test, sondern viele Seiten parallel prüft und versucht, die Ergebnisse dann zu neutralisieren.

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 jede Ansicht (z. B. Startseite, Angebotsseite, Blogartikel) zu Stoßzeiten.
  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 zu 80 % die größten Performance-Killer. Achte deswegen zunächst darauf, Bilder in den richtigen Dimensionen und im richtigen Dateiformat in deiner Website abzuspeichern oder ersetze dein bestehendes Bildmaterial durch optimiertes:

Fotos und Grafiken mit vielen Farben exportierst du als JPG-Dateien mit möglichst reduzierter Qualität fürs Web. Diese in Photoshop 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.

Für SVG-Dateien benötigst du zwar keine extra Kompression, allerdings unterstützt WordPress aktuell – Stand 08.07.2019 – noch nicht von Haus aus das SVG-Format. Somit benötigst du aktuell eine Codeerweiterung deiner functions.php-Datei oder ein extra SVG Plugin, welches die SVG-Dateien in WordPress unterstützt. Ü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 mit TinyPNG (bis zu 20 Bilder auf einmal), Compressor.io (nur einzelne Bilder) 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 Nutzern, die über Bilder-Suchergebnisse auf unsere Website kommen, keine nennenswerte Rolle – sie kaufen einfach nichts und überfliegen Inhalte nur.

Darüber hinaus ist es empfehlenswert, Bilder erst dann laden zu lassen, wenn sie im sichtbaren Bereich des Nutzers erscheinen. Mindestens bis Ende 2019 ist das sogenannte „Lazy Loading“ noch manuell zu implementieren – am besten mit einem der später erwähnten Caching-Plugins. Im Sommer 2019 erscheint mit dem Chrome Version 76 eine browserseitige Nachladefunktion, die hoffentlich dann auch in anderen Browsern Einzug finden wird.

Plugins & Slider

Vermeide alle unnötigen Plugins. Dazu gehören zunächst Slider (insbesondere der Slider Revolution), da sie nicht nur langsam sind, sondern sich auch kaum jemand die Zeit nimmt, alle Slides anzusehen. Selbst Google rät deshalb explizit von Slidern ab (Quelle: Google UX Playbook, Seite 8).

Bei bachelorprint.de nimmt der Slider Revolution von 3,3 Sekunden Ladezeit insgesamt 2,3s ein.

Setze statt Slidern besser auf eigene Animationen oder Videos. Es ist beispielsweise möglich, HTML5- und GIF-Animationen mittels Flash oder 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, iframes und YouTube

Ä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. Vermeide solche Tracking-Tools soweit möglich oder lasse sie nur unter bestimmten Bedingungen laden – das Thema ist sehr komplex und sprengt den Rahmen dieser Anleitung, gerne beraten wir dich hierzu persönlich.

In die gleiche Kategorie wie Tracking-Tools stecke ich iframes wie z.B. Google Maps. Denn hierbei werden ebenfalls bei jedem Abruf einer URL Daten an externe Server übermittelt, die deine Seite ausbremsen. Verlinke Karten am besten statisch in deinem Inhalt.

Unvermeidbar sind dagegen iframes und Einbettungscodes für YouTube, Vimeo & Co. Videoeinbettungen sind in fast jedem Fall besser als lokal gehostete Videos. Wenn du Videos über YouTube einbettest, kannst du diese – ähnlich wie Bilder – nachladen lassen und zusätzlich mit strukturierten Daten optimieren.

Google Schriftarten

Google-Schriftarten stellen einen ähnlichen Sachverhalt wie Tracking-Tools, iframes oder YouTube-Videos dar. Da sie jedoch oft ein wichtiges Designelement darstellen, kann ich nicht einfach nur die Entfernung empfehlen, wenngleich das die beste Wahl wäre. Übrigens: Systemschriftarten wie Helvetica und Arial oder Georgia und Times sind gar nicht so schlimm (verwende ich hier auch). In Grafiken kannst du beliebig Schriften einsetzen. So macht das übrigens auch Amazon.

Wenn du Google Fonts einsetzen willst, reduziere die Anzahl auf maximal zwei Schriftarten oder Schnitte (z. B. Fett und Kursiv) und unternehme eine der folgenden Optionen:

  • Am besten hostest du die Google-Schriften lokal auf deinem Server. Das erfordert entweder ein WordPress Plugin oder etwas Programmierung. Ich habe diese Einbettung genau in einem Blog-Beitrag unseres WordPress Themes erklärt.
  • Lasse alternativ die Schriften mithilfe eines Caching-Plugins schneller („asynchron“) laden. 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:

WordPress Avatare

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

Ich setze zum Caching je nach Bedarf eines der folgenden Plugins ein. Bevor ich sie dir 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 Nutzer.

WP Rocket

WP Rocket ist meine bevorzugte Lösung, wenn ich mir wenig Zeit zum Setup nehmen will und Budget für die Lizenz habe. Das Plugin kostet derzeit ab 49,00 € pro Website und hat neben allen Funktionen, die man aus anderen Caching-Plugins kennt, sogar eine Funktion an Bord, um Google Analytics lokal zu hosten (so wie das Statistikmodul unseres SEO Plugins). Zusätzlich ist WP Rocket Multisite-kompatibel.

Insgesamt ist das Plugin sehr übersichtlich und einfach zu bedienen, wenngleich es hier – wie in allen anderen Caching-Plugins – in den „erweiterten Regeln“ recht viele Profi-Einstellungen gibt.

WP Fastest Cache

WP Fastest Cache ist etwas komplizierter in der Bedienung, da ein paar Regeln wie der Widget-Cache und die Preload-Funktion gerne Fehler verursachen und Ausschlüsse benötigen sowie die Timeout-Regeln gerne vergessen werden (unter dem Tab „Cache löschen“ – am besten auf 10 Stunden stellen), dafür kostet es in der Basisvariante nichts.

Die Basisvariante kommt allerdings ohne Lazy Loading für Bilder und Videos aus und ist daher nicht so stark wie die Premiumversion. Leider kann man beim Lazy Loading nicht die Bilder separat von den Videos einstellen, so wie das bei WP Rocket der Fall ist. Es fehlen auch Einstellungen zum lokalen Hosting von Google Analytics-Skripten. Abgesehen davon ist WP Fastest Cache leider nicht Multisite-kompatibel.

WP Fastest Cache Premium erweitert das Plugin auf einen ähnlichen Funktionsumfang wie WP Rocket, indem es u. a. besagtes Lazy Loading anbietet und ist mit 49,99 $ praktisch genauso teuer wie WP Rocket. Die Premiumversion kaufst du über das Plugin-Backend (also nach Installation beim Einrichten). Die Ladezeiten von WP Fastest Cache sind in den nachfolgenden Tests einen Tick besser als die von WP Rocket – allerdings habe ich hier keine CSS-Komprimierung aktiv und verglichen mit der Setup-Zeit gleicht sich das dann aber aus:

Unsere Startseite (ohne Medien)


WP Rocket WP Fastest Cache Premium
Ladezeit 1,6s 1,3s
PageSpeed Mobil 75 76
PageSpeed Desktop 94 96

Unsere SEO Plugin Seite (mit vielen Bildern und YouTube Video)


WP Rocket WP Fastest Cache Premium
Ladezeit 2,5s 2,5s
PageSpeed Mobil 66 64
PageSpeed Desktop 92 97

W3 Total Cache

W3 Total Cache ist das mit Abstand komplexestes Caching-Plugin. Es gibt keine Premiumversion, allerdings einen kostenpflichtigen Einrichtungsservice. Dieser ist auch für alle Nicht-Entwickler dringend zu empfehlen, da das Plugin sehr viele Spezial-Optionen zulässt.

Abschließend zu Caching-Plugins: Solltest du keine Verbesserung der Ladezeit und des PageSpeeds durch das Caching-Plugin deiner Wahl feststellen, kann es sein, dass dein Server die Kompression und Zwischenspeicherung nicht zulässt. Dann hilft ein beherzter Griff zum Telefon und Nachfragen beim Hoster am besten.

Hosting

Das Web Hosting spielt auch eine wichtige Rolle bei der Ladezeit-Optimierung. Speziell die bekannten Masse-Hoster wie Strato oder 1&1 sind oft überlastet und haben schlechte Reaktionszeiten. Das liegt daran, dass sehr viele Kundenseiten auf einem Server liegen und die Rechner dann überlasten, wenn ein Kunde mehr Traffic hat. In meinen Messungen, die ich seit 2015 alle drei bis sechs Monate wiederhole, habe ich dieses Phänomen aber auch bei Hetzner und Alfahosting feststellen können. Einzig HostEurope hat mich immer überzeugt und so ist unsere Website auch dort gehostet. Wir nutzen dort einen WebServer Supreme SSD.

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 dringend dein Hosting zu optimieren.

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 7.1 betragen, besser ist 7.2 oder 7.3 – bitte aber nach Änderung die ganze Seite testen!
  • 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.

CDN

Helfen dir die bereits genannten Grund-, Cacheing- und Server-Einstellungen noch nicht auf unter 3 Sekunden Ladezeit zu kommen, solltest du eine drastischere Maßnahme überlegen: Das Content Delivery Network (kurz: CDN) ist meist die einfachere Wahl als zu einem neuen Hoster zu wechseln. Aber:

  • Eine national ausgerichtete Website mit einem guten Hoster braucht eigentlich kein CDN und ist ohne meist effizienter.
  • Internationale Webseiten erfordern aber auch trotz gutem Web Hosting oft ein CDN.

In dem Fall empfehle ich auf Cloud Flare zu setzen. Die Kopplung von Cloud Flare mit deiner WordPress Seite geht mit WP Rocket sehr einfach. Die anderen Plugins haben zwar auch Unterstützung für solche Netzwerke (bei WP Fastest Cache z. B. MaxCDN), allerdings ist die Einrichtung meist schwieriger und die Anbieter in Sachen Ladezeit meist schlechter als Cloud Flare.

Das Setup von einem CDN sollten nur sehr erfahrene Nutzer vornehmen, da man hier auch ganze Webseiten abschießen kann.

Fazit

Die Performance-Optimierung bei WordPress ist ein riesiges, schier endloses Thema. Wenn du aber 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.

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

Hast du noch Fragen oder Feedback, sag's mir in den Kommentaren! Wenn du Hilfe brauchst, zögere nicht mich zu kontaktieren. Willst du auf dem Laufenden gehalten werden, abonniere kostenlos unseren Newsletter oder RSS-Feed.