SEO

Das leidige Thema mit der Page Performance: Ein Leitfaden – Teil 2

Björn SalewskiSenior SEO Consultant

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.

Ladezeit und Pagespeed werden bearbeitet

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.

Übersicht über den Lighthousetest in den Chrome DevTools

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.

Visualisierung der CrUX_Daten im Chrome Core Web Vitals Visualizer

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.

Das Wasserfalldiagramm von webpagetest zeigt die Verbindungen und jeweiligen Zeiten

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.

Meine 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

Über Björn Salewski
Hier findest Du alle Beiträge von .
Kontakt

Wie können wir Dir helfen?

Dein Erfolg ist nur einen Klick entfernt. Verbinde Dich jetzt mit unseren Experten und lass uns gemeinsam Deine Ziele erreichen. Wir sind bereit, auf Deine individuellen Bedürfnisse einzugehen.

Lass und miteinander sprechen - kostenlos & unverbindlich

Karin Wagner

Deine Ansprechpartnerin:
Karin Wagner

Erstberatung

Kontaktformular für Landingpages FW

  • Lass uns miteinander sprechen

    kostenlos & unverbindlich

    Karin Wagner, Seokratie Österreich
    Deine Ansprechpartnerin in Österreich:
    Karin Wagner
  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Werde fit in SEO und Content Marketing!
Unser kostenloser SEO-Kurs bringt Dir 5 Tage lang täglich SEO-Wissen in Dein E-Mail-Postfach und unseren Newsletter.
Abonnieren
​Du kannst Dich jederzeit wieder abmelden.
close-link