In che modo l'animazione influisce sui Core Web Vitals (LCP, INP e CLS)
In che modo le animazioni e i tempi di esecuzione delle animazioni influiscono su LCP, INP e CLS e modi pratici per mantenere ricco il movimento senza danneggiare i Core Web Vitals.
Punto chiave
L'animazione può danneggiare tutti e tre i Core Web Vitals: file di animazione e tempi di esecuzione pesanti possono ritardare LCP, l'animazione guidata da JavaScript può bloccare il thread principale e peggiorare l'INP e l'animazione delle proprietà del layout o il caricamento di animazioni senza spazio riservato causa CLS. Mantieni il contenuto dell'eroe indipendente dall'animazione, esegui il lazy load sotto la piega, anima la trasformazione e l'opacità e riserva spazio per ogni elemento animato.
Le tre metriche e i loro obiettivi
I Core Web Vitals di Google, documentati su web.dev, misurano il caricamento (Largest Contentful Paint, buono a 2,5 secondi o meno), la reattività (Interazione con Next Paint, buono a 200 millisecondi o meno) e la stabilità visiva (Cumulative Layout Shift, buono a 0,1 o meno), misurati al 75° percentile dei caricamenti di pagina reali.
LCP: non far aspettare l'eroe per l'animazione
Se l'elemento più grande sullo schermo è un'animazione che necessita prima di un runtime e di un file da caricare, LCP attende entrambi. Esegui prima il rendering di un'immagine statica o di un testo reale, quindi miglioralo e carica i runtime di animazione solo per i contenuti Near o Below the Fold quando necessario.
INP: mantiene libero il thread principale
INP misura la velocità con cui la pagina risponde ai tocchi e ai clic. Web.dev spiega che le attività lunghe sul thread principale ritardano la risposta all'input. L'animazione che esegue JavaScript complessi su ogni fotogramma o molte animazioni che iniziano contemporaneamente possono causare esattamente questo. Preferisci le transizioni CSS su trasformazione e opacità per effetti semplici, metti in pausa le animazioni fuori schermo ed evita di iniziare un lavoro pesante in risposta a un'interazione.
CLS: riservare spazio e animare la trasformazione
Web.dev consiglia di utilizzare la proprietà di trasformazione CSS per animare senza attivare spostamenti del layout: ridimensiona invece di modificare larghezza e altezza, trasla invece di modificare in alto o a sinistra. Assegna a ogni elemento animato, comprese le animazioni basate su tela, dimensioni fisse prima del caricamento, in modo che la pagina non salti quando viene visualizzata.
Autonomia del Canvas
I runtime basati su canvas come il renderer canvas di Lottie, Rive e ExodeUI disegnano all'esterno del DOM, il che evita il lavoro di layout per fotogramma ma aggiunge un runtime da scaricare ed eseguire. Misura il compromesso per la tua pagina: carica lentamente il runtime, dimensiona la tela in CSS in primo piano e prova su telefoni di fascia media.
Principi chiave da ricordare
- Obiettivi: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 al 75° percentile
- Non fare in modo che l'elemento LCP dipenda da un runtime di animazione
- Mantieni libero il thread principale durante le interazioni
- Animare trasformazione e opacità; riservare spazio per elementi animati
- Autonomia con caricamento lento e test su telefoni di fascia media
Domande frequenti
Fonti
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev