Verbesserung des Speed Index auf 401

29.09.2014 by Stefan Wintermeyer

Letzte Woche ging die neue AMOOMA Webseite online. Heute möchte ich ein wenig mehr in die Details der Index-Seite gehen und erklären wie man auf einen Speed Index von 401 kommen kann.

Der Grundgedanke

Eine zweite Chance auf den ersten Eindruck gibt es nicht. Deshalb ist die Index-Seite so enorm wichtig. Sie muss schnell laden und auch optisch schön anzuschauen sein. Und das sowohl auf dem Desktop wie auch auf dem Handy. Mit einem rein textbasierten Ansatz wäre das Geschwindigkeitsproblem leicht lösbar gewesen. Aber so eine Seite sieht schon reichlich trostlos aus. Es sollte auf jeden Fall das AMOOMA Logo als Grafik in der Navigationszeile, ein Avatar-Bild von mir und zentral ein Hintergrund-Foto im Splash-Bereich angezeigt werden.

Das Ergebnis

Die Seite lädt innerhalb von Deutschland mit einer DSL-Verbindung in ca. 500ms. Auf dem Handy einen Tick länger, aber immer noch unter der magischen 1.000 ms Barriere.

<img src=”/assets/2014/09/29/webpagetest_filmstrip_20140929.png” class=pure-img-responsive=”true” alt=Filmstrip des Seitenaufbaus=”true” width=”1350” height=”164” alt=”2014/09/29/webpagetest_filmstrip_20140929.png”>

HTML und CSS

Durch Verwendung von http://purecss.io/ konnte ich das Inline CSS für ein responsives Layout zusammen mit dem HTML-Code der Index-Seite leicht komprimiert innerhalb der 14 KB Grenze übertragen. Ein Round-Trip. Schneller geht es nicht.

Grafiken und Fotos

Das AMOOMA Logo hat eine Grösse von 4 KB. So viel Platz war noch in der index.html Datei bei zur 14 KB Grenze. Deshalb wurde diese Datei Inline eingefügt. Damit schaft es das Logo zwar nicht in den Browser-Cache, aber der ist ja auch kein Selbstzweck (sprich man muss es immer abwägen). Das Avatar-Foto im unteren Bereich der Seite hat rund 8 KB. Da es aber nicht im Above-The-Fold-Bereich angezeigt wird, hat mir das keine schlaflosen Nächte bereitet.

Das Hauptproblem war das zentrale Splash-Hintergrund-Strand-Foto mit rund 40 KB. Es gab zwei Möglichkeiten:

Ich habe mich für die erste Variante entschieden. Hier ist der Wasserfall:

<img src=”/assets/2014/09/29/waterfall.png” class=pure-img-responsive=”true” alt=Stefan Wintermeyer=”true” width=”930” height=”297” alt=”2014/09/29/waterfall.png”>

Für alle die sich sonst nicht mit Webperformance beschäftigen: Wichtig ist die grüne Linie bei der 0.4 Markierung. Der Browser ist danach zwar noch weiter beschäftigt, aber dabei handelt es sich nur um Google Analytics Code der im Hintergrund abgearbeitet wird. Die Seite ist nach 500 ms fertig gerendert.

Vorher-Nachher-Vergleich

Damit jeder die Werte nachvollziehen kann, habe ich die Test bei webpagetest.org abgespeichert und den Link dazu in die Tabelle geschrieben.

Start Render Visually Complete Speed Index
Alte Seite 1.696s 1.700s 1700 webpagetest.org/…/140923_N4_G32
Neue Seite 0.391s 0.500s 401 webpagetest.org/…/140929_TQ_HVP

Wie immer freue ich mich über Anregungen und Feedback.

AMOOMA WebPerf