Was sollten Sie messen, um die Leistung zu verbessern?

Strategien zur Messung der Leistung in jeder Phase des Kauftrichters

Die verschiedenen Schritte eines Kauftrichters können auf unterschiedliche Weise zu Leistungsproblemen führen und erfordern daher unterschiedliche Messungen und Optimierungen:

In diesem Leitfaden erfahren Sie, wie die verschiedenen Schritte gemessen werden. Sehen Sie sich dazu sowohl Lab- als auch Felddaten an.

Labdaten werden durch lokale Ausführung von Tests erfasst, beispielsweise mit Lighthouse und anderen Tools. Dadurch kann die Websiteleistung im Zeitverlauf und mit der von Mitbewerbern in einer kontrollierten, stabilen Umgebung verglichen werden. Sie ist jedoch möglicherweise nicht repräsentativ für die tatsächliche Leistung der Nutzer.

Felddaten werden durch Analysen von echten Nutzern gesammelt und spiegeln somit ihre Erfahrung wider. Er lässt sich jedoch nicht so einfach im Laufe der Zeit oder mit Mitbewerbern vergleichen. Netzwerkverbindungen und Smartphone-Hardware ändern sich im Laufe der Zeit und verschiedene Zielgruppen haben möglicherweise unterschiedliche Geräte, was Vergleiche mit Felddaten schwierig macht. Weitere Informationen finden Sie unter Leistung im Außendienst messen.

Für ein vollständiges Bild sind beide Datenquellen erforderlich. In den folgenden Abschnitten wird gezeigt, wie Sie Labor- und Felddaten für die verschiedenen relevanten Leistungsmarkierungen im Trichter erfassen.

Discovery-Kampagnen

Bei der Optimierung für die Auffindbarkeit geht es darum, die App für den ersten Ladevorgang zu optimieren. Das ist das Ergebnis, das neue Nutzer erhalten, aber auch die Crawler im Suchnetzwerk und in sozialen Netzwerken. Labdaten für einen ersten Ladevorgang können ganz einfach über Lighthouse abgerufen werden. Felddaten sind (zumindest für Chrome) über Chrome-UX-Berichte verfügbar. Eine praktische Kombination aus beiden finden Sie in PageSpeed Insights. Du solltest auch selbst relevante Messwerte aus der Praxis erfassen: Diese Messwerte auf den Geräten echter Nutzer zu messen bietet einen guten Überblick.

Aus Sicht der Nutzenden sind dies die wichtigsten Metriken:

• First Contentful Paint (FCP):Die Zeit, zu der der Nutzer einen leeren Bildschirm ansieht. Dies ist der Zeitpunkt, an dem die meisten Nutzer abspringen, da sie keinen Fortschritt sehen.
• First Meaningful Paint (FMP):Der Nutzer sieht den Hauptinhalt, nach dem er gesucht hat. Dies ist oft das Hero-Image. Bei einer Landingpage kann es sich aber auch um einen Call-to-Action wie die Schaltfläche Kaufen handeln, da der Nutzer möglicherweise mit einer klaren Absicht angekommen ist (z. B. durch eine zielgerichtete Werbekampagne).
• First Input Delay (FID):Die Zeit, die die Website auf die erste Eingabe des Nutzers reagieren muss. Das kann zu übermäßigen Problemen beim Laden von JavaScript und anderen Assets führen, was zu Fehlern beim Antippen oder Klicken, fehlerhaften Eingaben und Seitenabbrüchen führen kann.

Es gibt weitere Messwerte, die Sie sich ansehen können, aber diese sind eine gute Ausgangsbasis. Außerdem sollten Sie Absprungraten, Conversions und das Nutzer-Engagement erfassen, damit Sie diese in Relation setzen können.

Interaktion und Conversion

Nach dem ersten Laden einer Landingpage gelangt der Nutzer über Ihre Website und hoffentlich zu einer erfolgreichen Conversion.

In dieser Phase ist es wichtig, schnelle und reaktionsschnelle Navigationen und Interaktionen zu haben. Leider ist es nicht einfach, den gesamten Ablauf von Navigations- und Interaktionsereignissen zu messen, da jeder Nutzer auf der Seite andere Pfade verfolgt. Wir empfehlen daher, die Zeit zu messen, die für die Conversion- oder Conversion-Unterziele benötigt wird („Time-to-Action“), indem Sie Skripts erstellen und den Ablauf in einem Labortest messen. So können Sie die Leistung über einen längeren Zeitraum oder mit der von Mitbewerbern vergleichen.

Dafür gibt es zwei praktische Möglichkeiten:

WebPageTest

WebPageTest bietet eine sehr flexible Scripting-Lösung. Die Grundidee ist:

• Weisen Sie WebPageTest an, mit dem Befehl navigate durch die Seiten des Ablaufs zu navigieren.
• Bei Bedarf können Sie das Klicken auf Schaltflächen mit clickAndWait-Befehlen programmieren und Textfelder mit setValue ausfüllen. Verwenden Sie zum Testen von Single-Page-Anwendungen für alle nachfolgenden Schritte clickAndWait statt navigate-Befehle, da navigate anstelle des einfachen virtuellen Seitenaufbaus einen vollständigen Ladevorgang durchführt.
• Achten Sie darauf, die verschiedenen Schritte des Ablaufs in der Analyse über combineSteps zu kombinieren, um einen einzigen Gesamtergebnisbericht für den gesamten Ablauf zu erstellen.

Ein solches Skript könnte wie folgt aussehen:

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

Mit einem solchen Skript können Sie die Leistung im Zeitverlauf einfach messen und vergleichen. Dies kann sogar über die WebPageTest API automatisiert werden.

Puppenspieler

Eine weitere gute Option für Skripttests ist die Verwendung von Chrome ohne grafische Ausgabe, die mit Puppeteer der Node API gesteuert werden kann. Im Allgemeinen starten Sie den Browser über Puppeteer, rufen die Landingpage über die goto-Funktion auf, fügen JavaScript ein, um Felder auszufüllen, oder klicken auf Schaltflächen und durchlaufen den Trichter bei Bedarf durch weitere goto-Aufrufe.

Als Messwert kann die Dauer des Ablaufs direkt gemessen werden. Sie können aber auch die FCP-, FMP- oder TTI-Werte der einzelnen Ladevorgänge des Ablaufs zusammenfassen. Test der Website-Leistung mit Puppeteer bietet einen Überblick darüber, wie Leistungsmesswerte über Puppeteer abgerufen werden können. Ein sehr vereinfachtes Beispiel für ein Node-Skript könnte so aussehen:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

Dieses Skript lässt sich leicht automatisieren und sogar Teil des Build-Prozesses oder der Leistungsbudgets machen und regelmäßig überwachen.

Erneute Interaktion

Nutzer kehren in unterschiedlichen Zeitintervallen zu Ihrer Website zurück. Je nach vergangener Zeit werden im Browser möglicherweise weniger Websiteressourcen im Cache gespeichert, sodass mehr Netzwerkanfragen erforderlich sind. Dadurch ist es schwierig, Leistungsunterschiede bei wiederholten Besuchen in Labortests einzuschätzen. Sie sollten dies jedoch im Auge behalten. Ein hervorragendes Testtool für wiederholte Besuche ist WebPageTest, das eine spezielle Option für direkte wiederholte Besuche bietet:

Um ein besseres Gefühl für die Leistung wiederholter Besuche vor Ort zu erhalten, segmentieren Sie Ihre Leistungsmesswerte mit dem Analysepaket Ihrer Wahl nach Nutzertyp. Hier ein Beispiel für einen solchen Bericht in Google Analytics:

In einem Bericht wie diesem finden Sie auch Seitenladezeiten für neue und wiederkehrende Nutzer.

Zusammenfassung

In diesem Leitfaden wurde erläutert, wie Sie die erste und wiederholte Last mithilfe von Feld- und Labortests messen. Optimieren Sie die verschiedenen Schritte des Trichters entsprechend, um die Auffindbarkeit (erster Ladevorgang), die Interaktion (Navigation und Aufruf) und die erneute Interaktion (wiederholtes Laden) zu maximieren.