Schneller bedeutet mehr Konversionen: Messe und verbessere die Ladegeschwindigkeit deiner Webseite

Wie misst man die Ladegeschwindigkeit einer Seite?

Es gibt eine Vielzahl von Tools, mit denen man die Ladegeschwindigkeit einer Webseite messen kann. Im Prinzip machen alle Tools das Gleiche: Sie rufen, genau wie ein Besucher, deine Webseite auf. Meistens kann manuell ein Serverstandort ausgewählt werden, von dem aus der Test durchgeführt werden soll. Ich verwende selbst am häufigsten die Tools Pingdom und Webpagetest.

Pingdom

Mit detaillierten Spezifikationen der Ladezeiten (DNS lookup, connect, send, wait, receive) bietet dieses Tool eine gute Übersicht von allen “Assets” (die Rubriken deiner Seite), die geladen werden. Sehr praktisch ist auch das Feature, welches alle Assets nach ihrer Ladezeit sortiert. Das ermöglicht eine detaillierte Problemanalyse. Des Weiteren bietet das Tool konkrete und praktische Tipps, wie jeweilige Probleme einer Seite entsprechend gelöst werden können. Nachteilig ist jedoch, dass Pingdom jeweils nur eine Stichprobe der Ladezeit macht. Außerdem deaktiviert es von selbst jegliches serverseitiges Caching. Falls du Pingdom für einen Ladegeschwindigkeitstest verwenden willst, kannst du die folgende Anleitung nutzen:

• Gehe auf Pingdom.com
• Trage bei example.com die URL deiner eigenen Seite ein
• Öffne das Menü “Settings”
• Wähle, ob du den Test speichern und veröffentlichen möchtest
• Wähle den Server “Amsterdam, Netherlands“ aus
• Klicke auf den Button “Test Now”

Webpagetest

Dieses Tool bietet deutlich mehr Möglichkeiten, um den Ladegeschwindigkeitstest nach deinen eigenen Wünschen anzupassen. Es können beispielsweise für ein zuverlässigeres Ergebnis mehrere Tests durchgeführt werden. Darüber hinaus können der Browser ausgewählt und zwei Seiten miteinander verglichen werden. Webpagetest erlaubt es zudem, auch seitenspezifische Probleme aufzuspüren und gibt konkrete Tipps für wichtige Geschwindigkeitsoptimierungen. Wenn du Webpagetest verwenden möchtest, kannst du die folgende Anleitung nutzen:  

• Gehe auf webpagetest.org
• Trage unter “Enter a website URL” die URL deiner Webseite ein
• Wähle unter “Test Location” den am nächsten gelegenen Serverstandort aus
• Wähle unter Browser einen Browser deiner Wahl aus
• Öffne das Menü “Advanced Settings”
• Erhöhe die Anzahl der durchzuführenden Tests, um ein genaueres Ergebnis zu erhalten
• Wähle gegebenenfalls “Keep Test Private“ aus, wenn du den Test nicht veröffentlichen möchtest
• Klicke auf “Start Test”

Webpagetest verfügt über die praktische Funktion, zwei Seiten gleichzeitig zu testen. Hierbei kann man in einer Animation den jeweiligen Seitenaufbau mitverfolgen. Falls du diese Funktion nutzen möchtest, kannst du sie unter “Visual Comparison“ auswählen. Wenn du deine Seite auf ihre Ladegeschwindigkeit hin untersuchen oder zwei Seiten vergleichen möchtest, sollst du beachten, jeweils dasselbe Tool zu verwenden. Wie kann man die Ergebnisse interpretieren?

First & Repeat View

Die meisten Tools führen zwei verschiedene Tests durch, den First View und den Repeat View Test. Der First View Test demonstriert ein Szenario, in dem ein Besucher noch nicht zuvor auf deiner Webseite gewesen ist und demnach auch keine Cookies und Assets im Cache hat. Achtung: Webpagetest deaktiviert das gesamte serverseitige Caching. Der Repeat View simuliert ein Szenario, wo der Besuch bereits zuvor auf deiner Webseite war und dementsprechend bereits Daten im Browsercache hat.

Load time – Document Complete

Diese Ladezeit berechnet sich vom Aufruf der Seite bis Document Complete. Dies beschreibt den Moment, ab dem der Browser die Seite komplett geladen hat. Im Prinzip ist dies der Augenblick, an dem sämtliche Inhalte (auch CSS) und Grafiken abgespeichert sind. JavaScript wird erst nach dem Document Complete ausgeführt (mit “onLoad“).

Load-time – Fully Loaded

Dies beschreibt die Ladezeit ab Aufruf der Seite bis zu dem Moment, an dem keine Netzwerkaktivität mehr stattfindet. Fully Loaded berechnet auch die Ladezeit nach Abschluss von Document Complete, wie beispielsweise die von zusätzlichen Inhalten eines JavaScripts. Oftmals sind dies allerlei Tracking Pixel (zum Beispiel für das Retargeting).

First Byte

Dies ist die Ladezeit ab Aufruf der Seite bis zu dem Moment, an dem das erste Byte vom Server zurückgesendet wird. Zwischenzeitlich hat der Server bereits mehrere Datenbank Queries durchgeführt und angefangen, die Seite aufzubauen. Laut einer Studie von moz.com besteht ein Zusammenhang zwischen der Time To First Byte und dem organischen Google-Ranking.

Start Render

Der Moment, ab dem das erste Element deiner Seite für den Besucher sichtbar wird. Dieser Parameter ist demnach sehr wichtig für deine Besucher: Denn nichts schreckt mehr ab, als eine leere Webseite.

Visually Complete

Der Moment, ab dem sämtliche Inhalte für den Besucher sichtbar und geladen sind. Diese Ladezeit wird anhand von einer automatischen Analyse von Videoaufnahmen des Ladens deiner Webseite bestimmt. Ein weiterer wichtiger Parameter für deine Besucher! Was kann man machen, um die Ladezeit zu verbessern? Sowohl Pingdom als auch Webpagetest bieten einige Verbesserungsvorschläge an. Ich werde hier darlegen, welche Anpassungen du selber machen kannst und um welche sich ein (guter) Hoster kümmern sollte. Ich beziehe mich hierbei auf das Shared Managed Hosting. Beim Unmanaged Hosting muss man selbstverständlich meist alles selbst erledigen.

Selbst zu erledigen

Die folgenden Verbesserungen kannst du als Seitenbesitzer oder Verwalter so gut wie immer selbst durchführen. Um Redirects anzupassen und ein CDN zu koppeln kann man am besten den Hoster kontaktieren.

• Progressive JPEGs: Die Verwendung von progressiven JPEGs ermöglicht es dem Besucher, Grafiken darzustellen, noch bevor diese komplett geladen sind. Um ein progressives JPEG zu erstellen, muss die Grafik in einer niedrigen (aber akzeptablen) Qualität gespeichert werden. In Photoshop verwendet man hierfür die Option “Save for Web” und erstellt damit ein progressives JPEG mit einer Qualität, die auf dem eigenen Bildschirm noch gut genug aussieht. Außerdem kann man Smush.it von Yahoo verwenden, um Grafiken noch mehr “Lossless” zu komprimieren.
• CDN nutzen / Serve static content from a cookieless domain: Die Verwendung von einem Content Delivery Network ermöglicht es dem Browser, simultan mehr Assets herunterzuladen. Außerdem verzichtet ein CDN auf Cookies und ermöglicht dadurch schnellere Geschwindigkeiten. Einige Managed Hosting Firmen integrieren standardmäßig CDNs in ihren Produkten.
• Minimize redirects: Da Redirects selbstverständlich Zeit kosten, sollst du deine Links entsprechend anpassen, sodass diese die entsprechenden Assets oder Seiten verlinken.
• Avoid bad requests: Auch hier gilt wieder, dass das Verlinken von Assets, die nicht mit dem richtigen Ziel verlinkt, sind nachteilig ist – vor allem für deine Besucher.

Hosting

Die folgenden Anpassungen können meist nur vom Server Administrator durchgeführt werden. Falls du selber nicht über Administratorrechte verfügst, musst du deinen Hoster kontaktieren und ihn bitten, hier aktiv zu werden. Qualitativ hochwertige Hosting Anbieter sollten die folgenden Aspekte jedoch standardmäßig integriert haben.

• Keep-alive Enabled: Dies ist eine Servereinstellung, die dafür sorgt, dass die Verbindung zwischen Client und Server erhalten bleibt. Wenn die Verbindung ständig erneut aufgebaut werden muss, kostet dies Zeit und ist daher nachteilig für die Konversionsrate.
• Compress Transfer: Dies ist eine Servereinstellung, die dafür sorgt, dass Texte (HTML, JavaScript, CSS) komprimiert gesendet werden. Die Verkleinerung dieser Daten ermöglicht schnellere Ladegeschwindigkeiten.
• Compress Images: Identisch zum letzten Punkt, allerdings dementsprechend für Grafiken.
• Cache static content/Leverage browser caching: Dies ist eine Servereinstellung, die dafür sorgt, dass statische Inhalte (Grafiken, CSS, JavaScript) für einen frei definierbaren Zeitraum im Browser-Cache gespeichert werden. Wenn diese Funktion deaktiviert ist, lädt der Browser bei jedem Besuch alle Inhalte wieder und wieder herunter.

[caption id="attachment_8756" align="alignleft" width="300"] Vielen Dank an Fotolia für dieses Foto[/caption] Außerdem ist es generell sinnvoll, nicht essenzielle Elemente (zum Beispiel Grafiken oder Plugins) von deiner Seite zu entfernen. In jedem Fall sollte man auf Karussellfunktionen und Funktionen, die von externen APIs kommen (z.B. Twitter- oder Facebook-APIs), verzichten, da diese beim Laden einer Seite viel Zeit kosten können. Die Geschwindigkeit einer Webseite ist immer ein Zusammenspiel zwischen deiner Seite, dem Hosting, dem „Internet” und dem Besucher. Du kannst jedoch in jedem Fall die ersten beiden Aspekte beeinflussen.

Was ist schnell?

Selbstverständlich erfährt jeder Besucher „Geschwindigkeit” anders und bewertet anhand seiner eigenen Kriterien. Es gibt jedoch einige Normen, die allgemein als erstrebenswert gelten. Google gibt beispielsweise an, dass man eine Ladezeit von einer Sekunde auf mobilen Geräten anstreben sollte. Laut einer Studie von Forrester für Akamai sind zwei Sekunden ein gutes Kriterium für E-Commerce Webseiten auf Desktopcomputern oder Laptops. Ist deine Seite langsamer als drei Sekunden, dann solltest du dich darum kümmern, da 47% der Besucher deine Seite in der Zeit bereits wieder verlassen haben. Wir sind der Meinung, dass zwei Sekunden Ladezeit für „Visually Complete” für die meisten Webseiten realistisch und machbar sein sollten.