Alcune animazioni nelle pagine web possono essere gestite completamente nella fase di composizione della pipeline di rendering.
Le animazioni non composite richiedono più lavoro e possono risultare jerky (non fluide) su smartphone di fascia bassa o quando vengono eseguite attività che richiedono un elevato utilizzo della CPU sul thread principale.
Le animazioni non composite possono anche aumentare il Spostamento cumulativo del layout (CLS) della tua pagina, poiché comportano il movimento effettivo degli elementi misurati dall'algoritmo CLS, il che può causare spostamenti a cascata in altri elementi. Le animazioni composite non comportano lo spostamento di altri elementi e pertanto sono escluse dal CLS. La riduzione del CLS migliorerà il punteggio di rendimento di Lighthouse.
Sfondo
Gli algoritmi del browser per la conversione di HTML, CSS e JavaScript in pixel sono noti collettivamente come pipeline di rendering.
Non preoccuparti se non capisci il significato di ogni passaggio della pipeline di rendering. L'aspetto fondamentale da comprendere ora è che in ogni passaggio della pipeline di rendering il browser utilizza il risultato dell'operazione precedente per creare nuovi dati. Ad esempio, se il codice esegue un'azione che attiva il layout, i passaggi di pittura e composizione devono essere eseguiti di nuovo. Un'animazione non composta è qualsiasi animazione che attiva uno dei passaggi precedenti della pipeline di rendering (Stile, Layout o Colore). Le animazioni non composite hanno un rendimento peggiore perché costringono il browser a lavorare di più.
Consulta le seguenti risorse per scoprire di più sulla pipeline di rendering:
- Approfondimento sui browser web moderni (parte 3)
- Semplifica la complessità della pittura e riduci le aree di pittura
- Utilizza solo proprietà per il compositore e gestisci il numero di livelli
In che modo Lighthouse rileva le animazioni non composite
Quando non è possibile comporre un'animazione, Chrome segnala i motivi dell'errore nella traccia di DevTools, che è ciò che legge Lighthouse. Lighthouse elenca i nodi DOM con animazioni che non sono state composite, insieme ai motivi dell'errore per ogni animazione.
Come assicurarsi che le animazioni vengano composite
Consulta Utilizza solo proprietà di compositore e gestisci il numero di livelli e Animazioni ad alto rendimento.