Wordpress Pagespeed Optimierung:
so wird Deine Website raketenschnell

    Inhaltsverzeichnis:

Spätestens seit dem Google Update aus dem Juli 2018 sollte Pagespeed für jeden Betreiber einer Website eine signifikante Rolle spielen – Pagespeed war bis zu diesem Zeitpunkt zwar schon aufgrund von Conversion und Bounce Rates ein wichtiger indirekter Faktor, nun jedoch hat es auch einen direkten Einfluss auf die Position bei Googles Suchergebnissen.

Dieser Guide wird Dir helfen, die Performance Deiner Website zu messen und Engpässe zu bereinigen, um Deinen Besuchern letztendlich eine schnelle Website ausliefern zu können.

Webinar
WordPress Pagespeed: So habe ich den OMT optimiert — Daniel Voelskow

In diesem Webinar wird Dir Daniel Voelskow zeigen, mit welchen Maßnahmen er den OMT Schritt für Schritt in der Performance nach oben gebracht hat. Dies ist kein Live-Workshop, dafür

Gratis anschauen

1. Bevor es losgeht: Pagespeed messen

Um die Wirksamkeit Deiner Maßnahmen messen zu können, solltest Du zunächst einmal die aktuellen Werte checken und einen Pagespeed Test durchführen.

Zunächst wäre hier das offizielle – inzwischen sehr komplexe – Pagespeed Tool von Google genannt: Google Pagespeed Insights

Hier werden Werte für simulierte Mobil- und Desktopgeräte genommen und aus verschiedenen potentiellen Verbesserungsmöglichkeiten entsteht der Pagespeed Score. Seit dem Lighthouse-Update 2019 ist der mobile Score deutlich strenger als im Desktop-Bereich, um Dich als Website Betreiber dazu zu “animieren”, die Gesamtlast und -Ladezeit insbesondere auch für Nutzer von Mobilgeräten gering zu halten. Ziel sollte es sein, bei beiden Metriken in den grünen Bereich zu kommen.

Neben Pagespeed Insights nutze ich in der Regel noch die Folgenden Pagespeed Tools um Ladezeiten zu messen:

Diese bieten unter anderem ein Waterfall-Chart, um potentielle Engpässe zu identifizieren sowie weitere Analysemöglichkeiten der Ressourcen, welche eine Seite beinhaltet.

Welche Faktoren können den Pagespeed einer Website negativ beeinflussen:

  • Zu große, unkomprimierte Bilder in maximaler Qualität – oft können bei Bildern mittels verlustfreier Komprimierung 50% und mehr eingespart werden.
  • Bilder werden größer bereitgestellt angezeigt – wenn ein Bild mit 400px Breite eine Quelldatei von 2.000Px Breite enthält.
  • Fehlendes Caching, wodurch statische Elemente unnötig nachgeladen werden müssen
  • Render-Blockierende Elemente (Bilder, Schriften, CSS, Skripte)

 

Teilweise sollte oder kann man jedoch während der Pagespeedoptimierung nicht blind den bemängelten Punkten folgen: so ist es möglich, dass Google die scripts.js als “Render-Blocking” identifiziert – das bedeutet, dass diese Datei geladen wird, bevor der Rest der Seite fortfährt. Nicht immer lässt sich dieser Engpass eliminieren ohne Funktionalitäten der Seite zu beschädigen. Aus diesem Grund solltest Du mit Augenmaß optimieren. Dies soll bedeuten, dass man nicht zwingend einen Score von 100 anvisieren muss wenn man bereits bei 90+ liegt – oder bei einer Ladezeit von 2 Sekunden noch Tage damit verbringt, um auf 1,8Sekunden zu kommen. Diesen Unterschied in der Ladezeit wird Google vermutlich nicht mehr honorieren – umgekehrt jedoch kann man davon ausgehen, dass langsame Seiten einen Malus im Ranking erfahren, so dass zumindest die Grundlagen definitiv angegangen werden müssen.

2. Caching & Dateioptimierung aktivieren

Die WordPress Pagespeed Optimierung startet mit der Einrichtung von Tools für Caching und Komprimierung der Quelldateien. Diese beiden Punkte habe ich zusammengefasst, da viele Caching-Tools diese ebenfalls kombinieren, da es sich anbietet, die Dateien zu Optimieren wenn man diese ohnehin für den Cache angeht.

Was bedeutet Caching?

Caching bedeutet, dass statische Elemente Deiner Website im Cache des Users zwischengespeichert werden. Wiederkehrende Nutzer werden somit Deine Seite bzw. deren Ressourcen (HTML, CSS, JS, Bilder) nicht mehr neu Laden müssen, sondern greifen aus dem lokalen Browser-Cache auf diese zurück und viele aufgerufene Seiten erscheinen in der Folge .

Zu diesem Zweck empfehlen wir die Pagespeed Tools W3 Total Cache, Autoptimize sowie WP Rocket (kostenpflichtig).

Quelldateien Minimieren, Zusammenfassen und komprimieren

In vielen Fällen – wie auch bei den oben empfohlenen Tools – ist die Optimierung des Dateisystems ein integriertes Feature. Das bedeuget, dass alle Quelldateien (HTML, CSS, JS) jeweils zunächst um “Ballast” reduziert werden: Leerstellen, Zeichenumbrüche, gegebenenfalls Code-Kommentare werden gelöscht. Somit sind die Dateien für Menschen erschwert lesbar, für den Browser macht es jedoch keinen Unterschied – und es wurde bereits ein wenig Platz gespart.

Bis vor einem Jahr war es gängig, die CSS- und JS Dateien in jeweils eine große Datei zusammen zu führen, damit nur noch ein Verbindungsaufbau durchgeführt werden muss um letztendlich alle Daten zu erhalten. Dank HTTP/2 ist es inzwischen jedoch in vielen Fällen empfehlenswerter, die Datei in mehrere “Päckchen” aufzuteilen, damit diese parallel von dem Server geladen werden können. Ich habe dieses Thema kürzlich in einem Magazin-Artikel aufgegriffen und beschrieben.

Schließlich werden die Dateien noch via GZIP komprimiert um die maximale Pagespeedoptimierung zu erreichen.

3. Renderblockierende Elemente reduzieren

Als Renderblockierende Elemente werden alle Dateien bezeichnet, welche der Browser VOR dem eigentlichen Rendern der Website laden muss. Deren Ladezeit lässt sich komplett eliminieren, wenn man die Seite so umstellt, dass die Elemente erst NACH dem Laden des HTML-Dokumentes geladen werden.

Allerdings:

Hier ist oft ein intensives Feintuning notwendig, da sich der eine oder andere Fallstrick an durch Inhalte/Plugins/Funktionen benötigte Ressourcen verbirgt. Wenn die Ressource zum Zeitpunkt des Funktionsaufrufes nicht verfügbar ist, kann diese nicht ordnungsgemäß geladen werden, und man erhält eine Website voller Fehler.

Daher ist es essentiell, die verzögert geladenen Ressourcen durchzutesten. Mindestens die jquery.js lässt sich in vielen Fällen schlicht nicht eliminieren.

Zum Zweck des Feintunings empfehle ich das Plugin Async Javascript – dieses wurde von dem Entwickler von Autoptimize veröffentlicht, wodurch sich diese beiden Pagespeed Tools gut ergänzen – sie lassen sich jedoch auch unabhängig voneinander und auch in Verbindung mit beispielsweise WP Rocket einsetzen.

 

4. Bilder optimieren

Hier verbirgt sich oftmals der größte Hebel zur Pagespeedoptimierung: Bilder sollten:

  • niemals größer ausgegeben werden, als sie dargestellt werden. Das heißt, wenn das Bild in der Ausgabe nicht mehr als 400Px Breite Platz hat, sollte die dahinterliegende Quelldatei ebenfalls nicht breiter als diese 400Pixel sein.
  • Komprimiert und um ihre Metadaten erleichtert werden.

Diese beiden Punkte werden von Googles Pagespeed Insights rigoros abgestraft und ich erlebe es nicht selten, dass ich auf einer Seite Megabyte-weise Last allein mit diesem Punkt einsparen kann (was für einen Unterschied dies für mobile Nutzer macht kann man sich vorstellen). Während Pagespeed Insights Dir die zu optimierenden Bilder auflistet kannst Du mittels GTMetrix den Pagespeed Messen und die Gesamtgröße der Seite erfassen – und somit direkt die eingesparte Ladezeit bzw. Größe/Last erfassen.

In der Theme-Entwicklung sollte also unbedingt die Bildgröße definiert werden.
Tipp: Mittels Regenerate Thumbnails lassen sich die Bildgrößen direkt in der Mediathek neu generieren, wenn man ein neues Format definiert hat!

Nützliche Web-Tools zum Komprimieren von Bildern:

Bis vor kurzem habe ich auf TinyPNG geschworen, doch Squoosh ist jetzt meine klare Empfehlung! Hier kann man die Bilder inklusive Preview des Ergebnisses in vielen Facetten noch bearbeiten um das letzte Stück rauszukitzeln oder die perfekte Balance zwischen Dateigröße und Bildqualität direkt bestimmen.

WordPress Plugins zur automatisierten Bildkomprimierung

Prinzipiell erlangt man das Beste Ergebnis mit einem der manuellen Tools, doch da das nicht immer praktikabel umsetzbar ist, sind diese beiden Pagespeed Tools für mich immer gute Optionen, um automatisch alle Bilder in der Mediathek optimieren zu lassen.

5. Above the Fold priorisieren und Lazy Loading einrichten

Eine weitere, sehr wirksame Maßnahme zur Pagespeedoptimierung ist das Lazy Loading. Es ist wichtig, dass bei größeren Seiten zunächst nur der Sichtbare Bereich geladen wird – alles was der User nicht initial sieht, kann auch kurz verzögert nachgeladen werden.

Insbesondere das Thema Lazy Loading ist hier wichtig – so werden auch beim OMT beispielsweise nur die direkt sichtbaren Bilder geladen und alle weiteren nur als kleiner Platzhalter-Pixel – in dem Moment, in dem der User in die Nähe des Bildes gescrollt hat, wird dieses jedoch durch ein Skript anstelle des Platzhalter-Pixels geladen. Somit wird die Ladezeit der Seite im ersten Moment um die Bilder reduziert. Dies kannst Du mit einem Blick in die Netzwerkanalyse der Entwicklungs-Tools Deines Browsers ganz leicht überprüfen – sobald die Seite scrollt, sollten neue Elemente auftauchen.

Unterstützung bieten Dir hier diese Pagespeed Tools:

Bei individuellen Templates kann es vorkommen, dass die Plugins nicht direkt greifen – hier müssen die Bilder dann entsprechend direkt mit dem Platzhalter-Pixel angelegt werden, damit das Skript sie dann bei Bedarf ersetzen kann.

Youtube Lazy Loading: Videos verzögert laden

Die von Youtube nachgeladenen Skripte sind ca. 1MB groß. Grund genug, auch diese erst verzögert nachzuladen. Die beiden oben genannten Plugins können auch hier sehr hilfreich sein, den (initialen) Ballast auf der Seite zu reduzieren – und somit das Testergebnis bei Pagespeed Insights zu verbessern.

 

Webinar
Pagespeed 2.0 & Crawlersteuerung — Herbert Hartung

Ladezeit Optimierung ist ein herausragender Hebel für mehr Conversions und bessere Rankings in Google. Bereits jetzt können mit diesen Methoden Conversionsteigerungen von bis zu 30% und b

Gratis anschauen

6. Wordpress Pagespeed Optimierung: Fazit

Die oben genannten Techniken bilden die Grundlagen Deiner Pagespeedoptimierung. Wenn Du diese gewissenhaft durchführst, wirst Du im Pagespeed Test zwar nicht zwingend 100 Punkte erreichen (wobei das in manchen Konstellationen durchaus möglich ist!), doch sollten sie Dir mehrere Hebel bieten, um bei Pagespeed Insights den grünen Bereich anvisieren zu können und – was noch wichtiger ist – die Ladezeit für Deine Besucher zu reduzieren.

Denke bitte immer daran, dass Du für den User optimierst, und nicht für Google. Deswegen wird auch niemand komplett auf Skripte und Bilder verzichten um in 0,5Sekunden auf dem Schirm zu sein – doch die weitverbreitete Regel von 2-3 Sekunden beim Pagespeed Messen solltest Du auch bei einer größeren Seite anpeilen können. Es ist jedenfalls nicht die Mühe wert, bei einem Wert von 90 noch die 95 oder 100 erreichen zu wollen. Von ~4 Sekunden auf ~2 ist jedoch ein Sprung (Halbierung der Ladezeit!), für den es sich lohnt zu investieren. Behalte immer den richtigen Maßstab im Blick.

OMT Webinare zum Thema Pagespeed

Magazinartikel zum Thema Pagespeedoptimierung

Pagespeedoptimierung mittels Ressourcenpriorisierung OMT Magazin

Pagespeedoptimierung mittels Ressourcenpriorisierung

Suchmaschinenoptimierung

Daniel Voelskow 10 Min

Das der Pagespeed ein Rankingfaktor ist, sollte jeder wissen. Dank Ressourcenoptimierung lässt sich so einen sehr großen Performancezuwachs generieren. Am besten gleich selbst austesten....
Artikel lesen
Zeit ist Geld – Gute Ladezeiten sind entscheidend für einen guten Umsatz und Rankings OMT Magazin

Zeit ist Geld – Gute Ladezeiten sind...

Suchmaschinenoptimierung

Matthias Reincke 6 Min

Wer eine schnelle Website hat, ist auf einem guten Weg. Haltet Eure Seiten schlank, aber vor allem schnell. Beachtet Eure Ladezeiten und optimiert diese, wenn es nötig ist.
Artikel lesen
Google Lighthouse – Der Leuchtturm, der Deine Seite durchleuchtet OMT Magazin

Google Lighthouse – Der Leuchtturm, der Deine...

Suchmaschinenoptimierung

Markus Fritzsche 8 Min

Im Rahmen der Suchmaschinenoptimierung gehört es auch dazu, dass Du Deine Webseite aus technischer Sicht überprüfst und auf einem TOP-Niveau für die Besucher online stells...
Artikel lesen
Vor- und Nachteile – Raketenschnelle Ladezeit mit Accelerated Mobile Pages (AMPs) OMT Magazin

Vor- und Nachteile – Raketenschnelle Ladezeit mit...

Suchmaschinenoptimierung

Simon Marqua 9 Min

Internetnutzer sind anspruchsvoll und ungeduldig. Das gilt ganz besonders für diejenigen, die das World Wide Web mobil nutzen. Und das ist längst die Mehrheit. Um dieser großen Grup...
Artikel lesen
Technisches SEO für WordPress – Erfahrungen aus Entwicklersicht OMT Magazin

Technisches SEO für WordPress – Erfahrungen aus...

Suchmaschinenoptimierung

Daniel Voelskow 15 Min

WordPress ist eines der meistgenutzten CMS-Systeme. Wie Du aus technischer Sicht Deine Suchmaschinenoptimierung in Deinem WordPress im Griff hast, zeigen dier die nachfolgenden Punkte.
Artikel lesen

Daniel Voelskow

Daniel Voelskow ist Verantwortlicher für die Webentwicklung der ReachX GmbH und der OMT Seiten.

Nachdem er sein Diplom in BWL mit Schwerpunkt Marketing abgeschlossen hat, knüpfte er an die während des Studiums erworbenen Erfahrungen in der Webprogrammierung an und kann auf über 7 Jahre Agentur- und Kundengeschäft zurückblicken.

Durch seinen Horizont im Marketing kann Daniel den technischen „Tunnelblick“ vermeiden und unsere Projekte in ihrer Gesamtheit betrachten und schon in der Konzeption mit wertvollem Input beitragen.

Wordpress Pagespeed Buchempfehlungen