Hoe animatie de belangrijkste webfuncties beïnvloedt (LCP, INP en CLS)
Hoe animaties en animatieruntimes LCP, INP en CLS beïnvloeden, en praktische manieren om bewegingsrijk te houden zonder Core Web Vitals te schaden.
Kern afhaalmaaltijd
Animatie kan alle drie de Core Web Vitals schaden: zware animatiebestanden en runtimes kunnen LCP vertragen, JavaScript-gestuurde animatie kan de hoofdthread blokkeren en INP verslechteren, en het animeren van lay-outeigenschappen of het laden van animaties zonder gereserveerde ruimte veroorzaakt CLS. Houd hero-inhoud onafhankelijk van animatie, laad runtimes onder de vouw, animeer transformatie en dekking, en reserveer ruimte voor elk geanimeerd element.
De drie statistieken en hun doelstellingen
Google's Core Web Vitals, gedocumenteerd op web.dev, meten de laadsnelheid (grootste contentvolle verf, goed op 2,5 seconden of minder), reactievermogen (interactie met volgende verf, goed op 200 milliseconden of minder) en visuele stabiliteit (cumulatieve lay-outverschuiving, goed op 0,1 of minder), gemeten op het 75e percentiel van het daadwerkelijk laden van pagina's.
LCP: laat de held niet wachten op animatie
Als het grootste element op het scherm een animatie is die een runtime en een bestand nodig heeft om eerst te laden, wacht LCP op beide. Render eerst een statische afbeelding of echte tekst en verbeter deze vervolgens, en laad animatieruntimes alleen voor inhoud dichtbij of onder de vouw wanneer dat nodig is.
INP: houd de hoofddraad vrij
INP meet hoe snel de pagina reageert op tikken en klikken. Web.dev legt uit dat lange taken op de hoofdthread de reactie op invoer vertragen. Animatie waarbij complexe JavaScript op elk frame wordt uitgevoerd, of veel animaties die tegelijk beginnen, kan precies dat veroorzaken. Geef de voorkeur aan CSS-overgangen op het gebied van transformatie en dekking voor eenvoudige effecten, pauzeer animaties buiten het scherm en vermijd zwaar werk als reactie op een interactie.
CLS: reserveer ruimte en animeer transformatie
Web.dev raadt aan de transformatie-eigenschap CSS te gebruiken om te animeren zonder lay-outverschuivingen te veroorzaken: schalen in plaats van de breedte en hoogte te veranderen, vertalen in plaats van bovenaan of links te veranderen. Geef elk geanimeerd element, inclusief op canvas gebaseerde animaties, vaste afmetingen voordat het wordt geladen, zodat de pagina niet verspringt wanneer deze verschijnt.
Canvas-looptijden
Op canvas gebaseerde runtimes zoals de canvas-renderer van Lottie, Rive en ExodeUI tekenen buiten de DOM, waardoor lay-outwerk per frame wordt vermeden, maar een runtime wordt toegevoegd om te downloaden en uit te voeren. Meet de afweging voor uw pagina: laad de runtime lui, vergroot het canvas in CSS vooraf en test op telefoons uit het middensegment.
Toets Principles in om te onthouden
- Doelen: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 op het 75e percentiel
- Zorg ervoor dat het LCP-element niet afhankelijk is van een animatieruntime
- Houd de rode draad vrij tijdens interacties
- Animeer transformatie en dekking; reserveer ruimte voor geanimeerde elementen
- Lazy-load runtimes en tests op telefoons uit het middensegment
Veelgestelde vragen
Bronnen
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev