Optimierung der Seitenperformance – Speed matters (Teil I)

Zeit ist Geld – und das trifft auch für die Ladezeit einer Seite zu. Wird beim Laden der Webseite zuviel Zeit benötigt, springen viele User ab, bevor sie ihr Ziel erreichen und beispielsweise einen Kauf tätigen. Gerade beim mobilen Surfen mit geringeren Bandbreiten als beim stationären Internetanschluss werden lange Ladezeiten oft zur Geduldsprobe. Waren es im Jahr 1995 noch durchschnittlich 2.3 Objekte, die geladen werden mussten, waren es 2010 bereits 75. Die durchschnittliche Seitengröße wuchs von 14.1K auf knapp 500K an. Webseiten besitzen daneben immer mehr Elemente von Drittherstellern wie Facebook Like/Share, Google+1 Button oder Werbeanzeigen, die von diversen Servern hinzugeladen werden, was zur Verschlechterung der Performance beitragen kann.

Im April 2010 gab Google bekannt, dass Site Speed als Faktor in den Suchalgorithmus eingeht. Seit kurzem bietet Google einen Dienst an, der es Webseitenbetreibern ermöglichen soll, ihre Seiten automatisch performanter ausliefern zu lassen. Dabei werden die Daten von den Servern des Webseitenbetreibers geladen, optimiert und Usern über Google Server verteilt auf der ganzen Welt ausgeliefert. Gerade für internationale Websites, die Anfragen performant aus vielen verschiedenen geografischen Regionen bedienen müssen, wird dieser Dienst, der in der derzeitigen Testphase noch kostenlos ist, besonders interessant sein. Wer den Dienst testen möchte, muss sich bei Google „bewerben“.

Aber nicht nur für Suchmaschinenoptimierung ist eine Verbesserung der Performance wichtig. Auch in den Bereichen Usability/User Experience und Conversion Optimierung wird von schnell ladenden Websites profitiert. Ein A/B-Test bei Mozilla bezüglich der Reduzierung der Ladegeschwindigkeit um 1 Sekunde zeigte eine Erhöhung der Downloads um 15.4 %. Die Entwickler waren zuvor von einer Verbesserung um lediglich 2.7 % ausgegangen und vom Ergebnis des Tests sehr überrascht, wieviel eine so geringe Ladezeitenoptimierung ausmachen kann.

Welche Möglichkeiten es gibt, selbst etwas für die Optimierung der Ladezeit zu tun und wie der Stand der Performance gemessen werden kann, soll in diesem und dem Folgeartikel erläutert werden.

Tools zum Testen der Site Performance

Die Ladezeit einer Webseite setzt sich aus verschiedenen Aktivitäten zusammen, die einzeln für sich optimiert werden können, z. B. der Abruf von Bildern oder JS-Dateien.

Zum Messen der Ladezeit einer Website steht eine Menge an Tools bereit. Allerdings ist die Ladezeit abhängig z. B. von der Geschwindigkeit des ausliefernden Servers, der Internet-Leitung des abfragenden Computers oder vom Standort des abfragenden Computers. Beim Vergleich der Performance mit mehreren Tools wird es daher auch immer Abweichungen geben.

Um diese zu minimieren, sollte man sich auf ein Tool zur Abfrage beschränken, um mit gleichbleibenden Bedingungen zu arbeiten. Zudem empfiehlt es sich, regelmäßig und über einen längeren Zeitraum zu testen und die Performance zu Stoßzeiten und auf unterschiedlichen Seitentypen zu testen.

• Yahoo! YSlow für Firefox

YSlow ist ein Add-On für den Firefox und ermittelt einen Score für die Ladezeit. Es werden Noten für die einzelnen Optimierungsbereiche vergeben, sodass schnell erkannt werden kann, welche Bereiche besonders schlecht abschneiden und einer Optimierung bedürfen. Daneben bietet das Add-On Tipps zur Optimierung.

Yahoo! YSlow

• Google Page Speed:

Ähnlich Yahoo! YSlow ist auch Google Page Speed ein Add-On (für Firefox und Google Chrome), mithilfe dessen ein Score ermittelt und Hilfestellung zur Optimierung einzelner Bereiche gegeben wird. Das Tool stellt übersichtlich dar, wo besonders Möglichkeiten zur Verbesserung der Performance zu finden sind und zeigt Beispiele für diese an. Zusätzlich werden komprimierte Versionen von Dateien, wie z. B. Bilder oder CSS, direkt zum Download angeboten.

PageSpeed Firefox Add-On

• WebPagetest

Das Test-Tool WebPagetest bietet die Möglichkeit, den Serverstandort auszuwählen. So wird der Standort besser auf den User ausgerichtet, was besonders bei internationalen Websites ein sehr sinnvolles Feature ist, um die Ergebnisse nicht zu verfälschen. Wird ein Test-Tool gewählt, das z. B. nur einen Server in den USA enthält, können Abrufe durch z. B. deutsche User nicht effektiv simuliert werden. Die Antwortzeiten des Tests weichen dann unter Umständen stark von den eigentlichen Antwortzeiten ab und verfälschen die Ergebnisse.

WebPagetest stellt verschiedene Ansichten zur Auswahl wie beispielsweise eine Wasserfallansicht zur Darstellung der Ladehierarchie oder eine Übersicht der einzelnen Ressourcen inklusive einer Information über deren Umsetzung in Noten (GZIP, Keep-alive, CDN) zur Verfügung.

WebPagetest

• Pingdom

Pingdom lädt beim vollständigen Seitentest das gesamte HTML inklusive aller Objekte. Jedes dieser Elemente wird mit seiner individuellen Ladezeit als Wasserfallgraph dargestellt. Es kann z. B. die Darstellung nach Ladehierarchie oder Ladezeit der einzelnen Objekte gewählt werden. Zusätzlich bietet Pingdom die Möglichkeit, sich per E-Mail oder SMS über den aktuellen Performance-Stand seiner Website informieren zu lassen, um sie jederzeit monitoren zu können. Pingdom nutzt Server weltweit und ermittelt Durchschnittswerte für die Ladezeiten. Optimierungsmaßnahmen werden bei Pingdom nicht gegeben.

Pingdom Tools

• Google Webmaster Tools

Die Google Webmaster Tools bieten seit einer Weile unter dem Punkt „Google Labs“ die Erweiterung „Website-Leistung“. Google zeigt hier die durchschnittliche Geschwindigkeit einiger Stichproben an und vergleicht diese mit dem Durchschnitt anderer Websites. Performance-Probleme durch Relaunches oder andere Umstellungen an der Website können durch die Darstellung im Zeitverlauf grob analysiert werden. Es werden ein paar Maßnahmen zur Optimierung der Performance vorgeschlagen, z. B. GZIP-Komprimierung. Um tatsächlich sinnvolle Optimierungstipps zu erhalten, helfen die Webmaster Tools jedoch nicht wirklich weiter.

Website Leistung in den Google Webmastertools

• Google Analytics

Mithilfe einer Erweiterung des Google Analytics Codes kann die Ladezeit in den Webanalysedaten dargestellt werden. Dazu muss der Code lediglich um folgende Zeile ergänzt werden:

_gaq.push(['_trackPageLoadTime']);

Unter „Content“ ist in Google Analytics dann die Ladezeit für die einzelnen Seiten einsehbar. Dies funktioniert allerdings nur in der neuen Ansicht in Google Analytics, zu der im rechten oberen Seitenbereich gewechselt werden kann.

Mithilfe dieser Daten können auf Seitenebene Performanceprobleme bestimmt werden. Google Analytics erhebt stichprobenartig die Ladezeit von ausgewählten Seitenaufrufen. Mithilfe dieser Informationen können Seiten identifiziert werden, die eine überdurchschnittliche Ladezeit haben und gezielt optimiert werden (z. B. durch Reduktion der Dateigröße bei Bildern oder das Auslagern nicht benötigter JS-Skripte). Ausserdem lässt sich anhand der Daten ermitteln, ob beispielsweise User aus bestimmten geografischen Regionen oder mit bestimmten Browsern höhere Ladezeiten haben als andere User. Eine Auswertung, ob und wie sich eine Verbesserung der Performance im SEO-Traffic niederschlägt, wäre ebenfalls denkbar.

Google Analytics Geschwindigkeitsdarstellung

Es ist empfehlenswert, auf die von Google bereitgestellten Performance-Daten in Google Analytics und den Google Webmaster Tools zurückzugreifen und mit diesen Analysen zu fahren.

Daneben sollten weitere Tools genutzt werden, die Empfehlungen zur Optimierung geben. Ausserdem sollte bei der Auswahl von Test-Tools darauf geachtet werden, dass der Serverstandort des Tools ähnlich der geografischen Ausrichtung der User der Website ist.

Im 2. Teil des Artikel wird auf gezielte Verbesserungsmöglichkeiten, wie z. B. die Nutzung von CSS-Sprites oder GZIP-Komprimierung, eingegangen, um die Seitenperformance zu optimieren.