Page Speed Screenshots mit Google Chrome erstellen [Tutorial]

Dieses Tutorial erklärt, wie man mit dem Chrome Browser die Ladezeit von Websites auf dem Smartphone simulieren und mit Screenshots erfassen kann.

Warum sollte man das tun?

Die Ladezeit von mobilen Websites ist ein zentrales Erfolgskriterium. Untersuchungen zeigen, dass ganze 53% der User abspringen, wenn eine Seite nicht innert 3 Sekunden geladen ist. Der Page Speed ist aber immer auch eine subjektive Empfindung und kann gerade im eigenen Unternehmen überschätzt werden: Man kennt die Website gut, besucht sie aus dem eigenen, schnellen WLAN und hat sie auch bereits im Cache, was sie nochmals schneller laden lässt.

Die Screenshot-Methode macht die Ladezeit objektiv greifbar und bietet somit die Grundlage, sie in Meetings und Projekten zu thematisieren – und hoffentlich auf ein Minimum zu optimieren.

Was man dazu benötigt:
Den ganz normalen Chrome Browser von Google, sonst nichts.

1. 1. Website in Chrome öffnen
   
2. 2. Developer Tools von Chrome öffnen (entweder via Rechtsklick -> Inspect, oder das reguläre Menü View -> Developer -> Developer Tools)
3. 3. Einstellungen anpassen: A) Device Toogle aktivieren (falls nicht schon aktiv – muss blau sein), B) Geräteeinstellung auf iPhone 6 setzen, Skala auf 100%, C) Bei Netzwerk/Network die folgenden Einstellungen vornehmen: Screenshot-Kamera aktivieren, Cache deaktivieren, Geschwindigkeit: “Regular 3G” wählen sowie darauf achten, dass “no throttling” im Menü aktiviert ist.

4. 4. Seite neu laden und Screenshots erstellen: Mit den gemachten Einstellungen sind wir jetzt ready für den grossen Test. Im Browser auf Reload klicken (bzw CTRL-R drücken) – die Seite wird jetzt neu geladen mit den mobilen Settings, gleichzeitig werden Screenshots erstellt für verschiedene Ladezeiten.

   Resultat:

    

5. 5. Tipp: Die Screenshots lassen sich mit einem Doppelklick auf ihr Thumbnail öffnen/ vergrössern. Falls die Bilder verzerrt sind, nochmals neu erstellen (einfach reloaden) und dabei darauf achten, vorher das Fenster-Frame für die iPhone Ansicht komplett sichtbar einzustellen – dazu die Developer Tools an den unteren Rand minimieren (Trennlinie mit der Maus greifen und verschieben).

6. 6. Für Präsentation aufarbeiten: Drei Screenshots auswählen und kommentieren.

   1. Screenshot um 3 Sekunden
   2. Screenshot aus der Mitte oder mit ersten sichtbaren Inhalten
   3. Screenshot nach komplettem Laden (der letzte in der Reihe)

   Basis-Daten für Argumentation:

   53% der User verlassen Seite, die nicht in 3 Sekunden geladen ist
   47% erwarten, dass Seite unter 2 Sekunden lädt
   52% bezeichnen Ladezeit als wichtigen Markenloyalitätsfaktor

    

7. 7. Resultat präsentieren – Voilà