Langsame Interaktionen im Außendienst erkennen

Hier erfahren Sie, wie Sie in den Felddaten Ihrer Website nach langsamen Interaktionen suchen, um Verbesserungsmöglichkeiten für den Messwert „Interaction to Next Paint“ zu finden.

Jeremy Wagner

Felddaten geben Aufschluss darüber, wie echte Nutzer Ihre Website erleben. So lassen sich Probleme aufdecken, die sich nur mit Lab-Daten nicht finden lassen. Bei Interaction to Next Paint (INP) sind Felddaten unerlässlich, um langsame Interaktionen zu identifizieren und wichtige Hinweise zur Behebung zu erhalten.

In diesem Leitfaden erfahren Sie, wie Sie mithilfe von Felddaten aus dem Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX) schnell die INP Ihrer Website bewerten und feststellen können, ob es Probleme mit der INP gibt. Anschließend erfahren Sie, wie Sie die Attributionsversion der JavaScript-Bibliothek für Web Vitals und die neuen Statistiken der Long Animation Frames API (LoAF) verwenden, um Felddaten zu langsamen Interaktionen auf Ihrer Website zu erheben und zu interpretieren.

Mit CrUX die INP Ihrer Website bewerten

Wenn Sie keine Felddaten von den Nutzern Ihrer Website erheben, ist CrUX ein guter Ausgangspunkt. CrUX erfasst Felddaten von echten Chrome-Nutzern, die das Senden von Telemetriedaten aktiviert haben.

CrUX-Daten werden in einer Reihe verschiedener Bereiche angezeigt. Das hängt davon ab, nach welchen Informationen Sie suchen. CrUX kann Daten zu INP und anderen Core Web Vitals für Folgendes bereitstellen:

  • Mit PageSpeed Insights können Sie einzelne Seiten und ganze Ursprünge analysieren.
  • Seitentypen Viele E-Commerce-Websites haben beispielsweise die Typen „Produktdetailseite“ und „Produktlistenseite“. CrUX-Daten für eindeutige Seitentypen finden Sie in der Search Console.

Geben Sie als Ausgangspunkt die URL Ihrer Website in PageSpeed Insights ein. Nachdem Sie die URL eingegeben haben, werden Felddaten für diese URL (sofern verfügbar) für mehrere Messwerte angezeigt, einschließlich „In der Nähe von“. Mit den Ein-/Aus-Schaltflächen können Sie auch die INP-Werte für Dimensionen für Mobilgeräte und Computer prüfen.

Felddaten, die von CrUX in PageSpeed Insights angezeigt werden, mit LCP, INP und CLS als die drei Core Web Vitals sowie TTFB und FCP als Diagnosemesswerte und FID als eingestellter Core Web Vitals-Messwert.
Eine Aufschlüsselung der CrUX-Daten in PageSpeed Insights. In diesem Beispiel muss die INP der angegebenen Webseite verbessert werden.

Diese Daten sind nützlich, da Sie so erkennen können, ob ein Problem vorliegt. CrUX kann Ihnen jedoch nicht sagen, was die Probleme verursacht. Es gibt viele Lösungen für das Echtzeit-Nutzermonitoring (Real User Monitoring, RUM), mit denen Sie eigene Felddaten von den Nutzern Ihrer Website erheben können, um diese Frage zu beantworten. Eine Möglichkeit besteht darin, diese Felddaten selbst mit der JavaScript-Bibliothek für Web Vitals zu erheben.

Felddaten mit der JavaScript-Bibliothek web-vitals erfassen

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

Unterstützte Browser

  • Chrome: 96.
  • Edge: 96.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Mit der Standardversion der Web Vitals-Bibliothek können Sie grundlegende INP-Daten von Nutzern in der Praxis abrufen:

import {onINP} from 'web-vitals';

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

Damit Sie die Felddaten Ihrer Nutzer analysieren können, müssen Sie diese Daten an eine bestimmte Stelle 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 Ihnen jedoch nicht viel mehr als CrUX. Hier kommt die Attributionsfunktion der Web Vitals-Bibliothek ins Spiel.

Mehr Möglichkeiten mit der Attributionsfunktion der Web Vitals-Bibliothek

Die Attributionsfunktion der Web Vitals-Bibliothek liefert zusätzliche Daten, die Sie von Nutzern in der Praxis erhalten können. So können Sie Probleme mit Interaktionen, die sich auf die INP Ihrer Website auswirken, besser beheben. 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
});
Darstellung von Konsolenprotokollen aus der Web Vitals-Bibliothek In der Console in diesem Beispiel sind der Name des Messwerts (INP), der INP-Wert (56), die Angabe, dass der Wert innerhalb der INP-Grenzwerte liegt (gut), und die verschiedenen Informationen im Attributionsobjekt zu sehen, einschließlich Einträgen aus der Long Animation Frames API.
So werden Daten aus der Web Vitals-Bibliothek in der Console angezeigt.

Neben dem INP der Seite selbst enthält die Attributionsaufschlüsselung viele Daten, mit denen Sie die Gründe für langsame Interaktionen besser nachvollziehen können. So können Sie beispielsweise besser nachvollziehen, auf welchen Teil der Interaktion Sie sich konzentrieren sollten. So lassen sich wichtige Fragen beantworten, darunter:

  • „Hat der Nutzer während des Ladevorgangs mit der Seite interagiert?“
  • „Haben die Event-Handler der Interaktion lange gedauert?“
  • „Wurde der Code des Interaktionsereignis-Handlers verzögert gestartet? Wenn ja, was passierte zu diesem Zeitpunkt sonst noch im Hauptthread?“
  • „Hat die Interaktion viel Rendering-Arbeit verursacht, was die Darstellung des nächsten Frames verzögert hat?“

In der folgenden Tabelle sind einige der grundlegenden Attributionsdaten aufgeführt, die Sie in der Bibliothek abrufen können. Anhand dieser Daten können Sie die Ursachen für langsame Interaktionen auf Ihrer Website grob ermitteln:

attribution-Objektschlüssel Daten
interactionTarget Ein CSS-Selektor, der auf das Element verweist, das den INP-Wert der Seite generiert hat, z. B. button#save.
interactionType Der Interaktionstyp, z. B. Klicks, Tippen oder Tastatureingaben.
inputDelay* Die Eingabeverzögerung der Interaktion.
processingDuration* Die Zeitspanne zwischen dem Start des ersten Ereignislisteners als Reaktion auf die Nutzerinteraktion und dem Abschluss der Verarbeitung aller Ereignislistener.
presentationDelay* Die Darstellungsverzögerung der Interaktion, die vom Ende der Ereignishandler bis zum Zeichnen des nächsten Frames vergeht.
longAnimationFrameEntries* Einträge aus dem LoAF, die mit der Interaktion verknüpft sind. Weitere Informationen finden Sie im nächsten Abschnitt.
*Neu in Version 4

Ab Version 4 der Web Vitals-Bibliothek erhalten Sie mit den Daten zur Aufschlüsselung der INP-Phase (Eingabeverzögerung, Verarbeitungsdauer und Präsentationsverzögerung) und der Long Animation Frames API (LoAF) noch detailliertere Informationen zu problematischen Interaktionen.

Long Animation Frames API (LoAF)

Unterstützte Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Das Beheben von Interaktionsproblemen mithilfe von Felddaten ist eine Herausforderung. Mit Daten aus LoAF können Sie jedoch jetzt besser nachvollziehen, was die Ursache für langsame Interaktionen ist. LoAF bietet eine Reihe detaillierter Zeitangaben und anderer Daten, mit denen Sie die genauen Ursachen ermitteln können – und vor allem, wo sich die Ursache des Problems im Code Ihrer Website befindet.

Die Attributionsversion der Web Vitals-Bibliothek stellt ein Array von LoAF-Einträgen unter dem Schlüssel longAnimationFrameEntries des attribution-Objekts bereit. In der folgenden Tabelle sind einige wichtige Daten aufgeführt, die Sie in jedem LoAF-Eintrag finden:

LoAF-Eintragsobjektschlüssel Daten
duration Die Dauer des Long-Animation-Frames bis zum Ende des Layouts, ausgenommen Malen und Compositing.
blockingDuration Die Gesamtzeit im Frame, in der der Browser aufgrund langer Aufgaben nicht schnell reagieren konnte. Diese Blockierungszeit kann lange Aufgaben umfassen, bei denen JavaScript ausgeführt wird, sowie alle nachfolgenden langen Rendering-Aufgaben im Frame.
firstUIEventTimestamp Der Zeitstempel, zu dem das Ereignis während des Frames in die Warteschlange gestellt wurde. Hilfreich, um den Beginn der Eingabeverzögerung einer Interaktion zu ermitteln.
startTime Der Startzeitstempel des Frames.
renderStart Wann das Rendering des Frames begonnen hat. Dazu gehören alle requestAnimationFrame-Callbacks (und gegebenenfalls ResizeObserver-Callbacks), aber möglicherweise vor Beginn der Stil-/Layoutarbeiten.
styleAndLayoutStart Wenn Stil-/Layoutänderungen im Frame vorgenommen werden. Kann nützlich sein, um die Länge der Stil-/Layoutarbeit zu ermitteln, wenn andere verfügbare Zeitstempel berücksichtigt werden.
scripts Ein Array mit Elementen, die Informationen zur Script-Attribution enthalten, die zum INP der Seite beitragen.
Eine Visualisierung eines Long Animation Frame gemäß dem LoAF-Modell.
Ein Diagramm der Zeitangaben für einen langen Animationsframe gemäß der LoAF API (ohne blockingDuration).

Anhand dieser Informationen können Sie viel darüber erfahren, was eine Interaktion verlangsamt. Das scripts-Array, das in LoAF-Einträgen angezeigt wird, sollte jedoch von besonderem Interesse sein:

Schlüssel des Script-Attributionsobjekts Daten
invoker Der Aufrufer. Das kann je nach Aufrufertyp variieren, der in der nächsten Zeile beschrieben wird. Beispiele für Auslöser sind Werte wie 'IMG#id.onload', 'Window.requestAnimationFrame' oder 'Response.json.then'.
invokerType Der Typ des Aufrufers. Kann 'user-callback', 'event-listener', 'resolve-promise', 'reject-promise', 'classic-script' oder 'module-script' sein.
sourceURL Die URL zum Script, aus dem der lange Animationsframe stammt.
sourceCharPosition Die Zeichenposition im Script, die durch sourceURL gekennzeichnet ist.
sourceFunctionName Der Name der Funktion im identifizierten Script.

Jeder Eintrag in diesem Array enthält die in dieser Tabelle aufgeführten Daten. Sie enthalten Informationen zum Script, das für die langsame Interaktion verantwortlich war, und dazu, wie es dazu beigetragen hat.

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

Um Ihnen eine Vorstellung davon zu vermitteln, wie Sie diese Informationen verwenden können, wird in diesem Leitfaden erläutert, wie Sie mithilfe von LoAF-Daten in der web-vitals-Bibliothek einige Ursachen für langsame Interaktionen ermitteln können.

Lange Verarbeitungsdauer

Die Verarbeitungsdauer einer Interaktion ist die Zeit, die vergeht, bis die registrierten Ereignis-Handler-Callbacks der Interaktion vollständig ausgeführt wurden. Dazu gehört auch alles, was dazwischen passiert. Die Web Vitals-Bibliothek zeigt lange Verarbeitungszeiten an:

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

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

Es ist naheliegend, anzunehmen, dass die Hauptursache für eine langsame Interaktion darin besteht, dass der Code des Ereignishandlers zu lange gedauert hat. Das ist aber nicht immer der Fall. Sobald Sie bestätigt haben, dass dies das Problem ist, können Sie mit LoAF-Daten genauer nachsehen:

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 die genaue Ursache für eine Interaktion mit einer langen Verarbeitungsdauer ermitteln, z. B.:

  • Das Element und sein registrierter Ereignis-Listener.
  • Die Scriptdatei und die Zeichenposition darin, die den Code des lang laufenden Ereignis-Handlers enthält.
  • Der Name der Funktion.

Diese Art von Daten ist von unschätzbarem Wert. Sie müssen nicht mehr mühsam herausfinden, welche Interaktion oder welcher Ereignishandler für lange Verarbeitungsdauern verantwortlich ist. Da Drittanbieter-Scripts oft ihre eigenen Ereignishandler registrieren können, können Sie auch feststellen, ob Ihr Code dafür verantwortlich ist. Für den Code, über den Sie die Kontrolle haben, sollten Sie sich mit der Optimierung langer Aufgaben befassen.

Lange Eingabeverzögerungen

Langlaufende Event-Handler sind zwar üblich, aber es gibt noch andere Aspekte der Interaktion, die Sie berücksichtigen sollten. Ein Teil tritt vor der Verarbeitungsdauer auf und wird als Eingabeverzögerung bezeichnet. Das ist die Zeitspanne zwischen dem Starten der Interaktion durch den Nutzer und dem Zeitpunkt, zu dem die Rückrufe des Ereignishandlers ausgeführt werden. Dies geschieht, wenn der Hauptthread bereits eine andere Aufgabe verarbeitet. Mit der Attributionsfunktion der Web Vitals-Bibliothek können Sie die Länge der Eingabeverzögerung für eine Interaktion ermitteln:

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

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

Wenn Sie feststellen, dass einige Interaktionen lange Eingabeverzögerungen haben, müssen Sie herausfinden, was zum Zeitpunkt der Interaktion auf der Seite passiert ist, was zu der langen Eingabeverzögerung geführt hat. Das hängt oft davon ab, ob die Interaktion während des Ladens der Seite oder danach stattgefunden hat.

Tritt das Problem beim Laden der Seite auf?

Der Hauptthread ist beim Laden einer Seite oft am stärksten ausgelastet. Während dieser Zeit werden alle möglichen Aufgaben in die Warteschlange gestellt und verarbeitet. Wenn der Nutzer versucht, während dieser Arbeit mit der Seite zu interagieren, kann sich die Interaktion verzögern. Seiten, auf denen viel JavaScript geladen wird, können die Kompilierung und Auswertung von Scripts sowie die Ausführung von Funktionen auslösen, die eine Seite für Nutzerinteraktionen vorbereiten. Diese Arbeit kann störend sein, wenn der Nutzer zufällig interagiert, während diese Aktivität stattfindet. Sie können herausfinden, ob dies bei den Nutzern Ihrer Website der Fall ist:

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 im Feld erfassen und hohe Eingabeverzögerungen und Aufrufertypen von 'classic-script' oder 'module-script' sehen, lässt sich sagen, dass Scripts auf Ihrer Website sehr lange zum Auswerten brauchen und den Haupt-Thread so lange blockieren, dass Interaktionen verzögert werden. Sie können diese Blockierungszeit reduzieren, indem Sie Ihre Scripts in kleinere Bundles aufteilen, anfangs nicht verwendeten Code zu einem späteren Zeitpunkt laden und Ihre Website auf nicht verwendeten Code prüfen, den Sie vollständig entfernen können.

War es nach dem Laden der Seite?

Eingabeverzögerungen treten zwar häufig beim Laden einer Seite auf, aber es ist genauso möglich, dass sie nach dem Laden einer Seite auftreten, und zwar aus einer ganz anderen Ursache. Häufige Ursachen für Eingabeverzögerungen nach dem Laden der Seite sind Code, der aufgrund eines früheren setInterval-Aufrufs regelmäßig ausgeführt wird, oder sogar Ereignis-Callbacks, die für eine frühere Ausführung in die Warteschlange gestellt wurden 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 bei hohen Verarbeitungsdauerwerten erhalten Sie bei hohen Eingabeverzögerungen aufgrund der oben genannten Ursachen detaillierte Script-Attributionsdaten. Der Aufrufertyp ändert sich jedoch je nach Art der Arbeit, die die Interaktion verzögert hat:

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

Die Daten zur Scriptzuordnung geben Ihnen in jedem Fall einen Hinweis darauf, wo Sie suchen müssen und ob die Eingabeverzögerung auf Ihren eigenen Code oder den eines Drittanbieter-Scripts zurückzuführen ist.

Lange Verzögerungen bei der Präsentation

Präsentationsverzögerungen sind die letzte Phase einer Interaktion. Sie beginnen, wenn die Ereignishandler der Interaktion abgeschlossen sind, und enden, wenn der nächste Frame gerendert wurde. Sie treten auf, wenn die Arbeit in einem Ereignishandler aufgrund einer Interaktion den visuellen Zustand der Benutzeroberfläche ändert. Wie bei Verarbeitungsdauern und Eingabeverzögerungen können Sie mit der Web Vitals-Bibliothek auch sehen, wie lang die Präsentationsverzögerung für eine Interaktion war:

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

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

Wenn Sie diese Daten erfassen und hohe Präsentationsverzögerungen für Interaktionen feststellen, die zum INP Ihrer Website beitragen, kann das verschiedene Ursachen haben. Hier sind einige, auf die Sie achten sollten.

Teure Stil- und Layoutarbeiten

Lange Präsentationsverzögerungen können auf kostspielige Stilneuberechnungen und Layoutarbeiten zurückzuführen sein, die aus einer Reihe von Gründen entstehen, einschließlich komplexer CSS-Selektoren und großer DOM-Größen. Sie können die Dauer dieser Arbeit mit den LoAF-Zeiten 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 gibt nicht an, wie lange die Stil- und Layoutarbeit für einen Frame gedauert hat, aber es wird angezeigt, wann sie begonnen hat. Anhand dieses Startzeitstempels können Sie mit anderen Daten aus LoAF die genaue Dauer dieser Arbeit berechnen, indem Sie die Endzeit des Frames ermitteln und davon den Startzeitstempel der Stil- und Layoutarbeit abziehen.

Lang andauernde requestAnimationFrame-Callbacks

Eine mögliche Ursache für lange Präsentationsverzögerungen ist zu viel Arbeit in einem requestAnimationFrame-Callback. Der Inhalt dieses Callbacks wird ausgeführt, nachdem die Ausführung der Ereignis-Handler abgeschlossen ist, aber kurz vor der Neuberechnung des Stils und der Layoutarbeit.

Diese Rückrufe können viel Zeit in Anspruch nehmen, wenn die darin ausgeführten Aufgaben komplex sind. Wenn Sie vermuten, dass hohe Werte für die Präsentationsverzögerung auf Ihre Arbeit mit requestAnimationFrame zurückzuführen sind, können Sie LoAF-Daten verwenden, die von der Web Vitals-Bibliothek bereitgestellt werden, um diese Szenarien zu identifizieren:

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 ein erheblicher Teil der Präsentationsverzögerung auf einen requestAnimationFrame-Callback zurückzuführen ist, sollten Sie in diesen Callbacks nur Aufgaben ausführen, die zu einer tatsächlichen Aktualisierung der Benutzeroberfläche führen. Alle anderen Arbeiten, die das DOM nicht betreffen oder Stile nicht aktualisieren, verzögern unnötig das Zeichnen des nächsten Frames. Seien Sie also vorsichtig!

Fazit

Felddaten sind die beste Informationsquelle, wenn es darum geht, herauszufinden, welche Interaktionen für echte Nutzer in der Praxis problematisch sind. Wenn Sie Tools zur Erhebung von Felddaten wie die JavaScript-Bibliothek für Web Vitals (oder einen RUM-Anbieter) verwenden, können Sie mit größerer Sicherheit feststellen, welche Interaktionen am problematischsten sind. Anschließend können Sie problematische Interaktionen im Lab reproduzieren und beheben.

Hero-Image von Unsplash, von Federico Respini.