In Richtung eines Messwerts für flüssige Animation

Hier erfahren Sie mehr über das Messen von Animationen, über Animationsframes und über die Flüssigkeit der Seite insgesamt.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

Wahrscheinlich haben Sie Seiten, die „stagnieren“ oder „einfrieren“ beim Scrollen oder Animationen. Uns ist bewusst, dass diese Abläufe nicht reibungslos sind. Ziel Probleme dieser Art auftreten kann, hat das Chrome-Team daran gearbeitet, unserer Lab-Tools zur Animationserkennung an, sowie kontinuierliche Verbesserungen Rendering-Pipeline-Diagnose in Chromium hinzugefügt.

Wir möchten Ihnen die jüngsten Fortschritte vorstellen, konkrete Anleitungen für Tools geben und Ideen für zukünftige Messwerte zur flüssigen Animation diskutieren. Wie immer würden wir uns freuen, um dein Feedback anzuhören.

In diesem Post werden drei Hauptthemen behandelt:

• Kurzer Blick auf Animationen und Animationsframes
• Unsere aktuellen Gedanken zur Messung der Gesamtflüssigkeit der Animation.
• Hier sind einige praktische Vorschläge, die Sie in den aktuellen Lab-Tools umsetzen können.

Was sind Animationen?

Animationen erwecken deine Inhalte zum Leben! Indem Sie Inhalte bewegen, können Animationen dafür sorgen, dass sich die Nutzererfahrung natürlicher anfühlt. verständlich und macht Spaß.

Schlecht implementierte Animationen oder einfach zu viele Animationen können jedoch dazu führen, beeinträchtigt das Erlebnis und macht es definitiv gar nicht zum Spaß. Wir haben wahrscheinlich alle hat mit einer Benutzeroberfläche interagiert, die einfach zu viele hilfreiche Übergang die bei schlechter Leistung feindselig werden. Einige Nutzer weniger Bewegung bevorzugen, eine Nutzerpräferenz die Sie respektieren sollten.

Hinweis : Weitere Informationen zu Animationen, z. B. zum Erstellen leistungsstarker Animationen und zum Überprüfen von Animationen mit Entwicklertools

Wie funktionieren Animationen?

Kurz zur Erinnerung: Die Rendering-Pipeline besteht aus mehreren sequentiellen Phasen:

1. Stil:Berechnen Sie den Stile, die auf die Elemente angewendet werden.
2. Layout:Generieren Sie die Geometrie und Position für jedes Element.
3. Farbe:Füllen Sie die Pixel für jedes Element in Layers.
4. Zusammengesetzt: Zeichnen Sie das Element Ebenen auf dem Bildschirm.

Es gibt viele Möglichkeiten, Animationen zu definieren, eines der folgenden:

• Layout anpassen Eigenschaften.
• Farbe anpassen Eigenschaften.
• Zusammengesetztes Bild anpassen Eigenschaften.

Da diese Phasen aufeinander folgen, ist es wichtig, Animationen in weiter unten in der Pipeline. Je früher das Update desto höher sind die Kosten und desto geringer die Wahrscheinlichkeit, flüssiger machen. (Siehe Wiedergeben Leistung .

Es kann zwar bequem sein, Layout-Eigenschaften zu animieren, es fallen jedoch Kosten für auch wenn diese Kosten nicht sofort sichtbar sind. Animationen sollten wenn möglich in Form von Änderungen zusammengesetzter Eigenschaften definiert.

Deklarative CSS-Animationen definieren oder das Web verwenden Animationen und stellen Sie sicher, dass Sie zusammengesetzten Properties, ist ein großartiger erster Schritt, um für flüssige und effiziente Animationen zu sorgen. Aber trotzdem Das garantiert keine Flüssigkeit, da selbst effiziente Webanimationen haben Leistungsgrenzen. Deshalb ist es immer wichtig, zu messen.

Was sind Animationsframes?

Es dauert einige Zeit, bis Änderungen an der visuellen Darstellung einer Seite angezeigt werden. Eine visuelle Darstellung führt zu einem neuen Animationsframe, der schließlich im auf dem Display des Nutzers.

Zeigt Updates in bestimmten Intervallen an, sodass visuelle Aktualisierungen in Batches erfolgen. Viele Displays in einem festen Zeitintervall aktualisiert werden, z. B. 60 Mal pro Sekunde (d. h. 60 Hz). Einige modernere Displays können eine höhere Aktualisierungsrate bieten 90 bis 120 Hz werden üblich. Oft passen sich diese Displays zwischen den Bildwiederholraten hin und her oder bieten sogar vollständig variable Framerates.

Das Ziel jeder Anwendung, wie z. B. einem Spiel oder Browser, ist es, all diese visuelle Updates in Batches und erzeugt einen visuell vollständigen Animationsframe innerhalb die Frist einzuhalten. Dieses Zielvorhaben unterscheidet sich wichtige Browser-Aufgaben wie das schnelle Laden von Content aus dem Netzwerk oder um JavaScript-Aufgaben effizient auszuführen.

Irgendwann kann es zu schwierig werden, alle visuellen Aktualisierungen innerhalb die von der Anzeige zugewiesene Frist. In diesem Fall wird der Browser einen Rahmen fallen lassen. Dein Bildschirm wird nicht schwarz, das wiederholt sich einfach von selbst. Wie Sie sehen, ein wenig länger – denselben Animationsframe, der die beim vorherigen Frame vorgestellt wurde.

Das kommt tatsächlich häufig vor. Es ist nicht unbedingt wahrnehmbar, für statischen oder dokumentenähnlichen Content, der auf der Webplattform besonders. Verworfene Frames werden nur sichtbar, wenn wichtige visuelle Elemente wie z. B. Animationen, für die ein kontinuierlicher Animationsstream erforderlich ist. um eine flüssige Bewegung anzuzeigen.

Was beeinflusst die Animationsframes?

Webentwickler können die Fähigkeit eines Browsers, schnell und einfach und visuelle Aktualisierungen effizient zu rendern und zu präsentieren.

Beispiele:

• Inhalte, die zu groß oder ressourcenintensiv sind, um sie schnell auf dem Gerät zu decodieren Zielgerät
• Es werden zu viele Ebenen dass zu viel GPU-Arbeitsspeicher benötigt wird.
• Definieren von übermäßig komplexen CSS-Stilen oder Webanimationen
• Verwendung von Anti-Patterns für das Design, die schnelle Rendering-Optimierungen verhindern.
• Zu viel JS im Hauptthread, was zu langen Aufgaben führt, die die visuelle Darstellung blockieren Aktualisierungen.

Aber woher wissen Sie, wann ein Animationsframe seine Frist überschritten hat und einen abgebrochenen Frame?

Eine mögliche Methode ist die requestAnimationFrame() Es gibt jedoch einige Nachteile. requestAnimationFrame() oder "rAF" teilt dem Browser mit, dass Sie eine Animation abspielen möchten, und fragt nach einer die Möglichkeit, dies vor der nächsten Paint-Phase der Rendering-Pipeline zu tun. Wenn dass Ihre Callback-Funktion nicht zum erwarteten Zeitpunkt aufgerufen wird, Paint wurde nicht ausgeführt und mindestens ein Frame wurde übersprungen. Durch Abfragen und wie oft die rAF aufgerufen wird, können Sie eine Art von (fps) angezeigt.

Warnung : Der folgende Code ist ein Anti-Pattern und wird dringend davon abgeraten.

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

Die Verwendung von requestAnimationFrame()-Umfragen ist aus mehreren Gründen keine gute Idee:

• Jedes Skript muss eine eigene Abfrageschleife einrichten.
• Es kann den kritischen Pfad blockieren.
• Selbst wenn die rAF-Abfrage schnell ist, requestIdleCallback() lange inaktive Blöcke planen, wenn sie kontinuierlich verwendet werden (Blockierungen, Frame übersteigen).
• Ebenso verhindert das Fehlen langer Inaktivitätsblöcke, dass der Browser andere lang andauernde Aufgaben (z. B. längere automatische Speicherbereinigung und andere Hintergrund- oder spekulative Arbeit).
• Wenn die Abfragefunktion aktiviert und deaktiviert ist, verpassen Sie Fälle, in denen das Frame-Budget wurde überschritten.
• Umfragen geben falsch-positive Ergebnisse aus, wenn der Browser variabler Aktualisierungshäufigkeit (z. B. aufgrund des Energie- oder Sichtbarkeitsstatus).
• Das Wichtigste ist, dass nicht alle Arten von Animationen Updates!

Zu viel Arbeit am Hauptthread kann dazu führen, dass Animationsframes nicht mehr angezeigt werden können. Weitere Informationen zum Jank Beispiel zeigt, wie ein rAF-gesteuerte Animation, sobald im Hauptthread zu viel Arbeit (z. B. Layout).

Wenn der Hauptthread nicht mehr funktioniert, bleiben visuelle Aktualisierungen hängen. Das ist eine Verzögerung!

Bei vielen Analysetools wurde der Schwerpunkt darauf gelegt, die wichtigsten um zeitnah nachzuwirken und die Animationsframes reibungslos auszuführen. Aber das ist noch nicht alles! Dazu ein Beispiel:

Das Video oben zeigt eine Seite, auf der in regelmäßigen Abständen lange Aufgaben Diskussions-Thread. Diese langen Aufgaben ruinieren vollkommen die Fähigkeit der Seite, verschiedene optische Änderungen vorgenommen. In der oberen linken Ecke ist ein entsprechenden Rückgang der gemeldeten fps von requestAnimationFrame() auf 0.

Trotz dieser langen Aufgaben funktioniert das Scrollen auf der Seite weiterhin reibungslos. Dieses weil das Scrollen in modernen Browsern oft mit Unterhaltungsthreads, die vollständig vom Compositor gesteuert werden.

Dies ist ein Beispiel, das gleichzeitig viele verworfene Frames auf dem Haupt- und dennoch viele erfolgreich übermittelte Scroll-Frames auf der Compositor-Thread. Sobald die lange Aufgabe abgeschlossen ist, wird der Hauptthread keine optischen Veränderungen mehr anzubieten. rAF-Umfragen schlugen einen Abfall der Frames auf 0 vor, aber visuell würde der Nutzer keinen Unterschied bemerken.

Für Animationsframes ist die Story nicht so einfach.

Hinweis : Es gibt viele Gründe, warum lange Aufgaben schlecht sind. Diese werden mit speziellen Leistungs-APIs erfasst, z. B. der Long Tasks API oder der Event Timing API. Es gibt aber auch Funktionen wie isInputPending(), bei denen lange Aufgaben bei Inaktivität gar nicht erst sinnvoll sind.

Animationsframes: Wichtige Updates

Das Beispiel oben zeigt, dass die Geschichte nicht nur requestAnimationFrame()

Wann sind Aktualisierungen von Animationen und Animationsframes wichtig? Hier sind einige Kriterien, über die wir nachdenken, und würden uns über Feedback freuen:

• Updates des Hauptthreads und des zusammengesetzten Threads
• Fehlende Änderungen an der Farbe
• Animationen erkennen
• Qualität versus Quantität

Updates des Hauptthreads und des zusammengesetzten Threads

Bei Updates des Animationsframes handelt es sich nicht um einen booleschen Wert. Es ist nicht der Fall, dass Frames nur vollständig weggelassen oder vollständig präsentiert werden. Es gibt viele Gründe, warum eine Animation Frame kann teilweise präsentiert sein. Anders ausgedrückt: Es kann gleichzeitig veraltete Inhalte und einige neue optische Aktualisierungen, die präsentiert.

Am häufigsten tritt dies auf, wenn der Browser keine neue Aktualisierung des Hauptthreads innerhalb der Frame-Frist, hat aber einen neuen zusammengesetzten Thread aktualisieren (wie das vorherige Beispiel für das Scrollen mit Unterhaltungsthreads).

Ein wichtiger Grund für die Verwendung deklarativer Animationen wird empfohlen, dass so eine Animation komplett durch den Zusammensetzungs-Thread an, auch wenn der Haupt-Thread gerade ausgelastet ist. Diese Typen von Animationen können weiterhin auf effiziente Weise visuelle Aktualisierungen parallel.

Andererseits kann es Fälle geben, in denen ein Hauptthread-Update endlich für die Präsentation zur Verfügung stehen, aber erst nach Nichterfüllung der Fristen für die Frames. Hier Der Browser erhält ein Update, das aber möglicherweise nicht die aktuellste ist.

Im Großen und Ganzen betrachten wir Frames mit neuen visuellen Neuerungen, ohne alle neuen visuellen Aktualisierungen, als Teil-Frame. Teilframes werden relativ Üblicherweise. Im Idealfall enthalten Teilaktualisierungen mindestens die wichtigsten wie Animationen dargestellt werden. Dies ist jedoch nur möglich, die vom Compositor-Thread gesteuert wird.

Fehlende Änderungen an der Farbe

Eine andere Art der Teilaktualisierung ist, dass Medien wie Bilder noch nicht fertig sind. Decodierung und Rasterung in der Zeit für die Frame-Präsentation.

Selbst wenn eine Seite vollkommen statisch ist, können Browser dennoch hinter dem Rendering zurückbleiben. visuelle Aktualisierungen beim schnellen Scrollen. Das liegt daran, dass die Pixelwiedergaben Inhalte jenseits des sichtbaren Darstellungsbereichs können verworfen werden, um GPU-Arbeitsspeicher zu sparen. Es Das Rendern der Pixel dauert einige Zeit. Außerdem kann es länger dauern als ein Frame, alles nach einer großen Schriftrolle rendern, wie bei einem Wischen mit dem Finger. Das ist häufig wird als Checkerboarding bezeichnet.

Bei jeder Frame-Rendering-Gelegenheit ist es möglich, den Anteil des die neuesten optischen Aktualisierungen auf dem Bildschirm erschienen sind. Die Fähigkeit, dies zu tun, zu messen über viele Frames (oder Zeit) hinweg wird allgemein als Frame-Durchsatz bezeichnet.

Wenn die GPU tatsächlich nicht reagiert, kann es sogar vorkommen, dass der Browser (oder die Plattform) drosselt die Rate, mit der visuelle Aktualisierungen durchgeführt werden, und reduziert somit effektiven Framerates. Technisch gesehen kann dies die Anzahl der aktualisiert wird, wird visuell ein niedrigerer Frame-Durchsatz angezeigt.

Allerdings sind nicht alle Arten von niedrigem Framedurchsatz schlecht. Wenn die Seite überwiegend inaktiv ist und es keine aktiven Animationen gibt, ist eine niedrige Frame-Rate ist aufgrund der hohen Frame-Rate attraktiv (und schont der Akku).

Wann spielt der Frame-Durchsatz eine Rolle?

Animationen erkennen

Ein hoher Frame-Durchsatz ist besonders in Zeiten mit wichtigen Animationen. Welche Animationsarten verfügbar sind, hängt von den visuellen Aktualisierungen der einem bestimmten Thread (Haupt-, Compositor- oder Worker-) dass dieser Thread sein Update innerhalb der Frist sendet. Wir sagen, dass ein einer bestimmten Threads beeinflusst die Flüssigkeit, wenn eine aktive Animation vorhanden ist, die hängt von diesem Thread-Update ab.

Einige Animationsarten sind leichter zu definieren und zu erkennen als andere. Deklarative Animationen oder durch Nutzereingaben gesteuerte Animationen sind klarer zu definieren. als JavaScript-gestützte Animationen, die regelmäßig aktualisiert werden, um Stileigenschaften.

Selbst bei requestAnimationFrame() nicht immer davon ausgehen kann, dass jeder rAF-Aufruf unbedingt eine visuelle Aktualisierung oder Animation. Beispielsweise können Sie mit rAF-Polling nur die Framerate verfolgen. (wie oben gezeigt) sollte sich nicht auf die Messungen der Flüssigkeit auswirken, da die ohne visuelles Update.

Hinweis : Die Animationserkennung in Tools sowie die Besonderheiten von Animationsimplementierungen in Browsern werden kontinuierlich weiterentwickelt und verbessert. Chrome hat vor Kurzem Hintergrundfarbenanimationen aus dem Hauptthread in den Compositor verschoben.

Qualität versus Quantität

Die Erkennung von Animationen und Animationsframes ist da nur die Anzahl der Animationsaktualisierungen erfasst wird, die Qualität zu verbessern.

Beispielsweise kann es sein, dass du eine konstante Framerate von 60 fps siehst, wenn du dir ein Video. Technisch gesehen ist das einwandfrei, aber das Video selbst könnte niedrige Bitrate oder Probleme mit der Netzwerkzwischenspeicherung. Dies wird nicht durch die Messwerte für die Flüssigkeitsstärke der Animation, Nutzer.

Oder ein Spiel, das <canvas> nutzt (und vielleicht sogar mit Techniken wie Abgrenzung Canvas zu eine konstante Frame-Rate sicherzustellen), können in Bezug auf die ohne dabei qualitativ hochwertige Spiel-Assets in den oder Rendering-Artefakte zeigen.

Und natürlich kann eine Website auch nur richtig schlechte Animationen haben. 🙂

Ich denke, sie waren ziemlich cool für ihre Zeit!

Status eines einzelnen Animationsframes

Weil Frames nur teilweise dargestellt werden oder dass Frames ausgelassen werden die die Glätte nicht beeinträchtigen, haben wir damit begonnen, jeden Frame Vollständigkeit oder Glättung bewertet.

Das Spektrum der Arten, auf die wir den Zustand eines einzelnen Animationsframe, sortiert vom besten zum schlimmsten Fall:

Kein Update erwünscht	Inaktivitätszeit, Wiederholung des vorherigen Frames.
Vollständig präsentiert	Das Update des Hauptthreads wurde entweder innerhalb der Frist festgeschrieben oder es wurde keine Es war ein Update des Hauptthreads gewünscht.
Teilweise präsentiert	Nur Compositor; Das verzögerte Update des Hauptthreads war nicht sichtbar ändern können.
Teilweise präsentiert	Nur Compositor; der Hauptthread wurde aktualisiert, Aktualisierung enthielt keine Animation, die sich auf die Flüssigkeit auswirkt.
Teilweise präsentiert	Nur Compositor; des Hauptthreads gab es ein visuelles Update, das sich auf aber stattdessen wurde ein früher veralteter Frame angezeigt.
Teilweise präsentiert	Nur Compositor; ohne das gewünschte Hauptupdate Compositor-Update hat eine Animation, die sich auf die Flüssigkeit auswirkt.
Teilweise präsentiert	Nur Compositor, aber das Compositor-Update hat keinen die sich auf die Flüssigkeit auswirkt.
Abgelegter Frame	Kein Update. Es war kein Compositor-Update erwünscht. Die Hauptversion war mit Verspätung.
Abgelegter Frame	Ein Compositor-Update war erwünscht, hat sich jedoch verzögert.
Veralteter Frame	Eine Aktualisierung war erwünscht und wurde vom Renderer erstellt, aber der Die GPU hat sie noch nicht vor dem vsync-Zeitlimit präsentiert.

Es ist möglich, diese Status in einen Wert umzuwandeln. Und vielleicht ist es eine Möglichkeit, diese Wertung als Wahrscheinlichkeit, beobachtbar zu sein, Nutzenden. Ein einzelner verworfener Frame ist möglicherweise nicht sehr gut zu erkennen, aber eine Abfolge viele verworfene Frames hintereinander die Glättung beeinträchtigen!

Zusammenfassung: Messwert „Anteil der abgebrochenen Frames in Prozent“

Auch wenn es manchmal notwendig sein kann, ist es auch nützlich, nur einem schnellen "Live-Anzeige" Punktzahl für eine User Experience.

Frames können teilweise angezeigt oder sogar vollständig übersprungen werden. Frame-Updates beeinträchtigen die Flüssigkeit möglicherweise nicht. Wir möchten uns weniger auf die Frames zählen und vieles mehr, in welchem Umfang der Browser Optisch vollständige Updates zur Verfügung stellen, wenn es darauf ankommt.

Das mentale Modell sollte sich von Folgendem bewegen:

1. Bilder pro Sekunde von
2. Fehlende und wichtige Animationsupdates erkennen,
3. Abgebrochener Prozentsatz in einem bestimmten Zeitraum.

Wichtig ist: der Anteil der Zeit, die auf wichtige Aktualisierungen. Wir sind der Meinung, dass dies der natürlichen Art und Weise entspricht, wie Nutzer die Glättung erleben. von Webinhalten in der Praxis. Bisher haben wir Folgendes als anfängliche Gruppe von Messwerten:

• Durchschnittlicher Prozentsatz der abgebrochenen Zugriffe:für alle Animationsframes im gesamten gesamte Zeitachse
• Worst Case (% der abgebrochenen Frames):bei Gleiten über 1 Sekunde gemessen Zeitfenster.
• 95. Perzentil des Prozentsatzes der verworfenen Frames:länger als 1 Sekunde gemessen gleitende Zeitfenster.

Sie finden diese Punktzahlen bereits in einigen Chrome-Entwicklertools. Während diese liegt der Fokus nur auf dem Gesamtdurchsatz der Frames. Außerdem evaluieren wir Faktoren wie Frame-Latenzzeiten.

Hinweis : Diese Namen sind recht traditionell. Der Messwert „Prozentsatz der abgebrochenen Impressionen“ Namensgebung entspricht nicht mehr dem Literal "war a Frame drop" (war ein Frame gelöscht). Konzept. Wie im vorherigen Abschnitt erläutert, ist jeder Animationsframe eine komplizierte Anordnung von Bedingungen, die zu einer Gesamtwahrscheinlichkeit führt. Diese Namen werden sich im Laufe der Zeit ändern.

Probiere es selbst mit den Entwicklertools aus.

Performance-Head-Up-Display

Hinter einer Flagge verbirgt sich ein leistungsstarkes HUD von Chromium. (chrome://flags/#show-performance-metrics-hud) Darin finden Sie Werte für Dinge wie Core Web Vitals und einige experimentelle Definitionen für die flüssige Animation basierend auf Prozentsatz der übersprungenen Frames im Zeitverlauf.

Frame-Rendering-Statistiken

Aktivieren Sie "Frame-Rendering". Statistiken“ in den Entwicklertools über die Rendering-Einstellungen, um neue Animationsframes in die farblich gekennzeichnet sind, um Teilaktualisierungen von vollständig heruntergelassenen Frames zu unterscheiden. Aktualisierungen. Die angegebenen fps gelten nur für vollständig präsentierte Frames.

Frame-Viewer in Aufzeichnungen von Leistungsprofilen in den Entwicklertools

Die DevTools-Leistung enthält hatte lange Frames Betrachter. Allerdings war sie mit der modernen Rendering-Pipeline nicht mehr synchron. tatsächlich funktioniert. In jüngster Zeit wurden viele Verbesserungen verzeichnet, Chrome Canary, das das Debugging von Animationsproblemen erheblich vereinfacht.

Heute werden Sie feststellen, dass die Frames im Frames-Viewer besser auf die vsync-Grenzen und je nach Status farblich gekennzeichnet. Es ist immer noch nicht volle Visualisierung alle oben beschriebenen Nuancen berücksichtigt. Wir planen jedoch, weitere in naher Zukunft.

Chrome-Tracing

Mit Chrome Tracing, dem Tool der Wahl, um ins Detail zu gehen, können Sie ein „Web-Content-Rendering“ mit dem neuen Perfetto- UI (oder about:tracing) und erhalte detaillierte Informationen zur Grafik-Pipeline. Das ist eine knifflige Aufgabe, aber es gibt ein paar Dinge, wurde vor Kurzem zu Chromium hinzugefügt. Sie können sich einen Überblick darüber verschaffen, verfügbar im Bericht Life of a Rahmen Dokument.

Anhand von Trace-Ereignissen können Sie Folgendes eindeutig bestimmen:

• Welche Animationen ausgeführt werden (mithilfe der Ereignisse TrackerValidation).
• Die genaue Zeitachse der Animationsframes abrufen (mithilfe der Ereignisse PipelineReporter.
• Finden Sie bei Aktualisierungen der Animation heraus, was genau die dass die Animation schneller läuft (über die Ereignisaufschlüsselung PipelineReporter Ereignisse).
• Prüfen Sie für eingabegesteuerte Animationen, wie lange es dauert, ein visuelles Update zu erhalten. (unter Verwendung der Ereignisse EventLatency).

Nächste Schritte

Die Web Vitals-Initiative zielt darauf ab, Messwerte und Orientierungshilfen für wie wir tolle User Experiences im Web schaffen können. Lab-basierte Messwerte wie Gesamt Die Blockierzeit ist für um potenzielle Interaktivitätsprobleme zu erkennen und zu diagnostizieren. Wir planen, einen ähnlichen, laborbasierten Messwert für die flüssige Animation entwerfen.

Wir halten Sie auf dem Laufenden, während wir weiter an Ideen für umfassende Metrik basierend auf einzelnen Animations-Frame-Daten.

Zukünftig möchten wir auch APIs entwickeln, mit denen flüssige Animation für echte Nutzende im field sowie im Lab. Das gilt auch für Updates.

Feedback

Wir freuen uns über all die Verbesserungen und Entwicklertools, um die Flüssigkeit der Animation zu messen. Probieren Sie diese Tools aus, Benchmarks für deine Animationen und teile uns mit, wohin sie führt!

Sie können Ihre Kommentare an die web-vitals-feedback Google Mit „[Glättungsmetriken]“ gruppieren in der Betreffzeile ein. Wir suchen wirklich Ich freue mich auf Ihre Rückmeldung!