Einige Animationen auf Webseiten können vollständig in der Compositor-Phase der Rendering-Pipeline verarbeitet werden.
Nicht zusammengesetzte Animationen erfordern mehr Arbeit und können auf Low-End-Smartphones oder bei leistungsintensiven Aufgaben im Hauptthread ruhig (nicht flüssig) erscheinen.
Nicht zusammengesetzte Animationen können auch den Cumulative Layout Shift (CLS) Ihrer Seite erhöhen, da sie zu einer tatsächlichen Bewegung von Elementen führen, die vom CLS-Algorithmus gemessen werden. Dies kann zu weiteren Verschiebungen anderer Elemente führen. Zusammengesetzte Animationen führen nicht dazu, dass sich andere Elemente verschieben, und werden daher vom CLS ausgeschlossen. Wenn Sie den CLS reduzieren, steigt Ihr Lighthouse-Leistungsbewertung.
Hintergrund
Die Algorithmen des Browsers zur Umwandlung von HTML, CSS und JavaScript in Pixel werden zusammen als Rendering-Pipeline bezeichnet.
Es ist in Ordnung, wenn Sie nicht genau wissen, was die einzelnen Schritte der Rendering-Pipeline bedeuten. Wichtig ist, dass der Browser in jedem Schritt der Rendering-Pipeline das Ergebnis des vorherigen Vorgangs verwendet, um neue Daten zu erstellen. Wenn Ihr Code beispielsweise etwas ausführt, das das Layout auslöst, müssen die Schritte „Paint“ und „Composite“ noch einmal ausgeführt werden. Eine nicht zusammengesetzte Animation ist eine Animation, die einen der früheren Schritte in der Rendering-Pipeline auslöst (Stil, Layout oder Malen). Nicht zusammengesetzte Animationen sind weniger leistungsfähig, da sie den Browser mehr beanspruchen.
In den folgenden Ressourcen finden Sie ausführliche Informationen zur Rendering-Pipeline:
- Moderne Webbrowser im Detail (Teil 3)
- Malbereiche vereinfachen und reduzieren
- Nur für den Compositor bestimmte Properties verwenden und die Anzahl der Ebenen verwalten
So erkennt Lighthouse nicht zusammengesetzte Animationen
Wenn eine Animation nicht zusammengesetzt werden kann, meldet Chrome die Gründe für den Fehler im DevTools-Trace, der von Lighthouse gelesen wird. Lighthouse listet DOM-Knoten mit Animationen auf, die nicht zusammengesetzt wurden, zusammen mit den Fehlerursachen für jede Animation.
Animations-Compositing
Weitere Informationen finden Sie unter Nur Eigenschaften für den Compositor verwenden und die Anzahl der Ebenen verwalten und Hochleistungsanimationen.