Sommige animaties op webpagina's kunnen volledig worden afgehandeld in de compositorfase van de renderingpijplijn .
Niet-gecomponeerde animaties vereisen meer werk en kunnen janky (niet vloeiend) lijken op goedkope telefoons of wanneer prestatie-zware taken op de hoofdthread worden uitgevoerd.
Niet-samengestelde animaties kunnen ook de Cumulatieve Layout Shift (CLS) van uw pagina vergroten, omdat ze resulteren in daadwerkelijke verplaatsing van elementen die het CLS-algoritme meet, wat kan leiden tot verschuivingen naar andere elementen. Samengestelde animaties zullen er niet voor zorgen dat andere elementen verschuiven en zijn daarom uitgesloten van CLS. Het verminderen van CLS zal uw Lighthouse Performance-score verbeteren.
Achtergrond
De algoritmen van de browser voor het omzetten van HTML, CSS en JavaScript in pixels staan gezamenlijk bekend als de rendering pipeline .
Het is geen probleem als u niet begrijpt wat elke stap van de weergavepijplijn betekent. Het belangrijkste dat u nu moet begrijpen, is dat de browser bij elke stap van de weergavepijplijn het resultaat van de vorige bewerking gebruikt om nieuwe gegevens te creëren. Als uw code bijvoorbeeld iets doet dat Layout activeert, moeten de stappen Paint en Composite opnieuw worden uitgevoerd. Een niet-samengestelde animatie is elke animatie die een van de eerdere stappen in de renderingpijplijn activeert (stijl, lay-out of verf). Niet-gecomponeerde animaties presteren slechter omdat ze de browser dwingen meer werk te doen.
Bekijk de volgende bronnen voor meer informatie over de renderingpijplijn:
- Een kijkje in moderne webbrowsers (deel 3)
- Vereenvoudig de complexiteit van verf en verminder verfoppervlakken
- Houd u aan de eigenschappen die alleen voor de compositor gelden en beheer het aantal lagen
Hoe Lighthouse niet-gecomponeerde animaties detecteert
Wanneer een animatie niet kan worden samengesteld, rapporteert Chrome de redenen voor de mislukking aan de DevTools-trace, wat Lighthouse leest. Lighthouse vermeldt DOM-knooppunten met animaties die niet zijn samengesteld, samen met de foutreden(en) voor elke animatie.
Hoe u ervoor kunt zorgen dat animaties worden samengesteld
Zie Houd je aan de eigenschappen die alleen voor de compositor beschikbaar zijn en beheer het aantal lagen en Hoogwaardige animaties .