Nicht zusammengesetzte Animationen können auf Low-End-Smartphones oder bei der Ausführung leistungsintensiver Aufgaben im Hauptthread auffällig (nicht flüssig) dargestellt werden. Verwackelte Animationen können den Cumulative Layout Shift (CLS) Ihrer Seite erhöhen. Durch das Reduzieren der CLS wird die Lighthouse-Leistungsbewertung verbessert.
Hintergrund
Die Algorithmen des Browsers zur Umwandlung von HTML, CSS und JavaScript in Pixel werden zusammenfassend als Rendering-Pipeline bezeichnet.
Es ist kein Problem, wenn Sie nicht wissen, was die einzelnen Schritte der Rendering-Pipeline bedeuten. Im Moment ist es wichtig, zu verstehen, dass der Browser bei jedem Schritt der Rendering-Pipeline das Ergebnis des vorherigen Vorgangs verwendet, um neue Daten zu erstellen. Wenn Ihr Code beispielsweise ein Layout auslöst, müssen die Paint- und Composite-Schritte noch einmal ausgeführt werden. Eine nicht zusammengesetzte Animation ist jede Animation, die einen der vorherigen Schritte in der Rendering-Pipeline (Stil, Layout oder Paint) auslöst. Nicht zusammengesetzte Animationen sind schlechter, da sie den Browser dazu zwingen, mehr Arbeit zu erledigen.
Sehen Sie sich die folgenden Ressourcen an, um mehr über die Rendering-Pipeline zu erfahren:
- Ein Blick hinter die Kulissen moderner Webbrowser (Teil 3)
- Farben und Lackierungen vereinfachen
- Eigenschaften nur für zusammengesetzte Objekte beibehalten und Anzahl der Ebenen verwalten
So erkennt Lighthouse nicht zusammengesetzte Animationen
Wenn eine Animation nicht zusammengesetzt werden kann, meldet Chrome die Fehlerursachen an das DevTools-Trace, das von Lighthouse gelesen wird. Lighthouse listet DOM-Knoten mit nicht zusammengesetzten Animationen sowie die Fehlerursache(n) für jede Animation auf.
So sorgen Sie dafür, dass Animationen zusammengesetzt sind
Weitere Informationen finden Sie unter Eigenschaften nur für Kompositorfunktion beibehalten und Ebenenanzahl verwalten und Animationen mit hoher Leistung.