Bagaimana Animasi Mempengaruhi Core Web Vitals (LCP, INP, dan CLS)
Bagaimana animasi dan runtime animasi memengaruhi LCP, INP, dan CLS, serta cara praktis untuk menjaga agar gerakan tetap kaya tanpa merugikan Core Web Vitals.
Pengambilan Inti
Animasi dapat merusak ketiga Data Web Inti: file animasi berat dan waktu proses dapat menunda LCP, animasi yang digerakkan oleh JavaScript dapat memblokir thread utama dan memperburuk INP, dan menganimasikan properti tata letak atau memuat animasi tanpa ruang yang dicadangkan menyebabkan CLS. Jaga konten hero tetap independen dari animasi, waktu proses pemuatan lambat di paro bawah, animasikan transformasi dan opacity, dan sisakan ruang untuk setiap elemen animasi.
Ketiga metrik dan targetnya
Data Web Inti Google, yang didokumentasikan di web.dev, mengukur pemuatan (Cat Berisi Terbesar, berdurasi 2,5 detik atau kurang), daya tanggap (Interaksi ke Cat Berikutnya, berdurasi 200 milidetik atau kurang) dan stabilitas visual (Pergeseran Tata Letak Kumulatif, berdurasi 0,1 atau kurang), diukur pada persentil ke-75 dari pemuatan halaman sebenarnya.
LCP: jangan membuat hero menunggu animasi
Jika elemen terbesar di layar adalah animasi yang memerlukan runtime dan file untuk dimuat terlebih dahulu, LCP menunggu keduanya. Render gambar statis atau teks asli terlebih dahulu, lalu tingkatkan, dan muat waktu proses animasi hanya untuk konten di paro dekat atau bawah saat diperlukan.
INP: biarkan thread utama tetap bebas
INP mengukur seberapa cepat halaman merespons ketukan dan klik. Web.dev menjelaskan bahwa tugas yang panjang di thread utama menunda respons terhadap input. Animasi yang menjalankan JavaScript kompleks pada setiap frame, atau banyak animasi yang dimulai sekaligus, dapat menyebabkan hal tersebut. Lebih suka transisi CSS pada transformasi dan opasitas untuk efek sederhana, jeda animasi di luar layar, dan hindari memulai pekerjaan berat sebagai respons terhadap interaksi.
CLS: mencadangkan ruang dan menganimasikan transformasi
Web.dev merekomendasikan penggunaan properti transformasi CSS untuk menganimasikan tanpa memicu perubahan tata letak: skala alih-alih mengubah lebar dan tinggi, terjemahkan alih-alih mengubah atas atau kiri. Berikan setiap elemen animasi, termasuk animasi berbasis kanvas, dimensi tetap sebelum dimuat, sehingga halaman tidak melompat saat muncul.
Waktu proses kanvas
Runtime berbasis kanvas seperti penyaji kanvas Lottie, Rive dan ExodeUI menggambar di luar DOM, yang menghindari pekerjaan tata letak per frame tetapi menambahkan runtime untuk diunduh dan dijalankan. Ukur keuntungan halaman Anda: muat runtime dengan lambat, ukur kanvas dalam CSS di awal, dan uji pada ponsel kelas menengah.
Kunci Principles untuk Diingat
- Target: LCP ≤ 2,5 detik, INP ≤ 200 ms, CLS ≤ 0,1 pada persentil ke-75
- Jangan membuat elemen LCP bergantung pada runtime animasi
- Jaga agar thread utama tetap bebas selama interaksi
- Transformasi dan opacity bernyawa; cadangan ruang untuk elemen animasi
- Waktu proses yang lambat dan pengujian pada ponsel kelas menengah
Pertanyaan yang Sering Diajukan
Sumber
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev