Ladegeschwindigkeit der Website mit webpagetest.org testen

Immer mehr Speed

Das Thema Ladegeschwindigkeit ist kein Neues: schon zu Beginn des Webs war die Ladezeit ein wichtiger Faktor für den Erfolg einer Website - die Bandbreite der Internetanschlüsse war so gering - erinnern wir uns: 57k Modems waren vor 20 Jahren oftmals das Höchste der Gefühle; heute sind 50 MBit Anschlüsse keine Seltenheit mehr -, dass bereits ein paar hundert Kilobyte die Obergrenze für eine Seite war, bei der eine anständige Ladezeit möglich war.

Mit steigender Bandbreite hat sich die Lage im Bereich Desktop Computer zumindest theoretisch einigermaßen entspannt. Die immer größere Nutzung von mobilen Endgeräten und immer größerer Bildschirme mit hoher Auflösung (damals, vor 20 Jahren, z. B. 19" mit 1.200 x 800 Pixel, heute, z. B. 27" mit 2.560 x 1.440 Pixel) versetzt die Website Betreiber in eine ähnliche Lage wie vor zwanzig Jahren - es ist ein bisschen dasselbe Problem wie das Smartphone-Akku Problem: Akkus werden immer leistungsfähiger, aber die Geräte verbrauchen immer mehr Strom.

Ladegeschwindigkeit als Ranking-Faktor

Heute bekommt die Ladezeit eine neue Dimension: Suchmaschinen, allen voran Google, integrieren die Ladezeit in die Berechnung des Indexes. Vereinfacht gesagt: Je langsamer eine Website lädt, umso weiter hinten wird sie in Suchergebnissen angezeigt. Spätestens seit diesem Zeitpunkt ist das Thema bei professionellen Website Betreibern angekommen und ein regelrechtes Wettrennen hat begonnen.

Faktoren, die die Ladezeit beeinflussen

Es gibt mehrere Ebenen auf denen sich Optimierungen bemerkbar machen können. Einerseits die mit der Verbindung an sich zu tun haben, bzw. mit der "Power" - im Autovergleich: die Anzahl PS, ob das Auto aerodynamisch ist, wie viel es wiegt... Andererseits ob eine Website gut gebaut ist, unnötige Ladevorgänge von Elementen verhindert - im Autovergleich: der Fahrer; fährt er denn optimal, kennt er die Strecke oder muss er an allen Ampeln stehen bleiben? Es gibt sicher bessere Vergleiche als die mit dem Auto 😉 Jedenfalls werden die 2 Ebenen in den folgenden Absätzen genauer erklärt.

Hosting-Ebene: Infrastruktur, Webserver, Caching

  • Infrastruktur: generell spielt es eine Rolle ob die Website auf einem Shared Hosting Server oder einem dedicated Server betrieben wird. Die Geschwindigkeit beginnt bereits bei der Internet-Anbindung des Rechenzentrums und wie die Router des Anbieters die verschiedenen Server verbindet. Daraus resultiert nicht nur die Geschwindigkeit sondern auch der sogenannte Time to first Byte, eine Messgröße für die Zeit, die benötigt wird bis der erste Byte vom Server beim Client ankommt.
  • Web Server: der Webserver spielt ebenfalls eine Rolle in der Optimierung. Ganz allgemein sind Webserver mit Nginx schneller als Apache - das muss nicht unbedingt so sein, mit etwas Konfigurationsarbeit kann auch Apache fliegen. Aber nicht nur der Wechsel der Software bringt Geschwindigkeit. Auch Einstellungen wie Keep-Alive führen dazu, dass die Verbindung zum Webserver nicht nach jedem Request neu verhandelt werden muss.
  • Caching ist ein komplexes Thema, da es auf vielen Ebenen Caching gibt (CDN, HTTP Reverse Proxy wie Varnish Cache, local Cache, Datenbank Cache wie memcached oder Redis, ...). Caching gehört zu den effektivsten Optionen, um die Ladezeit zu verkürzen, je nach dem wie es eingesetzt wird. Es sei angemerkt, dass nicht immer alles gecacht werden kann - Seiten mit hoher Änderungsfrequenz wie z. B. Nachrichtenportale möchten, dass Besucher immer die neuesten Artikel zu sehen bekommen.

Website-Ebene: HTML/JS/CSS, Media-Elemente

  • Eine korrekte Seitenstruktur spielt eine große Rolle - wir reden gar nicht von kaputtem HTML. Die HTML-Struktur eines Dokuments sollte immer nur so schlank sein wie nötig und bizarre Verschachtelungen sollten möglichst vermieden werden. Entsprechend, wenn nicht zwingend notwendig, sollten Elemente nicht erst per Javascript eingefügt werden.
  • Media-Elemente, sprich Bilder sollten stets für das Endgerät optimiert sein - ein großes Bild für Desktop sollte in einer entsprechend kleineren Version auf einem Smartphone geladen werden.

Online Geschwindigkeitscheck mit www.webpagetest.org

Das kostenlose Projekt webpagetest.org ermöglicht für jeden die Ladezeit seiner (öffentlich zugänglichen) Website zu messen und zu analysieren.

So einfach geht's

Um eine Analyse der Website zu starten braucht man nur:

  • URL: Die Website URL eingeben, am Besten inklusive https und www, sonst wird die ggf. vorhandene Umleitung mit in die Ladezeit aufgenommen
  • Location: von wo soll denn gemessen werden? Tatsächlich spielt die geografische Lage auch eine Rolle - wobei webpagetest.org auch diesen Faktor in den Ergebnissen berücksichtigt und einen Korrekturfaktor implementiert.
  • Browser: es kann durchaus eine Rolle spielen welcher Browser getestet wird. Es lassen sich übrigens je nach Anbieter und Location auch mobile Browser auswählen
  • Anzahl Tests: es wird empfohlen mehrere Tests auszuführen um einen aussagekräftigeren Mittelwert zu erhalten
  • Repeat View: hier handelt es sich um die Ladezeit, wenn ein Client (Browser) wiederholt eine Seite lädt und ggf. Caching Effekte besser bemerkbar sein sollten - es wird empfohlen first view and repeat view auszuwählen

Übersicht des Ergebnisses

Für die schnelle Beurteilung des Ergebnisses dienen die 6 Indikatoren (A bis F - A ist die Bestnote).

Hier in kürze die Bedeutung der 6 Punkte:

  1. First Byte Time: Dauer für den Empfang des ersten Bytes des Webservers. Dieser Wert lässt sich nicht wirklich verändern. Der Wert ist abhängig von der physikalischen Hosting-Umgebung (Rechenzentrum, Server) und der momentanen Auslastung der Systeme.
  2. Keep-alive enabled: Option des Webservers, die bewirkt, dass die Verbindung zwischen Server und Browser offen bleibt und somit vermieden wird, dass jedes Mal der TCP-Handshake neu ausgehandelt werden soll. Eine Webseite hat oftmals 100 oder mehr Elemente, die geladen werden sollen - da kann eine vermeintlich kleine Optimierung schon mal was bewirken.
  3. Compress transfer: ebenfalls eine Webserver-Einstellung. Der Webserver kann die Daten komprimiert übertragen, sodass weniger Daten übertragen werden brauchen. Moderne Browser können inzwischen alle mit komprimierten Datenübertragung umgehen.
  4. Compress images: hier sind die Website-Betreiber gefragt. Der Indikator zeigt wie gut die Bilder, die geladen werden, komprimiert sind. Lässt sich die Größe (ohne Qualitätsverlust) verringern?
  5. Cache static content: kommen die angezeigten Elemente vom Cache oder wurden diese frisch vom Webserver ausgegeben?
  6. Effective use of CDN: werden die Inhalte von einem CDN (Content Delivery Network) ausgegeben?

Performance Results

In der oberen Tabelle sind weitere Werte abzulesen, die als Ergebnis des Geschwindigkeitstests zu verstehen sind. Hier wird die Geschwindigkeit der Anzeige der Website in einzelne Stufen unterteilt, um besser nachzuvollziehen, wo die Ladezeiten entstehen.

  • Load Time: die Zeit entspricht der Ladezeit der Website. Die Fully Loaded Zeit hingegen misst noch alle Aktivitäten bis zu 2 Sekunden nach der Load Time, also Elemente, die beispielsweise per Javascript nachgeladen werden.
  • First Byte (TTFB): die Zeit, die für den ersten Byte vom Server zum Browser benötigt, wenn die Website erstmals aufgerufen wird.
  • Start Render: Zeit, die der Browser benötigt, um mit der Anzeige der Website zu beginnen.
  • Speed Index: der Speed-Index ist ein Wert, um die gemessene Geschwindigkeit zu bewerten. Je kleiner dieser Wert ist, umso besser. Hier gibt es ausführliche Informationen wie dieser Index errechnet wird: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Details - Wasserfall Diagramm

Im Wasserfall-Diagramm lässt sich sehr schnell erkennen wie viele Requests das Laden der Seite erzeugt und wie schnell die einzelnen Requests beantwortet werden. Anhand der Farbcodes lassen sich die Requests auch einstufen, ob DNS Anfrage, HTML/Text, Javascript/Text, Bilddaten oder andere Inhaltstypen geladen werden.

Content Breakdown

Der Bereich "Content Breakdown" ist besonders interessant um die Verhältnisse von Text, CSS, Javascript und Bilder zu sehen. So lässt sich auch besser entscheiden wo der größere Hebel ist, wenn es darum geht Prioritäten für die Optimierung festzulegen.

Bildanalyse

Der relativ neue Punkt "Image Analysis" bietet die Analyse der Bilddateien. Der Dienst prüft jedes einzelne Bild, bewertet die Kompression und benotet diese auch (A-F). Es ist dort auch möglich, den Cloud-Dienst kostenpflichtig in Anspruch zu nehmen, jedoch keine Pflicht. Die Optimierungen, falls welche sinnvoll möglich sind, können Sie selbst durchführen - es gibt dafür zahlreiche Bildbearbeitungsprogramme, die dafür genutzt werden können. Es gibt auch ein Artikel in diesem Blog zum Thema Bildoptimierung.

Ein professionelles Tool für null Euro

Webpagetest.org ist ein ausgereiftes Projekt mit dem die Optimierung von Websites wirklich gut vorangetrieben werden kann. Besonders nett ist, dass das Projekt völlig kostenfrei nutzbar ist und auch keine Registrierung erfordert. Hin und wieder müssen Sie etwas warten bis die Analyse-Anfrage durchgeführt wird - schließlich sind Sie nicht die einzige Person, die diesen Dienst in Anspruch nehmen.

CloudConf 2015

The big european event on cloud computing and scalability
The Cloud Conf is coming back after the successful 2013 and 2014 editions.

The goal is always the same: make a great day full of networking and technical speeches about cloud computing, involving (as in the past) great companies and speakers (in the previous editions: AWS, Zend Technologies, OpenStack, OrientDB, Redis, Cloud9 IDE, Spotify, ElasticSEarch…)

The CloudConf is suited for developers, devOps, startups e IT managers, and it will be hosted in Turin, a fantastic and dynamic italian city. Don’t miss it!