Niet-samengestelde animaties kunnen janky (niet vloeiend) lijken op goedkope telefoons of wanneer prestatie-zware taken op de hoofdthread worden uitgevoerd. Janky-animaties kunnen de Cumulatieve Layout Shift (CLS) van uw pagina vergroten. 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 Vasthouden aan de eigenschappen van alleen de compositor en het aantal lagen beheren en Hoogwaardige animaties .