Ladezeit-Optimierung: Pagespeed einer Webseite optimieren

Bei der Optimierung der Ladezeit geht es vorrangig um technisches SEO und hier reicht es schon lange nicht mehr aus, dass sich ein SEO (egal ob Inhouse oder Agentur) sich mit der Webseite strukturell auseinander setzt. Vielmehr könnte die Person, die die Aufgabe hat, die Schlüsselstellen für eine optimierte Performance zu identifizieren, eine Art iterative Checkliste erstellen, an der sich ein oder mehrere Webentwickler orientieren können. Denn meistens hat gerade die Entwicklung eine Menge um die Ohren, die Seite weiterzuentwickeln und wenig Zeit, um Dinge extra für den SEO umzusetzen. Hat man nun entsprechende „Ladehemmer“ identifiziert, weiß aber nicht was nun zu tun ist, um die Ladezeit der Webseite zu verbessern – dem hilft der folgende Beitrag.

Abb.01: Ladegeschwindigkeit beeinflusst die User-Experience, daher gilt es stets die Performance zu optimieren

Performance Optimierung mit SEO & IT in Harmonie

Eine strukturell gut aufgearbeitete Tabelle, die einzelne Aufgaben auflistet, kann die nachträgliche Umsetzung beschleunigen. Ein Beispiel, wie man eine solche ferstellt, möchten wir euch im Folgenden zeigen.

Seitentypen festlegen um Optimierungsmaßnahmen zu priorisieren

Seiten vom gleichen Typ binden Onpage meist die gleichen Elemente ein und es werden ähnliche Scripte geladen. Optimiert man bspw. die CSS-Datei der Produktseiten, werden die Änderungen auf allen Seiten dieses Typs angewendet. Daher ist es sinnvoll im ersten Schritt die Webseite in Seitentypen zu strukturieren. Anschließend legt man eine Priorität für jede Ausprägung fest, die davon abhängig ist, wie wichtig diese Seite für das Ranking in Suchmaschinen ist. Je wichtiger der Seitentyp, desto dringender ist nachher die Optimierung der Ladezeit. Eine Liste könnte folgendermaßen aussehen:

Diese Liste gilt aus Ausgangspunkt für weitere Recherchen und wird natürlich noch nicht der Entwicklung präsentiert. Als nächstes muss für jeden dieser Seitentypen identifiziert werden, welche Optimierungpotentiale bestehen und das identifizierte Problem zugeordnet werden. Im groben sind das meist die folgenden:

Die Hebel zur schnelleren Ladezeit

JavaScript

In der optimierten Verwendung von JavaScript steckt häufig das meiste Potential, für eine schnelle Seite. Denn oftmals werden Scripte seitenweit eingebunden, obwohl sie nicht auf dem Seitentyp verwendet werden. Diese müssen identifiziert und entfernt werden. Ein weiterer Punkt sind Scripte die nicht asynchron laden, auf deren Abschluss also gewartet werden muss, bevor weitere Webseiten-Elemente geladen werden. Zusätzlich sollten Scripte nie in das HTML eingebunden werden – also raus damit und in externe Dateien auslagern.

CSS

Inline-CSS und zu viele eingebundene CSS-Dateien sind ein weiterer häufiger und vor allem vermeidbarer Grund, weshalb Seiten langsamer laden als sie es müssten. Auch ungenutzte CSS-Elemente in der geladenen Datei stellen ein Optimierungspotential dar.

Bildgrößen

Sehr oft werden Bilder eingebunden, die entweder von den Abmaßen zu groß sind oder nicht weit genug komprimiert wurden (bei gleichbleibender Qualität). Hier gilt es jedoch nicht bei der Webentwicklung anzusetzen, sondern bei der Bereitstellung und die übernimmt meist die Grafikabteilung.

Caching

Caching kann einmal auf dem Server selbst oder im Browser, also clientseitig, geschehen. Der Servercache sollte nur dann geleert werden, wenn es wirklich um wichtige Updates geht, die nicht hinausgezögert werden können. Das Leeren, „weil man mal sehen möchte wie es aussieht“ sollte man sich sparen und lieber auf einen Editor mit vernünftigem Vorschau-Modus bzw. auf eine Staging-Umgebung setzen.

Abb.02: vereinfachte Darstellung für den Caching-Vorgang

Daten, die im Browser-Cache gehalten und per HTTP-Header übermittelt werden (z.B. Trackingscripte o.ä.), sollten ein Ablaufdatum bekommen, das nicht zu knapp bemessen ist, aber auch nicht die Anzeige wichtiger Webseitenelemente behindert.

Komprimierung

Dokumente auf dem Server sollten nie unkomprimiert zur Verfügung gestellt werden. Eine sehr gute Möglichkeit dafür bietet die Ausspielung über gzip-komprimierte Inhalte, die sowohl auf Apache- als auch unter IIS-Servern angewendet werden kann. Wie gzip funktioniert, wird bei sysadminlife gezeigt. Da diese Methode ganzheitlich auf alle Dokumente des Servers angewendet wird, muss dieser Punkt keiner speziellen Seitenkategorie zugeordnet werden.

Ladezeitoptimierung am Beispiel base.de

Im ersten Schritt hatten wir beipielhaft festgelegt, dass die Startseite bei der Ladezeitoptimierung Prio 1 genießt. Mit dem im ersten Teil vorgestellten Tool „Google PageSpeed“ wollen wir nun die Tabelle für unsere Webentwicklung weiter auffüllen. Wichtig zu wissen ist, dass es in dem Tool eine Unterscheidung der Mobile- und der Desktop-Variante gibt, egal ob die Webseite responsive Inhalte zur Verfügung stellt oder bspw. eine mobile-optimierte Subdomain hat. Der Mobilfunkanbieter base.de hat keine mobil-optimierte Version was u.a. aus Usability-Gründen nicht optimal ist. Im folgenden Beispiel schauen wir uns nur die Optimierungspotentiale für die Desktop-Version an.

Abb.03: Startseite von BASE, an der wir exemplarisch Optimierungspotentiale aufdecken möchten

PageSpeed kategorisiert die Empfehlungen nach 3 Klassen:

• Behebung erforderlich – was äquivalent zu Prio 1 gesehen werden kann
• Behebung empfohlen – Prio 2
• Bestandene Regeln – (vorerst) kein ToDo

Der folgende Screenshot zeigt die ermittelten Probleme bei der Ladezeit:

Abb.04: PageSpeed Analyse am Beispiel der Webseite von Base

Unsere Tabelle wird demnach erweitert und sieht dann wie folgt aus:

 Performance-Monitoring-Tools – Wie und was testet man?

Zum Testen der Performance der eigenen Webseite gibt es diverse Tools, die Schwachstellen offen legen, einen Vergleichswert liefern und somit potentiale zur Verbesserung des Ladeverhaltens von Webseiten offen legen. Oft wird dabei von TTFB oder Server Response gesprochen. Was sich auf den ersten Blick für manch einen wie technische Undurchdringlichkeiten anhört, ist im Prinzip ganz simpel erklärt:

• Time to first byte (TTFB) ist die Geschwindigkeit, meist in sek oder ms angegeben, die der Server benötigt um nach der Anfrage das erste Byte an Informationen an den Client (bzw. Browser) auszuspielen.
• Load Time ist die Zeit bis zu der die Daten, der aufgerufenen Webseite, vollständig an den Browser übermittelt wurden. Hier wird zwischen Erstaufruf (First View) und wiederholtem Besuch unterschieden (Repeat View – Caching sorgt hier für eine schnellere Auslieferung des Webseitendokumentes und der Inhalte).
• Darüber hinaus gibt es noch die Metrik Fully Loaded, die angibt wann in dem Dokument alle Inhalte, einschließlich der durch den Client geladenen dynamischen Elemente, komplett geladen wurden.

Unter anderem diese Metriken verwendet auch ein Teil der folgenden Tools, auf die im folgenden eingegangen wird.

WebPagetest

Der vielen von Euch sicherlich ebenfalls bereits bekannte Dienst Webpagetest.org erlaubt wahrscheinlich die detaillierteste Auswertung der Ladezeiten der Inhalte einer Webseite. Neben dem detaillierten Ladeverhalten der unterschiedlichen Inhalte (Text, Bild, JavaScript, Videos, …) und deren Ladereihenfolge, wird hier ebenfalls getestet, ob die Inhalte bereits komprimiert wurden und ob eine saubere Trennung von Content und Layout vorliegt. Ein weiterer sehr hilfreicher und in letzter Zeit zunehmend ausgebauter Bereich dieser Anwendung ist, dass man seine Webseite von verschiedenen Server-Standorten aus in Nord- & Süd-Amerika, Europa, Asien oder Ozeanien, mit verschiedenen Browser(versione)n, testen kann. Zudem besitzt man die Möglichkeit verschiedene Übertragungsraten von Internet-Verbindung zu simulieren. Eingeteilt werden Performance-KPIs von WebPagetest von sehr gut (A) bis schlecht (F) und darüber hinaus sind diese noch einmal mit ihren numerischen Werten erfasst.

Abb.05 Performance-Monitoring-Tool WebPagetest

ShowSlow

ShowSlow (siehe Abb.1) ist eine Performance-Anwendung, um Webseiten von bzw. mit YSlow (grade), Page Speed (score) und dynaTrace (rank) zu testen und anschliessend ausgiebig zu analysieren. Die nach einem Test erzielten Ergebnisse (metrics) sind für Anwender frei zugängig. Einen wirklich guten Mehrwert bietet ShowSlow, weil es auf einem eigenen Server installiert und somit in den Entwicklungs-, Analyse- und Qualitätsicherungsprozess eines Projektes mit eingebunden werden kann. Ein weiteres sehr hilfreiches Feature ist jenes, dass es dem Anwender erlaubt seine Webseiten mit verschiedenen Server-Standorten aus Nord- & Süd-Amerika, Europa, Asien oder Ozeanien, inklusive mit verschiedener Browser(versione)n, zu testen. Info: Eine Nutzung kann hier nur mit Login oder der Autorisierung eines Social Network-Accounts wie Twitter, Facebook & Co erfolgen.

Pingdom

Zu den wahrscheinlich bekanntesten Pagespeed Tools im Bereich Performance-Monitoring gehört sicherlich der Full Page Test von Pingdom. Mit diesem Tool lässt sich neben der gesamten Ladegeschwindigkeit einer Webseite, auch zusätzliche Informationen wie der Zeitpunkt der Verbindung messen. Außerdem gibt dieser Test der Qualitätssicherung hilfreiche Aufschlüsse darüber, wie viele HTTP-Requests zum Laden der Inhalte notwendig wurden und wie lange die einzelnen Requests zu Laden benötigten. Daraus wiederum kann abgeleitet werden, wie groß das Optimierungspotential dieser einzelnen Requests und somit der gesamten Webseite unter Umständen ist.

YSlow

Ein ähnliches Prinzip nutzt YSlow, dass als Browser-Plugin von Yahoo entwickelt wurde. Voraussetzung ist, dass das Browser-Plugin Firebug installiert ist. YSlow teilt diverse Metriken, die Auswirkung auf die Ladezeit haben könnten in Grade von A (sehr gut) bis F (verhindert schnelles laden) ein. Diese können auch noch einmal getrennt nach Art des Ladezeit-Problems aufgerufen und so strukturiert abgearbeitet werden.

Google PageSpeed

Das letzte Tool zur Analyse von Ladegeschwindigkeiten das ich Euch heute vorstellen möchte, ist das PageSpeed-Tool von Google. Dieses bewertet mögliche Schwachstellen einer Webseite in einer Punktzahl von 0-100, wobei 0 eine extreeeem langsame Seite bedeutet und 100, das diese nicht weiter bezüglich der Schnelligkeit zu optimieren ist. Sie ermittelt nach definierten Regeln wo eine Behebung erforderlich, empfohlen oder bestanden ist. Außerdem umfasst sie gleich die Bereiche „Mobile“ und „Desktop“. Und eine für mobile Endgeräte optimierte Webseite sollte heutzutage keine Webseite vernachlässigen.

Abb.06 Performance-Monitoring-Tool Google PageSpeed

Weitere Tools, die dir helfen schneller zu arbeiten

Nicht genutzte Scripte können mit dem Chrome- und Firefox-Plugin WASP identifiziert werden. Um ungenutztes CSS zu identifizieren kann man das Firefox-Plugin Dust-Me nutzen oder – mit IT Power – Helium implementieren. Dust-Me ist bei uns im Einsatz und deshalb hier eine kleine Warnung zur Anwendung: das bestimmte Elemente auf einer Seite nicht genutzt werden, heißt nicht dass sie in einem anderen Bereich nicht genutzt werden – hier kann man bspw. mit SVERWEISEN in Excel arbeiten.

Webbentwickler müssen kein SEO beherrschen, aber es verstehen und unterstützen.

Um die gewinnbringendesten Optimierungsansätze als erstes anzugehen erstellt man anhand der Tabelle Aufgaben für die Webentwicklung. Alle Themen die 2-mal Prio 1 genießen müssen als erstes angegangen werden. Danach folgen diejenigen, die in der Spalte „Prio der Seite“ mit 1 markiert wurden und in der Spalte „Prio der Optimierung“ eine 2 zugewiesen bekommen haben.

Regelmäßiges updaten der Tabelle und vergleichen mit den Ergebnissen des gewählten Analyse-Tools ist Pflicht, denn meist behebt man mit der Optimierung der einen Baustelle gleichzeitig viele andere Fehler.

Fazit:

Ein Auge auf die Performance der Webseite zu haben ist gleichzeitig das Betätigungsfeld des SEOs, als auch der Webentwicklung, IT oder auch der umsetzenden externen Mitarbeiter. Als SEO gilt es nicht alle auftretenden Fehler allein zu lösen, sondern an den richtigen Stellen die Aufmerksamkeit für seine Anliegen zu erhalten. Deswegen müssen Webentwickler kein SEO beherrschen, aber sie müssen es verstehen und ggf. auch schon vorab die Dinge im Blick haben und in die Entwicklung aufnehmen.

Die Berücksichtigung der Performance als eines der entscheidenden Kriterien bei der Optimierung einer Webseite gibt dem Webseitenbetreiber eine Vielzahl an Informationen, die den Erfolg sichtbar(er) werden lassen können. Neben den Themen Semantik und Responsive Design, erhält aus technischer Sicht momentan zudem kaum ein Thema mehr Zuspruch, als das der Web Performance Optimierung. Die hier vorgestellten Performance-Monitoring-Tools ermöglichen es, teilweise sehr detaillierte Einblicke in das Ladeverhalten von Webseiteninhalten und deren Strukturen zu erhalten und deshalb hoffe ich, dass der ein oder andere Leser die Notwendigkeit dieses Bereiches im Entwicklungsprozess einer Webanwendung erkannt hat und unter Umständen für eigene Analysen gewonnen werden konnte. Und sei es nur, dass der Artikel den ein oder anderen Tipp beinhaltete ;o)