Das leidige Thema mit der Page Performance: Ein Leitfaden – Teil 2
In meinem Beitrag „Das leidige Thema mit der Page Performance: Ein Leitfaden (Teil 1)“ haben wir zusammen einen Blick in die Metriken zur Optimierung der Page Performance geworfen und dabei habe ich Dir aufgezeigt, was Du Dir genauer anschauen solltest, beziehungsweise wie Du dem Sand in Deinem Websitegetriebe auf die Schliche kommst. Vor allem aber hast Du Dir eine Benchmark für Dein Wettbewerbsumfeld geschaffen, an dem Du Dich mit Deiner Website messen kannst. In diesem Beitrag wollen wir einen Blick auf Tools und Maßnahmen werfen, mit denen Du die Seitenladezeiten optimieren kannst. Hier wird es an einigen Stellen etwas technisch, weil ich Dir auch zeigen möchte, wie wir tiefer in die Materie einsteigen können und vor allem auch, wie wir mehr Messdaten erhalten können. Dafür ist allerdings etwas technisches Know-how sehr hilfreich. Aber keine Sorge! In den meisten Fällen ist es gar nicht nötig, sich all diese Daten anzuschauen.
Inhalt
Mit diesen Tools kannst Du die Page Performance optimieren
Ohne die richtigen Tools, Module und vor allem Daten, können wir nichts optimieren. Es gibt einige Vielzahl an hilfreichen Tools und Quellen, von denen ich Dir einige aufzeigen möchte. Ich möchte mich allerdings auf für mich sinnvolle Tools fokussieren, da es im Internet mittlerweile sehr viele Tools und Quellen gibt auf die man zurückgreifen kann.
Googles Tools und Dokumentationen
Für die Optimierung der Ladezeit gibt es verschiedene Analyse- und Optimierungstools. Ein wichtiges Toolset und viele weitere Informationen zur Verbesserung der Ladezeiten stellt Google bereits selbst zur Verfügung. Eine Auswahl findest Du in der Übersicht von Google zur Optimierung des Pagespeed.
Der bereits angesprochene HTML-Cache wird hier ebenfalls als mod_Pagespeed-Modul aufgeführt. Dieser ist für die gängigen Server NGINX und Apache verfügbar, die einen Großteil der weltweit gängigen Webserver abbilden. Es gibt aber auch zahlreiche weitere Methoden und Serverprozesse, die ein Caching ermöglichen. Der Übersichtlichkeit halber beschränke ich mich auf diese beiden.
Server Module
Apache mod_chache und NGINX proxy_cache sind weitere Module für Server, die diese von Haus aus mitbringen. Backendseitig gibt es weitere Software und Module, die es als integrale Bestandsteile von Shopsystemen oder Webseitensoftware wie WordPress verwendet werden können. Diese arbeiten jedoch in der Regel nicht direkt auf dem Server, sondern legen vorgerenderte Dokumente in einer Location ab, sodass beispielsweise Datenbankabfragen für eine Darstellung nicht zwingend notwendig sind.
Für WordPress möchte ich noch kurz das Plugin WPRocket erwähnen, da es ebenfalls ein softwareseitiges Caching und viele Möglichkeiten zur Optimierung mit sich bringt und in der WP-Welt recht weit verbreitet ist.
Googles PageSpeed Insights und der Lighthousetest
Diese beiden Tools dürfen hier natürlich nicht fehlen. Ich habe sie bereits im Teil 1 meines Artikels ausführlich vorgestellt. Für die Messung der Pageperformance sind die dabei ermittelten Metriken ausschlaggebend.
Das Lighthouse Add-on für den Browser kannst Du Dir im Chrome Webstore herunterladen und installieren.
Das Add-on ist aber bereits in die Chrome DeveloperTools integriert und kann direkt von dort aus genutzt werden.
Screenshot von Lighthouse in den Chrome DevTools.
Google CrUX-Report
Wer auf die Felddaten von Google zurückgreifen möchte, dem möchte ich Googles CrUX-Report ans Herz legen. Noch mal zur Erinnerung: Die CrUX-Daten sind die von Google erhobenen Nutzungsdaten, die über Chrome Browser Plugins etc. von Nutzern gesammelt werden und die Google kostenlos zur Verfügung stellt. Diese Daten kannst Du bequem in einem Chrome-Add-on einsehen.
CrUX-Daten im Add-on Core Web Vitals Visualizer
Möchtest Du tiefer in die Analyse einsteigen, dann kannst Du die CrUX-Daten auch über Googles BigQuery abbilden und analysieren.
Wenn Du Dich mit dem BigQuery-Interface befassen willst, dann solltest Du die SQL-Statements beherrschen. Hier hast Du zum Beispiel die Möglichkeit, die historische Performance pro Monat oder auch die Metriken für einzelne Länder auszuwerten. Eine Doku findest Du hier.
Ein Vorteil: Du kannst diese freiverfügbaren Daten auch über eine API abgreifen und somit in Deine eigenen Dashboards oder Tools integrieren. Darüber hinaus können die Daten für verschiedene Länder und Zeiträume über die Queries angezeigt werden, was beispielsweise für international agierende Plattformen sehr wichtig sein kann.
Tools, die gern von von Entwicklern verwendet werden
Die nachfolgenden Tools werden von Developern gern verwendet und sollten auch von SEO-Experten regelmäßig für Tests herangezogen werden. Das Problem ist jedoch, dass diese Tools andere Methoden und vor allem anderen Standorte zur Messung verwenden und somit der Diskussion, was nun der richtige Wert ist, Tür und Tor geöffnet ist. Letztendlich kann man aber sagen, dass diese Tools durchaus korrekt messen. (Die für das Ranking relevanten Daten liefern uns aber die Google-Tools.)
Als SEO-Experte solltest Du Dir angewöhnen, bei der Leistungsauswertung die Wasserfalldiagramme genauer anzuschauen. So kannst Du gegebenenfalls Ressourcen identifizieren, die das Laden oder Rendern verhindern. Ein ähnliches Tool findest Du auch in den Chrome DevTools. Die Auswertung ist zwar teilweise sehr langsam (und daher für ungeduldige Menschen wie mich nervig) dennoch einen guten Einblick in das Lade- und Renderverhalten einer Seite.
Screenshot Wasserfalldiagramm webpagetest.org
Kosten vs. Nutzen: Was macht Sinn?
Bevor Du Dich auf die Optimierung der Ladezeiten stürzt, solltest Du Dich fragen, was im geschäftlichen Sinne notwendig und sinnvoll ist. Wenn Du beispielsweise grundsätzliche Probleme mit der Indexierung hast, weil Inhalte nicht erreichbar sind, zu viele Dubletten und schlechter Content vorhanden ist, dann liegt der Schluss nahe, dass Du wichtigere Hausaufgaben zu erledigen hast.
Ich lehne mich mal aus dem Fenster und sage, dass ein guter Entwickler schon von sich aus durch Best Practices und die eigene Motivation, eine Top-Website zu entwickeln, gute Ladezeiten im Fokus hat. Erst wenn Du merkst, dass die Ladezeit deutlich im Keller ist und Du im Vergleich zum Wettbewerb das Schlusslicht bildest oder Du mit Deiner Seite nur im Mittelfeld liegst, solltest Du vehement eingreifen. Wichtig ist aber, dass Du mit den Entwicklern zusammenarbeitest und ihr euch gegenseitig unterstützt. Das Gegenteil ist leider viel zu oft der Fall und das liegt nicht selten an einer schlechten Kommunikation, einem falschen Fokus auf Metriken oder eben auch daran, dass es eine falsche Erwartungshaltung gibt, was erreicht werden muss (Benchmark).
Performance-Optimierungen nehmen mitunter einige Ressourcen in Anspruch. Du solltest daher unbedingt abwägen, wie Du diese einsetzt.
Was ist eigentlich eine gute Methode, um den Pagespeed zu optimieren?
Nehmen wir mal an, wir sind die SEO-Experten eines bekannten Marktplatzes für Autos. 😉 Die Entwicklerressourcen im Unternehmen sind sehr begrenzt, daher müssen wir uns auf die wichtigsten Metriken konzentrieren.
Suchst Du eine kompetente, flexbile und zuverlässige Online-Marketing-Agentur? Wir freuen uns auf Deine unverbindliche Anfrage.
Kontaktiere unsMeine empfohlene Vorgehensweise* wäre die folgende:
- Definition einer relevanten Benchmark anhand der Konkurrenz und damit der Beweis, dass wir in der Performance, also auch UX, einen entscheidenden Nachteil gegenüber dem Markt haben.
- Überprüfung der Core Web Vitals in der Search Console: Ausreißer vorhanden? Wenn ja, welche?
- Lighthousetests, um den einzelnen Faktoren auf den Grund zu gehen und die Google-Empfehlungen zu prüfen.
- Überprüfung der Leistungsstatistiken/Wasserfalldiagramme in Chrome DevTools, webpagetest.org, o. ä., um fehlerhaftes Laden von Ressourcen oder zu lange Verarbeitungszeiten zu analysieren.
- Überprüfung, ob bereits Best Practices zur Optimierung der Ladezeiten angewandt wurden. (Damit sind die nicht die Best Practices vom Lighthousetest gemeint.)
- Komprimierte Datenübertragung
- Nutzen eines Cache (Backend oder Server)
- Überflüssiges JS oder CSS entfernen: Codesplitting
- Fokussierung auf den Critical Path
- Bilder im richtigen Format und korrekt dimensioniert bereitstellen (einer der häufigsten Fehler)
- Infrastruktur ist ausreichend für die Last geeignet, schnelle Systemantwortzeiten
- Weiterleitungen beim Laden vermeiden oder Fehler beim Laden vermeiden
- Anbindung von Drittanbieterressourcen prüfen und ggf. optimieren
- Verwendung der richtigen Protokolle
- Caching Policy von statischen Elementen prüfen
- Ressourcen vorab adressieren oder laden: preconnect, prefetch nutzen
- Bei übermäßiger DOM-Größe schauen, ob diese verringert werden kann (bei sehr komplexen Seiten ist das meist recht schwierig und aufwendig)
*Dass Barrierefreiheit, Best Practices und die SEO-Empfehlungen umgesetzt sind, setze ich an dieser Stelle voraus. Auch sollte der Code den HTML-Validator fehlerfrei passieren. Google sagt zwar, dass dies für das Ranking keine Rolle spielt, aber andere Faktoren profitieren trotzdem von validem Code.
Was kannst Du mitnehmen?
Wie ich in diesem Artikel (eigentlich diesen beiden Artikeln) zeigen möchte, wirft die Performance-Optimierung immer eine Reihe von Fragen auf:
- Was macht der Markt? Habe ich eine spürbar schlechte(re) Performance als der Wettbewerb, die die UX und somit den Umsatz beeinträchtigen?
- Was kostet die Umsetzung und was bringt diese?
- Auf welche Metrik lege ich den Fokus?
- Welche Eingriffsmöglichkeiten gibt es, um die Performance zu verbessern?
- Wie komme ich in einen guten Arbeitsmodus mit Entwicklern?
- Gibt es vielleicht erst einmal wichtigere Hausaufgaben zu erledigen?
Dass eine performante Website – gerade im E-Commerce – zum Standard gehören sollte, steht außer Frage. Nicht selten finde ich mich als SEO in endlosen Diskussionen wieder wie, welches Tool nun Recht hat, welche Metrik doch viel sinnvoller für die Optimierung ist und der Klassiker: „Das passt schon alles so, da muss man nichts machen.“ Hierbei tut es uns SEOs gut, den Beweis zu erbringen und auch direkt technische Maßnahmen aufzuzeigen. Durch eine fokussierte und stringente Herangehensweise lassen sich auch mit weniger Aufwand gute Resultate erzielen, sodass man sich bei einer guten Priorisierung eher auf die letzten Punkte und Prozente stürzen kann – sofern die Ressourcen dafür vorhanden sind.
Eines solltest Du aber unbedingt im Hinterkopf behalten: Es ist auf jeden Fall notwendig, die eigene Performance regelmäßig zu überprüfen und wenn möglich zu verbessern. Gerade weil die technische Entwicklung rasant ist und sich das Nutzungsverhalten und damit auch die Kriterien oder Anforderungen an Ladezeiten durchaus ändern können.
Auch den Wettbewerb solltest Du in regelmäßigen Abständen anschauen, damit Du bei starken Veränderungen schnell reagieren kannst. Gerade wenn sich die Benchmark verschiebt, solltest Du aktiv werden, um nicht den Anschluss zu verlieren. Wenn Du feststellst, dass Deine Performance plötzlich einbricht, hast Du jetzt einige Hinweise, wie Du den Fehlern auf den Grund gehen kannst.
Bildnachweis: Titelbild: TarikVision/stock.adobe.com; Bild 2: Seokratie GmbH: Screenshot Lighthouse in den Chrome DevTools; Bild 3: Seokratie GmbH: CrUX-Daten im Addon Core Web Vitals Visualizer; Bild 4: Seokratie GmbH: Screenshot Wasserfalldiagramm webpagetest.org
