Langsame Interaktionen im Außendienst erkennen

Erfahren Sie, wie Sie langsame Interaktionen in den Felddaten Ihrer Website finden, um Möglichkeiten zur Verbesserung der Interaktion mit Next Paint zu finden.

Jeremy Wagner

Felddaten sind Daten, die Aufschluss darüber geben, wie tatsächliche Nutzer Ihre Website erleben. Darin werden Probleme aufgezeigt, die in Labdaten allein nicht zu finden sind. Wenn es um Interaction to Next Paint (INP) geht, sind Felddaten wichtig, um langsame Interaktionen zu erkennen, und liefern wichtige Hinweise, um sie zu beheben.

In diesem Leitfaden erfahren Sie, wie Sie den INP-Wert Ihrer Website mithilfe von Felddaten aus dem Chrome User Experience Report (CrUX) schnell bewerten und so feststellen können, ob auf Ihrer Website Probleme mit INP auftreten. Anschließend erfahren Sie, wie Sie mit dem Attributions-Build der Web-Vitals-JavaScript-Bibliothek und den neuen Erkenntnissen, die sie aus der Long Animation Frames API (LoAF) liefert, Felddaten für langsame Interaktionen auf Ihrer Website erfassen und interpretieren.

Mit CrUX beginnen, um den INP Ihrer Website zu bewerten

Wenn Sie keine Felddaten von den Nutzern Ihrer Website erfassen, ist CrUX ein guter Ausgangspunkt. CrUX erfasst Felddaten von echten Chrome-Nutzern, die sich damit einverstanden erklärt haben, Telemetriedaten zu senden.

CrUX-Daten kommen in einer Reihe verschiedener Bereiche vor und hängen vom Umfang der gesuchten Informationen ab. CrUX kann Daten zu INP und anderen Core Web Vitals für Folgendes bereitstellen:

• Einzelne Seiten und ganze Ursprünge mit PageSpeed Insights
• Seitentypen Beispielsweise haben viele E-Commerce-Websites die Typen „Produktdetails-Seite“ und „Produkteintragsseite“. Sie können die CrUX-Daten für einzelne Seitentypen in der Search Console abrufen.

Als Ausgangspunkt können Sie die URL Ihrer Website in PageSpeed Insights eingeben. Sobald Sie die URL eingegeben haben, werden entsprechende Felddaten für mehrere Messwerte, einschließlich INP, angezeigt, sofern verfügbar. Mithilfe der Ein-/Aus-Schaltflächen lassen sich die INP-Werte für die Dimensionen für Mobilgeräte und Computer überprüfen.

</ph> <ph type="x-smartling-placeholder">

Diese Daten sind nützlich, weil sie Ihnen sagen, ob Sie ein Problem haben. Mit CrUX können Sie jedoch nicht ermitteln, was die Probleme verursacht. Es gibt viele RUM-Lösungen (Real User Monitoring), mit denen Sie Ihre eigenen Felddaten von den Nutzern Ihrer Website erheben können, um dies zu beantworten. Eine Möglichkeit besteht darin, diese Felddaten mithilfe der Webvitals-JavaScript-Bibliothek selbst zu erfassen.

Felddaten mit der JavaScript-Bibliothek von web-vitals erfassen

Die web-vitals-JavaScript-Bibliothek ist ein Script, das Sie auf Ihrer Website laden können, um Felddaten von Ihren Websitenutzern zu erfassen. Sie können damit eine Reihe von Messwerten erfassen, einschließlich INP in Browsern, die ihn unterstützen.

Mit der Standardversion der Web Vitals-Bibliothek können grundlegende INP-Daten von Nutzern vor Ort abgerufen werden:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

Wenn Sie die Felddaten Ihrer Nutzer analysieren möchten, sollten Sie diese Daten an folgende Adresse senden:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

Diese Daten allein sagen jedoch nicht viel mehr aus als CrUX. Hier kommt die Attribution der Web Vitals-Bibliothek ins Spiel.

Mit Attributions-Builds der Web Vitals-Bibliothek noch einen Schritt weiter

Durch die Attribution der Web Vitals-Bibliothek erhalten Sie zusätzliche Daten von Nutzern vor Ort, die Sie bei der Behebung problematischer Interaktionen unterstützen, die sich auf den INP Ihrer Website auswirken. Auf diese Daten kann über das attribution-Objekt zugegriffen werden, das in der onINP()-Methode der Bibliothek angezeigt wird:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});

</ph>

Zusätzlich zum INP der Seite selbst bietet die Attribution eine Vielzahl von Daten, die Sie verwenden können, um die Gründe für langsame Interaktionen zu verstehen. Dazu gehört auch, auf welchen Teil der Interaktion Sie sich konzentrieren sollten. Sie können damit wichtige Fragen beantworten, wie zum Beispiel:

• „Hat der Nutzer mit der Seite interagiert, während sie geladen wurde?“
• „Wurden die Event-Handler der Interaktion lange gelaufen?“
• „Wurde der Start des Interaktions-Event-Handler-Codes verzögert? Wenn ja, was war damals sonst noch im Hauptthread los?“
• „Hat die Interaktion viel Rendering verursacht, wodurch die Darstellung des nächsten Frames verzögert wurde?“

Die folgende Tabelle enthält einige der grundlegenden Attributionsdaten, die Sie aus der Bibliothek abrufen können. Anhand dieser Daten können Sie einige allgemeine Ursachen für langsame Interaktionen auf Ihrer Website ermitteln:

Ab Version 4 der Web Vitals-Bibliothek erhalten Sie über die von der API bereitgestellten Daten mit INP-Phasenaufschlüsselungen (Eingabeverzögerung, Verarbeitungsdauer und Präsentationsverzögerung) und der Long Animation Frames API (LoAF) noch tiefere Einblicke in problematische Interaktionen.

Die Long Animation Frames API (LoAF)

Die Fehlerbehebung von Interaktionen mithilfe von Felddaten ist eine schwierige Aufgabe. Mit Daten aus LoAF ist es jedoch jetzt möglich, einen besseren Einblick in die Ursachen langsamer Interaktionen zu erhalten, da LoAF eine Reihe detaillierter Zeitangaben und andere Daten zur Verfügung stellt, mit denen Sie präzise Ursachen bestimmen können – und, noch wichtiger, die Ursache des Problems im Code Ihrer Website.

Der Attributions-Build der Webvitals-Bibliothek stellt eine Reihe von LoAF-Einträgen unter dem Schlüssel longAnimationFrameEntries des attribution-Objekts bereit. In der folgenden Tabelle sind einige wichtige Datenelemente aufgeführt, die Sie in jedem LoAF-Eintrag finden:

</ph> <ph type="x-smartling-placeholder">

All diese Informationen können Ihnen eine Menge darüber verraten, warum eine Interaktion langsam ist. Besonders interessant ist jedoch das Array scripts, das von LoAF-Einträgen angezeigt wird:

Jeder Eintrag in diesem Array enthält die in dieser Tabelle angezeigten Daten. So erhalten Sie Informationen über das Skript, das für die langsame Interaktion verantwortlich war, und wie diese verantwortlich war.

Häufige Ursachen für langsame Interaktionen messen und identifizieren

In diesem Leitfaden erfahren Sie, wie Sie die in der web-vitals-Bibliothek angezeigten LoAF-Daten nutzen können, um einige Ursachen für langsame Interaktionen zu ermitteln.

Lange Verarbeitungszeiten

Die Verarbeitungsdauer einer Interaktion ist die Zeit, die benötigt wird, bis die registrierten Event-Handler-Callbacks der Interaktion vollständig ausgeführt werden, sowie alles andere, was dazwischen passiert. Lange Verarbeitungszeiten werden in der Web Vitals-Bibliothek angezeigt:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

Es ist ganz normal, anzunehmen, dass die Hauptursache für eine langsame Interaktion darin besteht, dass die Ausführung Ihres Ereignis-Handler-Codes zu lange gedauert hat. Dies ist jedoch nicht immer der Fall. Sobald Sie bestätigt haben, dass dies das Problem ist, können Sie die LoAF-Daten genauer untersuchen:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Wie Sie im vorherigen Code-Snippet sehen können, können Sie mit LoAF-Daten arbeiten, um die genaue Ursache einer Interaktion mit hohen Werten für die Verarbeitungsdauer zu ermitteln. Dazu gehören:

• Das Element und sein registrierter Ereignis-Listener.
• Die Skriptdatei – und die darin enthaltene Zeichenposition – mit dem Ereignis-Handler-Code mit langer Ausführungszeit
• Der Name der Funktion.

Diese Art von Daten ist von unschätzbarem Wert. Sie müssen nicht mehr mühsam herausfinden, welche Interaktion oder welche ihrer Event-Handler für hohe Werte für die Verarbeitungsdauer verantwortlich waren. Da Skripte von Drittanbietern häufig ihre eigenen Event-Handler registrieren können, können Sie außerdem feststellen, ob Ihr Code dafür verantwortlich war oder nicht. Wenn Sie den Code steuern möchten, sollten Sie sich über die Optimierung langer Aufgaben informieren.

Lange Eingabeverzögerungen

Während Ereignis-Handler mit langer Ausführungszeit üblich sind, gibt es andere Teile der Interaktion, die berücksichtigt werden sollten. Ein Teil erfolgt vor der Verarbeitungsdauer, die als Eingabeverzögerung bezeichnet wird. Dies ist die Zeit von der Initiierung der Interaktion durch den Nutzer bis zu dem Moment, in dem die Ereignis-Handler-Callbacks ausgeführt werden. Dies geschieht, wenn der Hauptthread bereits eine andere Aufgabe verarbeitet. Die Attributionserstellung der Web Vitals-Bibliothek gibt Aufschluss über die Länge der Eingabeverzögerung für eine Interaktion:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

Wenn Sie feststellen, dass einige Interaktionen hohe Eingabeverzögerungen aufweisen, müssen Sie herausfinden, was zum Zeitpunkt der Interaktion auf der Seite geschah, die die lange Eingabeverzögerung verursacht hat. Das hängt oft davon ab, ob die Interaktion beim Laden der Seite oder danach erfolgte.

War es beim Seitenaufbau?

Der Hauptthread ist oft am stärksten besucht, wenn eine Seite geladen wird. Während dieser Zeit werden alle möglichen Aufgaben in die Warteschlange gestellt und verarbeitet. Wenn der Nutzer versucht, währenddessen mit der Seite zu interagieren, kann dies die Interaktion verzögern. Bei Seiten, auf denen viel JavaScript geladen wird, können Skripts kompiliert und ausgewertet sowie Funktionen ausgeführt werden, die eine Seite für Nutzerinteraktionen vorbereiten. Diese Arbeit kann ein Problem für die Nutzenden haben, wenn diese Aktivität stattfindet, und Sie können herausfinden, ob das auf die Nutzenden Ihrer Website zutrifft:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

Wenn Sie diese Daten vor Ort erfassen und Sie hohe Eingabeverzögerungen und Aufrufer-Typen wie 'classic-script' oder 'module-script' sehen, ist es mit Ordnung zu sagen, dass die Auswertung von Skripts auf Ihrer Website sehr lange dauert und den Hauptthread so lange blockieren, dass Interaktionen verzögert werden. Sie können diese Blockierungszeit reduzieren, indem Sie Ihre Skripts in kleinere Bundles aufteilen, anfangs nicht verwendeten Code aufschieben und zu einem späteren Zeitpunkt laden. Außerdem können Sie Ihre Website auf nicht verwendeten Code prüfen, den Sie vollständig entfernen können.

War es nach dem Laden der Seite?

Verzögerungen bei der Eingabe treten häufig während des Ladens einer Seite auf. Es ist aber auch möglich, dass sie aus einer ganz anderen Ursache nach dem Laden einer Seite auftreten. Häufige Ursachen für Verzögerungen bei der Eingabe nach dem Seitenaufbau können Code sein, der aufgrund eines früheren setInterval-Aufrufs in regelmäßigen Abständen ausgeführt wird, oder auch Ereignis-Callbacks, die zur Ausführung früher in die Warteschlange eingereiht und noch verarbeitet werden.

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Wie bei der Fehlerbehebung für hohe Werte für die Verarbeitungsdauer erhalten Sie durch hohe Eingabeverzögerungen aufgrund der oben genannten Ursachen detaillierte Skriptzuordnungsdaten. Der Unterschied besteht jedoch darin, dass sich der Aufrufertyp abhängig von der Art der Arbeit ändert, die die Interaktion verzögert hat:

• 'user-callback' gibt an, dass die blockierende Aufgabe von setInterval, setTimeout oder sogar requestAnimationFrame stammt.
• 'event-listener' gibt an, dass die blockierende Aufgabe aus einer früheren Eingabe stammt, die sich in der Warteschlange befand und noch verarbeitet wird.
• 'resolve-promise' und 'reject-promise' bedeuten, dass die Blockierungsaufgabe von einer asynchronen Aufgabe stammte, die zuvor gestartet und zu dem Zeitpunkt behoben oder abgelehnt wurde, als der Nutzer versuchte, mit der Seite zu interagieren, wodurch die Interaktion verzögert wurde.

In jedem Fall geben Ihnen die Skriptzuordnungsdaten eine Vorstellung davon, wo Sie mit der Prüfung beginnen sollten und ob die Eingabeverzögerung auf Ihren eigenen Code oder die eines Drittanbieter-Skripts zurückzuführen ist.

Lange Verzögerungen bei der Präsentation

Präsentationsverzögerungen sind die letzte Meile einer Interaktion und beginnen, wenn die Event-Handler der Interaktion bis zu dem Punkt abgeschlossen sind, an dem der nächste Frame dargestellt wurde. Sie treten auf, wenn die Arbeit in einem Ereignis-Handler aufgrund einer Interaktion den visuellen Zustand der Benutzeroberfläche ändert. Wie bei der Verarbeitungsdauer und Eingabeverzögerungen gibt Ihnen die Bibliothek „Web Vitals“ Aufschluss darüber, wie lange die Präsentationsverzögerung bei einer Interaktion dauerte:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

Wenn Sie diese Daten aufzeichnen und eine hohe Verzögerung bei der Präsentation von Interaktionen feststellen, die zum INP Ihrer Website beitragen, können die Ursachen variieren. Sie sollten jedoch auf einige Gründe achten.

Teure Stil- und Layoutarbeiten

Lange Verzögerungen bei der Präsentation können eine kostspielige Neuberechnung des Stils und Layout sein. Das kann verschiedene Ursachen haben, z. B. komplexe CSS-Selektoren und große DOM-Größen. Sie können die Dauer dieser Arbeit mit den LoAF-Timings messen, die in der Web Vitals-Bibliothek angezeigt werden:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

LoAF teilt Ihnen nicht die Dauer der Stil- und Layoutarbeit für einen Frame mit, sondern gibt an, wann sie begonnen hat. Mit diesem Startzeitstempel können Sie andere Daten aus dem LoAF verwenden, um eine genaue Dauer dieser Arbeit zu berechnen, indem Sie die Endzeit des Frames bestimmen und den Startzeitstempel des Stil- und Layout-Arbeit davon subtrahieren.

Lang andauernde requestAnimationFrame-Callbacks

Ein möglicher Grund für lange Verzögerungen bei der Präsentation ist übermäßige Arbeit in einem requestAnimationFrame-Callback. Der Inhalt dieses Callbacks wird ausgeführt, nachdem die Ereignis-Handler ausgeführt wurden, aber unmittelbar vor der Neuberechnung des Stils und der Layoutarbeit.

Die Ausführung dieser Callbacks kann viel Zeit in Anspruch nehmen, wenn die darin ausgeführte Arbeit komplex ist. Wenn Sie vermuten, dass hohe Werte für die Präsentationsverzögerung auf die Arbeit mit requestAnimationFrame zurückzuführen sind, können Sie die LoAF-Daten der Web Vitals-Bibliothek zur Identifizierung folgender Szenarien verwenden:

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Wenn Sie feststellen, dass ein erheblicher Teil der Präsentationsverzögerung in einem requestAnimationFrame-Callback aufgewendet wird, achten Sie darauf, dass sich die Arbeit in diesen Callbacks auf die Arbeit beschränkt, die zu einer tatsächlichen Aktualisierung der Benutzeroberfläche führt. Alle anderen Arbeiten, bei denen das DOM oder die Stile nicht aktualisiert werden, verzögern unnötigerweise die Darstellung des nächsten Frames. Seien Sie also vorsichtig!

Fazit

Felddaten sind die beste Informationsquelle, um zu verstehen, welche Interaktionen für die Nutzer vor Ort problematisch sind. Wenn Sie Tools zur Datenerfassung für Felder wie die JavaScript-Bibliothek „Web-Vitals“ (oder einen RUM-Anbieter) verwenden, können Sie besser einschätzen, welche Interaktionen am problematischsten sind. Sie können dann problematische Interaktionen im Lab reproduzieren und dann an ihrer Behebung arbeiten.

Hero-Image von Unsplash von Federico Respini