Improvisasi Performa Web Pribadi Bagian 3

Pada tulisan ini, saya ingin mencari tahu bagimana cara agar gambar yang ada di dalam suatu artikel tidak dimuat semuanya dan hanya dimuat bila mereka muncul tepat di hadapan layar ponsel saya. Apa keuntungannya? Salah satunya menghemat biaya unduh gambar di dalam suatu artikel. Istilah ini sering disebut dengan lazy-load.

IntersectionObserver merupakan kunci untuk menanggulangi hal ini. Caranya cukup mudah, Anda bisa melihat contohnya di CodePen, membaca artikel detailnya di Smashing Magazine, melihat commit yang saya buat di Gitlab.

Pastikan taruh script Intersection Observer di dalam tag body dan sebelum penutup tag body agar semua konten selesai dimuat oleh browser terlebih dahulu.