Beberapa animasi di halaman web dapat ditangani sepenuhnya di tahap kompositor pipeline rendering.
Animasi yang tidak digabungkan memerlukan lebih banyak pekerjaan dan dapat terlihat tersendat (tidak lancar) di ponsel kelas bawah atau saat tugas yang berat performanya berjalan di thread utama.
Animasi non-komposit juga dapat meningkatkan Pergeseran Tata Letak Kumulatif (CLS) halaman Anda karena menyebabkan gerakan sebenarnya dari elemen yang diukur algoritma CLS, yang dapat menyebabkan pergeseran berantai ke elemen lain. Animasi gabungan tidak akan menyebabkan elemen lain bergeser sehingga dikecualikan dari CLS. 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 setiap langkah pipeline rendering. Hal utama yang perlu dipahami saat ini adalah pada setiap langkah pipeline rendering, browser menggunakan hasil operasi sebelumnya untuk membuat data baru. Misalnya, jika kode Anda melakukan sesuatu yang memicu Layout, langkah Paint dan Composite perlu dijalankan lagi. Animasi non-komposit adalah animasi yang memicu salah satu langkah sebelumnya dalam pipeline rendering (Gaya, Tata Letak, atau Cat). Animasi non-komposit berperforma lebih buruk karena memaksa browser melakukan lebih banyak pekerjaan.
Lihat referensi berikut untuk mempelajari pipeline rendering secara mendalam:
- Tampilan dalam browser web modern (bagian 3)
- Menyederhanakan kompleksitas cat dan mengurangi area cat
- Menggunakan properti khusus kompositor dan mengelola jumlah lapisan
Cara Lighthouse mendeteksi animasi yang tidak digabungkan
Jika animasi tidak dapat digabungkan, Chrome akan melaporkan alasan kegagalan ke rekaman aktivitas DevTools, yang dibaca oleh Lighthouse. Lighthouse mencantumkan node DOM yang memiliki animasi yang tidak dikomposisi bersama dengan alasan kegagalan untuk setiap animasi.
Cara memastikan animasi digabungkan
Lihat Menggunakan properti khusus kompositor dan mengelola jumlah lapisan dan Animasi berperforma tinggi.