Eine Webseite besteht in ihrer Gesamtheit bekanntlich aus vielen einzelnen Bausteinen. Diese Bausteine erstrecken sich von CSS- und JavaScript-Dateien, über Bilder, bis hin zu Text und Werbebannern. Jeder dieser Bausteine will natürlich geladen werden und benötigt dazu eine gewisse Zeitspanne. Um nun also erkennen zu können, welcher Baustein ein Performance-Killer (Obacht! Buzzword!) ist, müssen wir natürlich zunächst einmal wissen, wie viel Zeit die einzelnen Elemente derzeit benötigen.

Ein Tool, sie zu analysieren

Da das für den faulen Webentwickler sehr mühsam sein kann, holt er sich ein Online-Tool zur Hilfe. Und da es im Internet an nichts mangelt, gibt es auch hier eine geballte Auswahl. Wir möchten uns in diesem Beitrag allerdings auf den Webpagetest beschränken. Dieser ist für eine erste Auswertung mehr als ausreichend. Wir rufen also zunächst den Webpagetest auf und tragen unsere Website URL ein, die wir testen möchten. Als Test Location kann man einen Knotenpunkt aus dem Dropdown Menü auswählen, von welchem auf die Seite verbunden werden soll. Zusätzlich ist es möglich, einen Browser für die Verbindung auszuwählen (Achtung: Nicht alle Browser stehen für alle Knotenpunkte zur Verfügung). In unserem Beispiel möchten wir die Seite www.suedkurier.de testen. Da es sich um eine deutsche Seite mit überwiegend deutschen Usern handelt, wählen wir als Location Frankfurt, Germany (IE 11, Chrome, Firefox) aus. Als Browser wählen wir Firefox (oder welcher Browser euch sonst am liebsten ist).

Die Advanced Settings lassen wir in unserer ersten Analyse außen vor. Mit einem Klick auf Start Test, starten wir den Test (wer hätt’s gedacht…).

Viele, viele bunte Zeitstrahlen

Nun rödelt unser kleiner Freund eine Weile. Da es sich um ein kostenloses Tool handelt, muss man natürlich mit ein paar Einschränkungen leben. Daher kann es durchaus vorkommen, dass unser Test in eine Warteschlage gestellt wird. Doch das Warten wird mit einer lustigen Übersicht belohnt, die vor Farben nur so strotzt. Diese wollen wir uns nun Abschnitt für Abschnitt ansehen:

Der erste Abschnitt gibt einen kurzen Überblick über sechs Kernbereiche einer Performance Analyse. Die Zeit bis zur ersten Byte-Übertragung (Serverantwortzeit), Keep-Alive-Verbindungen, komprimierte Verbindungen, komprimierte Bilder, gecachter Inhalt und die Nutzung von einem CDN. Sie alle werden mit den Noten A (am besten) bis F (am schlechtesten) bewertet. Der nächste Bereich stellt eine handvoll Zahlen in einer schicken Tabelle dar. In zwei Zeilen wird hier zwischen dem First View und dem Repeat View unterschieden. Besucht der User die Seite also zum ersten Mal oder kann der Browser bereits Elemente aus dem Cache laden? Obwohl die Werte daher in der zweiten Zeile immer niedriger sein werden, sollte unter Augenmerk doch auf dem First View liegen. In den einzelnen Spalten wird Auskunft über die Ladezeit, die Zeit bis zum ersten Byte, der Zeitpunkt des Renderns, der Speed Index und die Anzahl der DOM Elemente gegeben. Zusätzlich wird die Zeit, Anfragen und Bytes angezeigt, bis das Dokument vollständig ist bzw. bis alles komplett geladen wurde.

Don’t go chasing waterfalls

Jetzt folgt das eigentliche Kernstück des Webpagetest: das Wasserfall-Diagramm. Das ist nicht nur schön anzusehen, sondern auch recht aussagekräftig. Hier werden alle Requests chronologisch aufgelistet, die an den Browser gestellt und abgearbeitet werden. In farblichen Zeitstrahlen wird die dazu benötigte Zeit dargestellt. Denn das tun Zeitstrahlen. Sie stellen Zeit dar…

So lässt sich nicht nur ablesen, zu welchem Zeitpunkt welche Datei geladen wird, sondern auch, wie lange dieses Laden dauert. Mit einem Blick kann man hier nun erfassen, welche Elemente übermäßig viel Zeit benötigen und kann dahingehend optimieren. Achtung Spoiler! In der nächsten Folge werden wir uns das noch genauer angucken. Zu guter Letzt kommen wir zum Content Breakdown. Hört sich nicht nur gut an, sieht auch noch gut aus. Denn wo ein Wasserfall-Diagramm ist, ist ein Torten-Diagramm nicht weit.   Hier werden die prozentualen Anteile der einzelnen Requests und der benötigten Bytes aufgeschlüsselt. Aus wie vielen Bildern besteht die Seite und wie viel Bytes nehmen sie ein? So erhält man einen schönen Überblick über die einzelnen Elementgruppen, die im Dokument enthalten sind.

Fazit

Damit erhalten wir bereits eine erste Übersicht über die Performance unserer Webseite. Wir können durch die Notenvergabe sehen, wie gut die einzelnen Bereiche optimiert sind und wo noch Handungsbedarf besteht. Die Zahlen belegen dann schwarz auf weiß, wie es um unsere Ladezeit steht. Im Wasserfall erkennen wir genau, welche einzelnen Dateien Probleme machen und im Content Breakdown schlüsseln wir abschließend auf, wie viele Dateien welcher Elementgruppen geladen werden müssen. Also liebe Kinder, hoffentlich habt ihr gut aufgepasst. Denn in der nächsten Folge werfen wir einen genaueren Bilck auf die Wasserfall-Analyse. Sie hilft uns nämlich recht schnell zu erkennen, wo eine Datei hängt, die optimiert werden muss. Die komplette Serie „Speedforce“ aka „Wie mache ich meine Website schneller?“ gibt es übrigens hier!