Zum Inhalt springen

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

Dies ist der erste Artikel meines Autoren Simon Streich. Er hat sich das Tool Calibre 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 8)
    • 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.

 

Update 18.06.2019

Calibre baut fleißig neue Features. Aus den Release Notes von April 2019 möchte ich einige wichtige Neuerungen erwähnen:

  1. Ad blocking: Mit diesem Feature lässt sich die eigene Seite so messen, als wäre ein Adblocker aktiv bzw. als wäre keine Werbung auf der Seite. Sicherlich ein interessantes Feature für alle Websites die hohe Performance-Einbußen aufgrund Ihrer Werbeblöcke haben.
  2. Deploy Tracking: Eigene Website-Deployments können von nun an direkt in die Charts eingetragen werden. Hierdurch können die Auswirkungen über die Änderungen an der eigenen Website optimal verfolgt werden.
  3. Lighthouse 5: Mit den April Updates wurde Lighthouse von der Version 4.3.1 auf die Version 5.0.0 aktualisiert. (Im Mai wurde direkt auf die neuste Version 5.1.0. aktualisiert). Durch das Update steht Calibre den Chrome Dev Tools und der Lighthouse Chrome Extension nun kein Stück mehr nach.

 

Beide Features, ad blocking und deploy tracking, können dank der neuen CLI-Version 2.0.0 direkt im Terminal verwendet werden. Ein neues Deployment kann beispielsweise durch folgenden Befehl eingetragen werden:

calibre site create-deploy \
--site=calibre \
--revision=7d9580a \
--repository=https://github.com/calibreapp/app \
--username=michael
Simon Streich
Letzte Artikel von Simon Streich (Alle anzeigen)

Weitere Beiträge:

×