WordPress langsam? So geht Performance-Optimierung 2019

Lerne in unserem Ratgeber zur Ladezeit- und PageSpeed-Optmierung alle wichtigen Einstellungen in WordPress, zur Bildkompression, zum Caching und im Web Hosting kennen.

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.

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

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, zeigt aber, wie wichtig eine schnelle Website ist.

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. Falls du Unterstützung zur Ladezeit-Optimierung brauchst, kontaktiere uns: Unsere Programmierer sind PageSpeed-Experten und greifen dir bei der Performance-Optimierung gerne unter die Arme.

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. Ich empfehle dir dort erstmal nur deine Startseite zu prüfen, während der Optimierung aber immer wieder auch die URLs der wichtigsten Unterseiten bzw. Layouts zu checken.

Screenshot aus Google PageSpeed Insights für unser kostenloses WordPress Theme

Google bewertet den PageSpeed einerseits durch einen Live-Test, andererseits durch gespeicherte Testergebnisse des Lighthouse Audits – einem Ladezeiten-Test des Google Chrome Browsers, den du auch direkt in den Entwickler-Tools starten und als Profi zu deiner Ladezeit-Optimierung nutzen kannst:

Screenshot aus Chrome Lighthouse Audit

Da der PageSpeed Test von Google jedoch nur einen Score auf einer Skala von 1-100 ausgibt (0-49 = schlecht, 50-89 = mittel, ab 90 ist die Ladezeit gut) und nur bei größeren Websites Aussagen über die real gemessene Ladezeit bietet, empfehle ich dir deine Ladezeit in Sekunden zusätzlich mit und WebPageTest zu messen.

Screenshot von WebPageTest

Dazu gibst du wie beim Google PageSpeed Test zunächst die zu überprüfende URL ein (Startseite am Anfang der PageSpeed-Optimierung, später dann die wichtigsten Unterseiten) und wählst dann eine sinnvolle „Test Location“ aus. Sinnvoll ist ein Standort, der möglichst nah an deinen Kunden ist. Ich verwende am liebsten Frankfurt für deutschsprachige Websites und New York für englischsprachige, internationale Websites.

Screenshot von WebPageTest

WebPageTest bewertet die Ladezeit 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 (eigentlich nur für internationale Projekte mit langsamen Server empfehlenswert). Da ich aber eine ohnehin schon sehr gute Ladezeit habe (alles unter 2s ist sehr gut, die „Load Time“ sollte aber max. 3s sein), kann ich mir das sparen. Auch wichtig: Die Server-Reaktionszeiten – „First Byte“ genannt – sollten unter 0,5s liegen. Falls nicht, solltest du dein Hosting hinterfragen.

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:

Screenshot von WebPageTest

In meinem Beispiel ist das eine JavaScript-Datei (Erkennst du an der Dateieindung .js in der linken Spalte), die 996ms braucht. Das ist in meinem Projekt eine wichtige Datei und somit nicht weiter schlimm. Falls du aber feststellst, dass hier einige Elemente mehr auftauchen, die recht breit sind, ist eine Optimierung der Dateien empfehlenswert. Die wichtigste Maßnahme zur PageSpeed-Optimierung ist übrigens die nachfolgend erläuterte Bildoptimierung.

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.

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 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. Übrigens: 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) 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 Nutzer.

Ich setze zum Caching am liebsten das Premium Plugin WP Rocket ein, da es das stärkste und gleichzeitig am einfachsten zu bedienende Cacheing-Plugin ist. Der Kostenpunkt liegt ab 49,00 € für eine Website – ich habe eine größere Lizenz, da ich viele Projekte optimiere, da kostet dann die einzelne Website weniger. Alternativ empfehle ich auf die kostenlosen Versionen von WP Fastest Cache (auch einfach zu bedienen, leider nicht Multisite-kompatibel, oft etwas langsamer als WP Rocket) oder W3 Total Cache (sehr komplex aber genauso stark und manchmal sogar stärker als WP Rocket) zu setzen.

Screenshot aus WP Rocket

Ich erkläre hier das Setup von WP Rocket, WP Fastest Cache funktioniert vom Prinzip her ähnlich. 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 kein Cacheing für angemeldete WordPress-Benutzer zu aktivieren, damit du und deine eingeloggten Nutzer immer die aktuellste Version deines Projektes sehen. Für alle anderen Nutzer 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. Das ist nur zum Vorbeugen von Darstellungsproblemen gedacht. Der Cache wird nämlich immer geleert, wenn du einen Inhalt veränderst oder einen neuen Inhalt veröffentlichst.

Screenshot aus WP Rocket

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.

Nutzt du WordPress 5 mit dem aktuellen Gutenberg- bzw. Block-Editor, ist es oft hilfreich bei den CSS-Ausnahmen folgenden Pfad anzugeben:

/wp-includes/css/dist/block-library/editor.min.css
Screenshot aus Google Chrome Entwicklertools

Unsere Entwickler und ich nutzen dafür meistens die Quellenangabe, den Performance- und Consolen-Tab sowie den Lightouse Audit, wie am Anfang dieser Anleitung genannt.

Zu Guter Letzt wechselst du in die Medienoptimierung und aktivierst alle Optionen – sofern für dein Website-Konzept möglich.

Screenshot aus WP Rocket

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 Mitte 2019 übrigens eine browserseitige Nachladefunktion erschienen, die hoffentlich bald auch in anderen Browsern Einzug finden wird. Mindestens bis Ende 2020 würde ich aber zusätzlich das Lazy Loading im Cacheing-Plugin aktivieren, da es genug Nutzer mit veralteten Browsern gibt, die sonst nicht in die Gunst schnellen Surfens kommen.

Ich habe übrigens in unserem WordPress-Theme und -Baukasten websei.de die „WordPress-Embeds“ (Einbettungsfunktion) deaktiviert, da ich in den Blogbeiträgen Empfehlungen zu WordPress-Plugins gebe, die dann nach dem Einfügen der Links auf WordPress.org um zusätzliche Informationen wie Vorschaubilder und Download-Links automatisch ergänzt werden. Ist dir das nicht wichtig, willst aber beispielsweise Emojis nutzen, änderst du die Konfiguration entsprechend. Alle weiteren Optionen von WP Rocket sind optional.

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 für diese Anleitung seit erstmaliger Erstellung 2015 alle drei bis sechs Monate wiederhole (überarbeite diese Anleitung mindestens zwei Mal im Jahr), 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.