Wie sich Animation auf die wichtigsten Web-Vitals auswirkt (LCP, INP und CLS)
Wie sich Animationen und Animationslaufzeiten auf LCP, INP und CLS auswirken, und praktische Möglichkeiten, den Bewegungsreichtum aufrechtzuerhalten, ohne die Core Web Vitals zu beeinträchtigen.
Kernaussage
Animation kann allen drei Core Web Vitals schaden: Umfangreiche Animationsdateien und Laufzeiten können LCP verzögern, JavaScript-gesteuerte Animationen können den Hauptthread blockieren und INP verschlechtern, und das Animieren von Layouteigenschaften oder das Laden von Animationen ohne reservierten Speicherplatz verursacht CLS. Halten Sie Heldeninhalte unabhängig von der Animation, laden Sie Laufzeiten unterhalb der Falte verzögert, animieren Sie Transformation und Deckkraft und reservieren Sie Platz für jedes animierte Element.
Die drei Metriken und ihre Ziele
Googles Core Web Vitals, dokumentiert auf web.dev, messen das Laden (größter Contentful Paint, gut bei 2,5 Sekunden oder weniger), die Reaktionsfähigkeit (Interaktion mit dem nächsten Paint, gut bei 200 Millisekunden oder weniger) und die visuelle Stabilität (kumulative Layoutverschiebung, gut bei 0,1 oder weniger), gemessen am 75. Perzentil der tatsächlichen Seitenladevorgänge.
LCP: Lassen Sie den Helden nicht auf die Animation warten
Wenn das größte Element auf dem Bildschirm eine Animation ist, die zuerst eine Laufzeit und eine Datei zum Laden benötigt, wartet LCP auf beides. Rendern Sie zuerst ein statisches Bild oder echten Text, verbessern Sie es dann und laden Sie Animationslaufzeiten nur für Inhalte in der Nähe oder unterhalb der Falte, wenn sie benötigt werden.
INP: Halten Sie den Hauptthread frei
INP misst, wie schnell die Seite auf Taps und Klicks reagiert. Web.dev erklärt, dass lange Aufgaben im Hauptthread die Reaktion auf Eingaben verzögern. Animationen, die komplexe JavaScript in jedem Frame ausführen, oder viele Animationen, die gleichzeitig beginnen, können genau das verursachen. Bevorzugen Sie CSS-Übergänge bei Transformation und Deckkraft für einfache Effekte, pausieren Sie Animationen außerhalb des Bildschirms und vermeiden Sie es, als Reaktion auf eine Interaktion mit schwerer Arbeit zu beginnen.
CLS: Platz reservieren und Transformation animieren
Web.dev empfiehlt die Verwendung der CSS-Transformationseigenschaft zum Animieren, ohne Layoutverschiebungen auszulösen: Skalieren, anstatt Breite und Höhe zu ändern, Versetzen, anstatt oben oder links zu ändern. Geben Sie jedem animierten Element, einschließlich Canvas-basierter Animationen, feste Abmessungen, bevor es geladen wird, damit die Seite beim Erscheinen nicht springt.
Canvas-Laufzeiten
Canvas-basierte Laufzeiten wie der Canvas-Renderer von Lottie, Rive und ExodeUI zeichnen außerhalb des DOM, wodurch Layoutarbeit pro Frame vermieden wird, aber eine Laufzeit zum Herunterladen und Ausführen hinzugefügt wird. Messen Sie den Kompromiss für Ihre Seite: Laden Sie die Laufzeit verzögert, passen Sie die Größe der Leinwand im Voraus in CSS an und testen Sie sie auf Mobiltelefonen mit mittlerer Reichweite.
Wichtige Prinzipien
- Ziele: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 beim 75. Perzentil
- Machen Sie das LCP-Element nicht von einer Animationslaufzeit abhängig
- Halten Sie den Hauptthread während der Interaktionen frei
- Animierte Transformation und Deckkraft; Reservieren Sie Platz für animierte Elemente
- Lazy-Load-Laufzeiten und Tests auf Mittelklasse-Telefonen
Häufige Fragen
Quellen
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev