Animasi yang tidak digabungkan dapat terlihat jank (tidak mulus) pada ponsel kelas bawah atau saat tugas dengan performa berat sedang berjalan di thread utama. Animasi yang mengalami jank dapat meningkatkan Pergeseran Tata Letak Kumulatif (CLS) halaman Anda. Mengurangi CLS akan meningkatkan skor Performa Lighthouse Anda.
Latar belakang
Algoritma browser untuk mengonversi HTML, CSS, dan JavaScript menjadi piksel secara kolektif dikenal sebagai pipeline rendering.
Tidak masalah jika Anda tidak memahami arti dari setiap langkah pipeline rendering. Hal utama yang harus dipahami saat ini adalah bahwa pada setiap langkah pipeline rendering, browser menggunakan hasil operasi sebelumnya untuk membuat data baru. Misalnya, jika kode Anda melakukan sesuatu yang memicu Tata Letak, langkah-langkah Paint dan Composite harus dijalankan lagi. Animasi non-gabungan adalah animasi apa pun yang memicu salah satu langkah sebelumnya dalam pipeline rendering (Style, Layout, atau Paint). Animasi non-gabungan berperforma lebih buruk karena memaksa browser melakukan lebih banyak pekerjaan.
Lihat referensi berikut untuk mempelajari pipeline rendering secara mendalam:
- Sekilas tentang browser web modern (bagian 3)
- Menyederhanakan kompleksitas paint dan mengurangi area paint
- Tetap gunakan properti compositor-saja dan kelola jumlah lapisan
Cara Lighthouse mendeteksi animasi yang tidak digabungkan
Jika animasi tidak dapat digabungkan, Chrome akan melaporkan alasan kegagalan ke trace DevTools, yang dibaca oleh Lighthouse. Lighthouse mencantumkan node DOM yang memiliki animasi yang tidak digabungkan beserta alasan kegagalan untuk setiap animasi.
Cara memastikan animasi telah digabungkan
Lihat Berpegang pada properti compositor saja dan kelola jumlah lapisan serta Animasi berperforma tinggi.