Le animazioni non composite possono apparire scarse (non fluide) sui telefoni di fascia bassa o quando le attività ad alte prestazioni sono in esecuzione sul thread principale. Le animazioni costose possono aumentare la metrica Cumulative Layout Shift (CLS) della pagina. La riduzione del CLS migliorerà il punteggio relativo alle prestazioni di Lighthouse.
Contesto
Gli algoritmi del browser per la conversione di HTML, CSS e JavaScript in pixel sono noti collettivamente come pipeline di rendering.
Non è un problema se non comprendi il significato di ogni passaggio della pipeline di rendering. La cosa fondamentale da capire in questo momento è 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 Layout, i passaggi Paint e Comosite devono essere eseguiti di nuovo. Un'animazione non composita è qualsiasi animazione che attiva uno dei passaggi precedenti nella pipeline di rendering (Stile, Layout o Paint). Le animazioni non composte hanno un rendimento peggiore perché costringono il browser a lavorare di più.
Consulta le seguenti risorse per conoscere in dettaglio la pipeline di rendering:
- Uno sguardo all'interno dei browser web moderni (parte 3)
- Semplifica la complessità del colore e riduci le aree di verniciatura
- Utilizza le proprietà solo del 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 alla traccia DevTools, che è quella che Lighthouse legge. Lighthouse elenca i nodi DOM con animazioni non composte insieme al motivo o ai motivi dell'errore per ogni animazione.
Come assicurarsi che le animazioni siano composte
Vedi Attieniti alle proprietà solo del compositore e gestisci il numero di livelli e Animazioni ad alte prestazioni.