Wie Du die Ladezeit Deines Shops richtig misst

Reading Time: 3 minutes

Die Ladezeit einer Webseite beschreibt die Dauer aller Prozesse, die vom Aufruf der Webseite bis zu deren vollständiger Darstellung im Browser stattfinden. Da diese Prozesse ganz eigene Anforderungen an ihre Optimierung haben, ist es sinnvoll, zusätzliche Messwerte zu finden. Dies sind dabei die wichtigsten:

Time to First Byte (TTFB)

  • Der “Time to First Byte” beschreibt den Zeitraum zwischen dem Aufruf der Webseite und den ersten empfangenen Daten vom Webserver.
  • In diesen Zeitraum fällt der Aufbau der Verbindung mit dem Webserver. Hierzu muss die aufgerufene Domain (“example.com”) in die eindeutige IP-Adresse des Servers (“127.0.0.1”) aufgelöst werden.
  • Ist die Verbindung hergestellt, verarbeitet der Webserver die Anfrage und beginnt mit der Übertragung der Daten. Die Stoppuhr wird gedrückt, wenn das erste Byte sein Ziel erreicht.
  • Mit dem TTFB kann gemessen werden, ob es ein Problem mit dem Verbindungsaufbau gibt. Er ist auch ein guter Hinweisgeber auf mögliche Flaschenhälse in der Web-Entwicklung.

First Contentful Paint (FCP)

  • Während die Übertragung der Daten begonnen hat, übernimmt nun der Browser die Darstellung der Webseite.
  • Dazu muss der Code ausgelesen werden und die wichtigsten Informationen zur Darstellung der Webseite (Stylesheets) müssen verfügbar sein.
  • Hat der Browser genügend Informationen gesammelt, zeichnet er die ersten Elemente auf den Bildschirm. Hier stoppt die Zeit für den “First Contentful Paint”.
  • Der FCP ist besonders wichtig für die User Experience, da der Nutzer merkt, dass sich etwas im Seitenaufbau tut. Je früher der FCP erfolgt, desto bereitwilliger wartet der Nutzer auf die restlichen Inhalte.

First Meaningful Paint (FMP)

  • Eine Webseite stellt üblicherweise mehr dar als auf den ersten Blick ersichtlich ist. Der Teil, den wir ohne zu scrollen im Browser sehen können, ist der sogenannte “Above the fold”.
  • Sind alle Darstellungselemente der Webseite für den Top Fold gezeichnet, dann wird für den Messwert des “First Meaningful Paint” gestoppt.
  • Auch der FMP ist ein bedeutender Schritt für die User Experience. Wird der Top Fold komplett dargestellt, denkt der Nutzer, die Seite wäre vollständig geladen. Während er die Informationen aufnimmt, kann die Seite im Hintergrund zuende laden.
  • Ein guter FMP-Wert kann daher aussagekräftiger sein als die Gesamtladezeit.

Time to Interactive (TTI)

  • Eine Webseite wird meist dann als vollständig geladen betrachtet, wenn alle Funktionalitäten zur Verfügung stehen und die Seite zur Eingabe bereit ist.
  • Um diesen “Time to Interactive” zu erreichen, müssen alle Funktionen (JavaScript) im Browser geladen werden.
  • Besteht ein deutlicher Abstand zwischen dem TTI und dem “First Meaningful Paint”, kann der positive Effekt des FMP verloren gehen.

Es gibt viele Tools, um den Page Speed für diese Messstationen zu messen. Wir stellen hier die beiden bekanntesten kurz vor:

Auf WebPageTest.org lässt sich die eigene Webseite eingeben und ein Ort, von dem aus getestet werden soll. Hier solltest Du einen Standort wählen, der so nah wie möglich bei Deiner Zielgruppe liegt.

Das Ergebnis zeigt viele Graphen und technische Details, die auf den ersten Blick verwirrend wirken können. Wichtig ist die obere Tabelle, die eine Gesamtladezeit, den “Time to First Byte” (als “First Byte”), den “First Contentful Paint” (als “Start Render”) und den “Time to Interactive” (als “First Interactive” bezeichnet) angibt.

PageSpeed Insights von Google bewertet die Ladezeit als Teil der User Experience. Hier musst Du zunächst nur die Domain Deines Shops eingeben, ehe Du zu einem “Score” zwischen 0 und 100 weitergeleitet wirst.

Wir empfehlen, diese Zahl erst einmal nicht weiter zu beachten und höchstens als Indiz zu sehen. PageSpeed Insights bietet die Möglichkeit, bei den Werten zwischen Mobil und Desktop zu unterscheiden. Die Werte für Desktop dürften dabei ähnlich zu denen auf WebPageTest.org sein.

Unter den “Labdaten” zeigt das Tool die verschiedenen Messwerte. Wichtig sind hier der “First Contentful Paint” (“Erste Inhalte gezeichnet”) und der “First Meaningful Paint” (“Inhalte weitgehend gezeichnet”). Auch der “Time to Interactive” (“Zeit bis Interaktivität”) wird angegeben. Durch die farbliche, bzw. symbolische Kennzeichnung lässt sich sehen, ob ein Wert im Normbereich ist oder verbessert werden sollte.

Jetzt weißt Du, wie schnell Dein Shop lädt. Doch wie kann man ihn schneller machen?

Mit dem Analyzer von wao.io kannst Du checken, wo das Optimierungspotential Deines Shops liegt. Dabei wird zwischen Bildern, JavaScript, Schriftarten und Stylesheets unterschieden. Viele Shops haben besonders bei den Bildern Nachholbedarf.

Der Analyzer zeigt Dir an, wie wao.io Deinen Shop automatisiert beschleunigen kann. Du kannst die Analyse aber auch als Hinweisgeber für Deine eigene Optimierungsarbeit nutzen.

Zusammenfassung:

  1. TTFB: Der “Time to First Byte” misst die Antwortzeit des Servers.
  2. FCP: Der “First Contentful Paint” gibt an, wann der erste Inhalt zu sehen ist.
  3. FMP: Beim “First Meaningful Paint” ist der komplette Teil “Above the fold” sichtbar.
  4. TTI: Letzter Halt “Time to Interactive”, die Webseite ist nun zur Eingabe bereit.
  5. Mit WebPageTest.org und PageSpeed Insights kann Ladezeit gemessen werden.
  6. Mit dem Analyzer von wao.io kannst Du das Optimierungspotential Deines Shops checken

Du möchtest Dich weiter informieren? Im Ryte Magazine haben wir einen Artikel veröffentlicht, der das Thema dieses Posts noch detaillierter erläutert und bereits einige Lösungswege aufzeigt.