Ladezeiten regelmäßig messen: das Website-Performance-Monitoring-Tool Calibre

Dies ist der erste Artikel meines Autoren Simon Streich. Er hat sich das Tool Balibre intensiv angesehen und seine Erfahrungen und Erkenntnisse in diesem Artikel für Euch zusammengefasst.

TL:DR

  • Calibre ist ein Tool zur Messung der Website-Performance.
  • Es basiert auf Googles Lighthouse und ist in der Version 4.0 implementiert. Das heißt, neben dem Performance-Fokus liefert Calibre auch die Lighthouse-üblichen Tests „PWA“, „Best Practices“, „Accessibility“ und „SEO“.
  • Calibre kann automatisiert täglich, stündlich oder alle X Stunden testen. Die Uhrzeit ist dabei frei wählbar.
  • Es stehen weltweit 14 verschiedene Standorte zur Auswahl – darunter auch Frankfurt, Germany.
  • Via Command-Line kann auf die API zugegriffen werden.
  • Das selbst festgelegte Performance-Budget und ein E-Mail-Alert-System helfen die gesetzten Ziele im Auge zu behalten und sorgen dafür, dass schnell gehandelt werden kann, falls es Probleme mit der Ladezeit gibt.
  • Die Team-Funktion ermöglicht die Freigabe für weitere Nutzer, die am Projekt beteiligt sind. Hier können zwei verschiedene Berechtigungen festgelegt werden: Viewer und Admin.
  • Es wird für jeden Test ein Snapshot generiert. Dieser beinhaltet:
    • Video mit Timer (als MP4 exportierbar)
    • Zusammenfassung aller Metriken (siehe Bild unten)
    • Rendering Timeline
    • Javascript-Timings nach Domain gruppiert
    • Dateigröße der einzelnen Inhaltstypen (HTML, CSS, Bilder etc.)
    • Liste aller abgefragten Ressourcen (als HAR exportierbar)
  • Verschiedene Test-Profile können angelegt werden. Folgende Eigenschaften sind frei kombinierbar:
    • 12 unterschiedliche Geräte (z. B. iPhone
    • 12 unterschiedliche Bandbreiten (z. B. 3G-Netz mit 768 Kbps Downstream)
  • Preismodule beginnen bei 29 USD im Monat (Starter) und enden bei mehr als 99 USD im Monat (Enterprise). Bei jährlicher statt monatlicher Abrechnung entsprechend günstiger.
  • Der Support reagiert nach meiner Erfahrung innerhalb von 24 Stunden.
  • Leider fehlen ein paar – aus meiner Sicht – wichtige Features. Mehr dazu im Artikel.

Vorwort: Warum das Ganze?

Mit der steigenden Nutzung von Smartphones und der damit verbundenen geringeren Bandbreite (beispielsweise durch Edge oder langsames 3G) wird das Thema „Website Ladezeit“ zu einem echten K.-o.-Kriterium.

Die alte Faustregel von 3 Sekunden GILT bis heute, ABER ist für viele Website-Betreiber nach wie vor ein unerreichbares Ziel.

Es gibt leider auch 2019 noch genügend Fälle, bei denen die Ladezeit der eigenen Website überhaupt niemanden im Unternehmen interessiert. Wer nicht regelmäßig die Perspektive wechselt und sich konkret mit seinen Kunden/Nutzern auseinandersetzt, verliert Themen wie dieses schnell aus den Augen. Dabei müsste man nur mal auf sein eigenes Nutzerverhalten achten: Die Frustration einer langen Ladezeit steigt bei uns allen im Millisekunden-Bereich. Je länger Nutzer warten müssen, desto höher ist die Wahrscheinlichkeit eines Bounces – und der Umsatz und/oder die Konversionen bleiben aus.

Wie bei der Suchmaschinenoptimierung ist die Optimierung der Website-Performance keine einmalige Sache. Der Maßnahmenkatalog ist lang und verläuft von Server-Infrastruktur über Themen wie Kompression oder Caching bis hin zu Frontend-Maßnahmen, wie zum Beispiel Optimierung des „Critical Rendering Path“. Meist ist es die Kombination unterschiedlicher Maßnahmen, die zum Erfolg führt.

Kostenlose Alternativen – die besten Gratis-Tools

Es gibt genügend kostenlose Tools, die hier erste Abhilfe leisten. Folgende Tools sollten zum Standardrepertoire eines jeden SEOs, POs oder Webmasters gehören:

Auch der Umgang mit den Chrome-DevTools und der Firefox-Toolbox sollte vertraut sein.

Für einmalige Analysen reichen diese Tools oft aus. Um die Auswirkungen einzelner Maßnahmen in einem größeren Projekt im Blick behalten zu können, müssen die Daten jedoch aufwendig aufbereitet und dokumentiert werden. Sobald regelmäßige und umfassende Checks der Ladezeit notwendig sind, kann das händische Prüfen der Ladezeiten sehr mühevoll werden. Lighthouse steht natürlich auch als Open Source zur Verfügung und kann auf dem eigenen Webserver aufgesetzt werden. Für all diejenigen, die die Ressourcen und/oder Kenntnisse nicht haben, gibt es diverse Anbieter, die Tools hierfür zur Verfügung stellen.

Warum genau Monitoring?

Klar, Monitoring-Tools kosten Geld – und häufig nicht gerade wenig. Ein weiteres Tool muss intern gerechtfertigt werden und belastet zusätzlich die eigene Kostenstelle. Und dann müssen ja mit den Daten auch noch tatsächliche Handlungsmaßnahmen abgeleitet werden können. Deshalb muss individuell entschieden werden, ob Monitoring sinnvoll ist und wo man ggf. auch darauf verzichten könnte.

Meine fünf Hauptgründe für Performance-Monitoring sind:

  1. Zeitersparnis: Natürlich kann ich die einzelnen URLs manuell mit kostenlosen Tools testen, es kostet mich aber schlichtweg weniger Zeit, wenn die Daten fertig aufbereitet im Tool liegen.
  2. Wirtschaftlichkeit: Im Fall von Calibre ist das Tool günstiger als der manuelle Aufwand. Meine Kunden bekommen dadurch mehr für ihr Geld!
  3. Benachrichtigungen: Einer der wichtigsten Gründe ist das Alerting. Sollte sich aufgrund von Änderungen an der Website die Ladezeit enorm verschlechtern, werde ich per E-Mail informiert und kann umgehend reagieren. Das kann Rankingprobleme verhindern ermöglicht es schnell zu reagieren!
  4. Art der Aufgaben: Wiederkehrende, stupide Arbeiten machen mich lethargisch.
  5. Konstante Test-Bedingungen: Tools wie Lighthouse werden lokal auf dem eigenen Gerät ausgeführt. Je nach Leistung der verbauten Hardware und der aktuellen Anbindung können die Ergebnisse stark variieren. Tool-Anbieter liefern hier eine neutrale und konstante Testumgebung.

Metriken zur Ladezeit-Messung

Über Metriken zur Ladezeitmessung könnte ich einen kompletten Artikel schreiben … Nur so viel: Früher wurden diverse Markierungen im Browser wie z. B. „DOM ready“ als Metrik verwendet. Das Problem an diesen Metriken ist, dass sie die Wahrnehmung der Nutzer nicht berücksichtigen und somit als Messinstrument nicht wirklich geeignet sind. Nutzerzentrierte Metriken bilden mittlerweile in modernen Tools das ab, was Nutzer tatsächlich selbst erleben, während sie eine Website aufrufen.

Bevor Tools eingerichtet und Reportings aufgesetzt werden, muss also gezwungenermaßen ein tieferes Verständnis der einzelnen Metriken aufgebaut werden. Das Konzept von „First Paint“, „First Meaningful Paint“, „First Contentful Paint“ oder „Time To Interactive“ sollte dabei grundsätzlich verstanden werden.

Eine kurze Erklärung der Begriffe:

  • First Paint: Das Allererste, was beim Laden einer Website zu sehen ist, beschreibt den First Paint. Häufig ist das ein Logo, der Wechsel der Hintergrundfarbe oder das Erscheinen der Navigation.
  • First Contentful Paint: Contentful meint hier „Text“, d. h. diese Metrik misst, wann der erste Text sichtbar wird.
  • First Meaningful Paint: Wenn der Hauptbestandteil der Seite geladen ist, wird diese Metrik ausgelöst. Auf einer Produktdetailseite eines Shops wären dies der Name oder die Beschreibung des jeweiligen Produkts. Dieser Wert hat allerdings etwas Interpretationsspielraum.
  • Time To Interactive: Diese Metrik hängt stark mit dem Ausführen von JavaScript zusammen. Da diese Operationen sehr rechenintensiv sind, ist der Prozessor (CPU) eines Gerätes (z. B. iPhone 8 ) hier entscheidend. „Interactive“ meint hier also die Zeit, bis der größte Teil des JavaScripts ausgeführt wurde und nun für kurze Zeit inaktiv ist, sodass der Nutzer mit der Website interagieren kann.

Je nach Art Eures Inhalts können unterschiedliche Metriken für Euch relevant sein. In der Praxis macht es Sinn, sich auf ein reduziertes Set von Metriken zu konzentrieren, da es sonst schwer wird, den Überblick zu behalten, und der nötige Aufwand sehr schnell unwirtschaftlich wird.

Testseiten und Profile

Als nächsten Schritt müssen nun die URLs und Seitentypen definiert werden, die getestet werden sollen, denn eine Kategorieseite weist zum Beispiel andere Charakteristika auf als eine Produktdetailseite. Häufig wird der Fehler gemacht, dass nur die Startseite getestet wird und alle anderen Seiten ignoriert werden. Da die anderen Seitenarten jedoch von unterschiedlichen Templates geladen werden, sollte man darauf achten, je Template mindestens eine URL zu testen.

Beispiel: Home, Kategorie XY, Produkt Z

Idealerweise verwendet man Testseiten, deren URLs möglichst lange unverändert bleiben, da die Testseite ansonsten angepasst oder durch eine andere Seite ersetzt werden muss. Das ist nur einer von vielen Gründen, warum eine konsistente URL-Struktur sehr wichtig ist.

Nun muss noch ein Profil in Calibre ausgewählt werden. Unter Profilen versteht man bei Calibre die einzelnen Geräte und deren Bandbreiten, die zur Verfügung stehen. Folgende Modelle kann Calibre simulieren: Motorola Moto G4, Nexus 5x, Nexus 6p, Galaxy S5, iPhone 5, 6, 6+, 7, 8 sowie das iPad und das iPad Pro.

Diese Modelle können jeweils mit entsprechenden Bandbreiten versehen werden. Von einem 2G-Netz mit 256 Kbps Downstream bis zum Kabel mit 40 Mbps kann hier fein eingestuft werden.

In unseren Tests werden jeweils zwei verschiedene Profile verwendet, einmal Chrome-Desktop mit Kabel und ein iPhone 8 mit regulärem 3G Netz.

Da das Pricing von der Anzahl der Tests abhängt, bietet es sich an dieser Stelle an, kurz über die Kosten des Tools zu sprechen.

Was kostet Calibre? Und wie wird abgerechnet?

Es gibt vier verschiedene Preismodelle für Calibre:

Hat man sich im Vorfeld Gedanken zum Test-Szenario gemacht, hilft das bei der Einschätzung für ein Preismodell.

Beispielrechnung: 2 Profile (Desktop mit Kabel + iPhone 8 mit 3G) * 3 Testseiten (Home + Kategorie + Produkt) * 31 Tage im Monat = 186 Tests pro Monat.

Im Power-Modul sind bis zu 5.000 Tests pro Monat möglich, das heißt es können noch weitere Profile oder Testseiten angelegt werden. Ebenfalls möglich ist es, Wettbewerber als separate Projekte hinzuzufügen. Bei 3 Wettbewerbern mit bspw. 5 statt 3 Testseiten sähe die Rechnung folgendermaßen aus:

2 Profile * 5 Testseiten * 31 Tage/Monat * 4 Projekte = 1.240 Tests pro Monat

Selbst bei diesem Beispiel wäre nicht einmal ein Viertel der verfügbaren 5.000 Tests aufgebraucht.

Zielsetzung bzw. Performance-Budget

Ohne Zielsetzung ist die Performance-Optimierung wie ein Blindflug. Ein Performance-Budget festlegen hilft dabei, sich konkrete Ziele zu stecken und sich diese regelmäßig vor Augen zu führen. Die Präsentation von Malte Landwehr auf der SEO/SEA World Conference kann an dieser Stelle wärmstens empfohlen werden (ab Folie 64 geht es um Performance). In seinem Beispiel wird folgendes Budget verwendet:

  • Critical-Path-Resources: 120 KB
  • First Contentful Paint: 2 s
  • Time To Interactive: 5 s
  • Lighthouse Performance Score: > 85

Damit Ihr eine Idee bekommt, wo die Reise hingehen soll, macht Euch ein Bild von Euren stärksten Wettbewerben. Ein Ziel könnte sein: „Wir werden schneller als unser stärkster Wettbewerber!“

Wenn Ihr Euch im Klaren über Eure Ziele seid, könnt Ihr diese entsprechend in Calibre eintragen. Für jede Metrik kann ein individuelles Budget festgelegt werden.

Leider werden die Budgets derzeit, also zu dem Zeitpunkt, als dieser Artikel geschrieben wurde, noch nicht in die entsprechenden Charts eingetragen, sodass nicht auf einen Blick erkennbar ist, wie weit man vom Ziel noch entfernt ist. Laut Rücksprache mit dem Hersteller soll dieses Feature jedoch bald folgen.

Tool-Übersicht – Look & Feel

Sind alle Projekte und Profile angelegt, beginnt Calibre die regelmäßige Messung der Seiten. Nachdem man sich eingeloggt hat, findet man folgende Übersicht vor:

Von hier aus kann man in die einzelnen Projekte einsteigen:

Oben in der groß dargestellten Breadcrumb (aktuell „Home“) kann zwischen den einzelnen Testseiten gewechselt werden. Durch „View snapshot #53“ kommt man auf den jeweils neuesten Test. Im weiteren Verlauf der Seite werden die Metriken nacheinander in einer Chart dargestellt. Hier kann im Zeitverlauf entweder 7 Tage und 30 Tage ausgewählt werden.

Oder man springt direkt in die entsprechende Metrik (hier: First Meaningful Paint auf der Home):

Unten auf der jeweiligen Metrik findet man das festzulegende bzw. festgelegte Budget.

Fazit und Empfehlung

Calibre bietet eine Menge Möglichkeiten, die eigene Performance oder die der Wettbewerber zu messen und zu monitoren. Das Tool ist übersichtlich aufgebaut und reagiert schnell, trotz der vielen Daten, die geladen werden müssen.

Das Preis-Leistungs-Verhältnis finde ich bislang unschlagbar, freue mich aber über Feedback oder Alternativen in den Kommentaren!

Seit der ersten Nutzung habe ich allerdings auch einige Feature-Requests eingereicht. Wichtig fände ich zum Beispiel, dass die eigene Performance mit der Performance der Wettbewerber visuell verglichen werden kann. Derzeit besteht nur die Möglichkeit, jede Domain als separates Projekt anzulegen und auch als solches zu betrachten. Ein Zusammenführen der Charts aus verschiedenen Projekten ist bislang nicht möglich. Auch die Visualisierung des festgelegten Budgets halte ich für wichtig. Die Charts können zwar als PNG-Datei direkt heruntergeladen werden, allerdings eben ohne Markierung des Budgets.

Alle Messdaten können als CSV exportiert werden. Da jedoch die Zeiträume für die Messpunkte variieren (hin und wieder werden 2 Tests pro Tag gemacht), verschiebt sich die komplette Tabelle. Leider ist es deshalb nicht so einfach möglich, die Daten der einzelnen Projekte gegeneinander zu legen. Das macht die komplette Exportfunktion derzeit leider nutzlos.

Nichtsdestotrotz ist das Tool derzeit aus meiner Sicht das einzige mit einem solch großen Umfang an Möglichkeiten und einem bislang unschlagbaren Preis-Leistungs-Verhältnis. Ich bin sehr auf die kommenden Features gespannt.

  • Simon Streich ist technischer SEO-Freelancer mit Sitz in Berlin. Er verbringt den Großteil seiner Arbeit mit strategischer Digital-Beratung von KMUs. Nach seinem Bachelor-Studium in Internationaler Medieninformatik and der Hochschule für Technik und Wirtschaft Berlin war er bei einer Meta-Suchmaschine für Jobs im Business Development tätig. Nach einem Jahr als Digital Marketing Specialist bei einer Münchner Digital-Unternehmensberatung wechselte Simon zur Burda Tochter BurdaForward GmbH und betreute dort als SEO Manager eine der sichtbarsten Seiten in Deutschland (CHIP Digital) im technischen SEO.

  • Show Comments (4)

4
Hinterlasse einen Kommentar

Gernot

Hallo Simon,

ist es denn sinnvoll ein Monitoring-Tool einzusetzen, welches 1. nicht mind. alle 5 Minuten die Erreichbarkeit prüft (besser wäre m. E. minütlich) und welches 2. keine Transaktionstests (Bestellungen) unterstützt? Aus E-Commerce Sicht erachte ich die Empfehlung als unglücklich, in einer Stunde kann Umsatz-technisch viel passieren.

VG
Gernot

Kai Spriestersbach

Hallo Gernot, ich glaube für diesen Zweck ist ein Uptime-Monitoring besser geeignet, dafür ist Lighthouse ja garnicht gedacht.
Es geht darum, in einem Optimierungsprojekt die Fortschritte, aber auch Veränderungen durch Releases und Updates feststellen zukönnen. NICHT um eine Echtzeit-Erreichbarkeits- oder Funktionsprüfung!

Gernot

Hallo Kai,
danke Dir für die schnelle Antwort. Du schreibst jedoch im Absatz der Hauptgründe folgendes: „Benachrichtigungen: Einer der wichtigsten Gründe ist das Alerting. Sollte sich aufgrund von Änderungen an der Website die Ladezeit enorm verschlechtern, werde ich per E-Mail informiert und kann umgehend reagieren. Das kann de facto Umsatzeinbrüche verhindern!“

Vielleicht wäre hier ein Hinweis auf ein Uptime-Monitoring angebracht. Wenn man es nicht als Uptime-Monitoring nutzt, macht der Einsatz dieses Tools absolut Sinn. Ich schaue es mir mal an.

Liebe Grüße
Gernot

Kai Spriestersbach

vielen Dank Gernot. zuerst einmal sei gesagt, dass dieser Artikel von meinem Autoren Simon stammt und nicht von mir. das habe ich nun ganz oben im Artikel kenntlich gemacht, die Autorenbox am Ende über sehen wohl die Menschen 🤔
die entsprechende Formulierung habe ich außerdem angepasst, da hast du absolut Recht, wobei auch eine deutlich verlangsamente Ladezeit Umsatzeinbuße bedeuten kann!