Hur animering påverkar Core Web Vitals (LCP, INP och CLS)
Hur animationer och animationskörtider påverkar LCP, INP och CLS, och praktiska sätt att hålla rörelserik utan att skada Core Web Vitals.
Core Takeaway
Animation kan skada alla tre Core Web Vitals: tunga animeringsfiler och körtider kan fördröja LCP, JavaScript-driven animering kan blockera huvudtråden och förvärra INP, och animering av layoutegenskaper eller laddning av animeringar utan reserverat utrymme orsakar CLS. Håll hjälteinnehåll oberoende av animering, lata-load körtider nedanför mitten, animera transformation och opacitet, och reservera utrymme för varje animerat element.
De tre måtten och deras mål
Googles Core Web Vitals, dokumenterade på web.dev, mäter laddning (Largest Contentful Paint, bra på 2,5 sekunder eller mindre), lyhördhet (Interaction to Next Paint, bra på 200 millisekunder eller mindre) och visuell stabilitet (Cumulative Layout Shift, bra på 0,1 eller mindre), uppmätt vid den verkliga sidbelastningen på 5:e procenten.
LCP: låt inte hjälten vänta på animering
Om det största elementet på skärmen är en animering som behöver en körtid och en fil för att laddas först, väntar LCP på båda. Återge en statisk bild eller riktig text först, förbättra den sedan och ladda animeringskörtider endast för innehåll nära eller under mitten när det behövs.
INP: håll huvudtråden fri
INP mäter hur snabbt sidan svarar på tryck och klick. Web.dev förklarar att långa uppgifter på huvudtråden fördröjer svaret på input. Animation som kör komplexa JavaScript på varje bildruta, eller många animeringar som börjar samtidigt, kan orsaka exakt det. Föredra CSS-övergångar på transformation och opacitet för enkla effekter, pausa animeringar utanför skärmen och undvik att starta tungt arbete som svar på en interaktion.
CLS: reservera utrymme och animera transformation
Web.dev rekommenderar att du använder transformeringsegenskapen CSS för att animera utan att utlösa layoutförskjutningar: skala istället för att ändra bredd och höjd, översätt istället för att ändra topp eller vänster. Ge varje animerat element, inklusive dukbaserade animationer, fasta mått innan det laddas, så att sidan inte hoppar när den visas.
Canvas körtider
Canvas-baserade körtider som Lottie:s canvas renderer, Rive och ExodeUI ritar utanför DOM, vilket undviker layoutarbete per bildruta men lägger till en körtid att ladda ner och köra. Mät avvägningen för din sida: ladda körtiden på latsidan, storleksanpassa duken i CSS i förväg och testa på mellanklasstelefoner.
Nyckel Principles att komma ihåg
- Mål: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 vid den 75:e percentilen
- Gör inte LCP-elementet beroende av en animeringstid
- Håll huvudtråden fri under interaktioner
- Animera transformation och opacitet; reservera utrymme för animerade element
- Lata körtider och testa på mellanklasstelefoner
Vanliga frågor
Källor
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev