Pengamat Persimpangan sedang beraksi

Pengamat Persimpangan? Apa!? Kedengarannya menakutkan!

Dalam posting ini saya ingin menjelaskan perjalanan saya dan kasus penggunaan menggunakan Intersection Observer. Saya juga akan memberi Anda gambaran singkat tentang bagaimana Anda bisa memulai.

Sesuai spesifikasinya…

Intersection Observer API menyediakan cara untuk mengamati perubahan secara asinkron pada perpotongan elemen target dengan elemen leluhur atau dengan viewport dokumen tingkat atas.

Apa yang dapat Anda lakukan dengan API Web baru ini adalah memeriksa apakah Anda dapat melihat secara visual elemen yang Anda amati dalam area pandang atau elemen induk lainnya yang dapat digulir.

Kasus penggunaan saya

Bagaimana dengan pemuatan gambar yang lambat di halaman?

Baru-baru ini, saya telah berupaya meningkatkan kinerja dan ukuran muatan yang kami berikan kepada pengguna kami di Live Nation.

Ada banyak gambar di beranda Live Nation, dan terkadang gambar-gambar ini diunggah dengan kualitas tinggi, sehingga kami akhirnya mengirimkan gambar dengan ukuran file yang sayangnya besar.

Saya cukup yakin pengguna tidak terlalu peduli untuk mengunduh setiap gambar, dari atas hingga bawah, dan siap untuk dilihat. Menurut saya, mereka ingin melihat halaman dimuat lebih cepat.

Oleh karena itu, jika Anda adalah pengguna perangkat seluler, Anda hanya akan peduli dengan 1, 2, 3… gambar? Hampir tidak ada apa-apa. Pada dasarnya tidak ada gunanya menyajikan konten kepada pengguna yang mungkin tidak dapat mereka gulir untuk melihatnya.

Jadi, mari kita mulai!

Kami menggunakan React, yang membantu kami membuat komponen cantik dan dapat digunakan kembali yang dapat kami bagikan di situs web kami. Jadi, saya mengambil komponen Gambar saya dan menambahkan beberapa kode ke dalamnya.

Hal pertama yang ingin saya lakukan adalah memastikannya berfungsi dan berperilaku seperti komponen gambar normal setelah modifikasi, jadi saya menambahkannya sebagai prop baru observeOnScroll.

Dengan itu, saya dapat merangkum kode saya dan mengeksekusinya hanya dengan meneruskan observeOnScroll. Itu terlihat seperti ini di componentDidMount saya:

1. Saya memeriksa apakahobserveOnScroll telah diteruskan ke komponen, jika tidak, saya tidak akan membiarkan kode berlanjut.
2. Buat IntersectionObserver baru, yang menerima fungsi panggilan balik dan serangkaian opsi. Fungsi panggilan balik dijalankan ketika elemen Anda menjadi terlihat atau tidak terlihat, sehingga ketika elemen mencegat area pandang dan ada beberapa opsi yang dapat Anda lewati, seperti misalnya Anda dapat menambahkan margin ke elemen sehingga Anda dapat mulai mengambil beberapa tindakan sebelum elemen tersebut terlihat. Jika Anda mau, Anda dapat “menyelidiki opsi Pengamat Persimpangan lebih lanjut”.
3. Saya meminta pengamat saya untuk mengamati elemennya, dalam hal ini gambar.

Dan sekarang? Apa yang kita tunggu? Mari mulai menggulir halamannya!

Setelah Anda mulai menggulir dan elemen Anda mulai berpotongan dengan area pandang, Anda dapat melihat bahwa callback diaktifkan.

Anda akan menerima beberapa entri persimpangan, setiap entri menjelaskan perubahan persimpangan untuk satu pengamatan. Itu sebabnya saya mengulanginya, jadi jika ada yang berpotongan saya bisa mengambil tindakan dan akhirnya membuat gambar saya.

Tapi saya ingin gambar saya dimuat dengan baik dan memuatnya terlebih dahulu tanpa perubahan visual apa pun, sehingga gambar tersebut siap saat saya merender komponen saya dengan gambar sebenarnya. Jadi, saya akan mendengarkan acara onload dan di sana saya akan menyetel status loaded ke true dan akhirnya saya dapat menampilkan Gambar saya. Semua itu, bersama dengan animasi buram yang bagus untuk mengalihkan perhatian pengguna saat pemuatan sedang berlangsung.

Dan kita selesai! 🎉

Dukungan Peramban

Pada saat penulisan ini, seperti yang Anda lihat, sebagian besar browser mendukungnya dan cukup kuat bagi Anda untuk mulai menerapkannya ke situs web Anda. Lihat dukungan saat ini.

Namun bagaimana dengan browser yang tidak mendukung? Oke, yang saya lakukan adalah malas memuat polyfill dalam kasus tersebut.

Kami memeriksa dukungan untuk Intersection Observer dengan memeriksa apakah itu ada pada objek window. Jika ya, maka polyfill tidak diperlukan, jika tidak, kita memuat file polyfill kita ke halaman.

Namun seperti biasa, ada beberapa kesulitan dan perbedaan dalam implementasi browser:

Misalnya, ketika saya menguji dengan browser Internet Samsung, tidak berhasil! Tidak ada gambar… Tapi kenapa? Saya melihat dukungan browser dan semuanya berwarna hijau, jadi mengapa!?

Langkah selanjutnya, perjalanan debug.

Saya menggunakan perangkat nyata untuk dapat mereproduksi masalah (Jika Anda ingin tahu cara melakukan debug di perangkat nyata, lihatlah panduan luar biasa ini untuk debug jarak jauh melalui Samsung Internet) dan setelah menggali lebih dalam, saya menemukan di sana tidak ada properti isIntersecting di IntersectionObserverEntry yang tersedia, jadi saya memutuskan untuk mencarinya di Google! dan menemukan ini:

Ternyata Edge juga tidak memiliki isIntercepting, jadi saya perlu memeriksa intersectionRatio > 0 juga. Menurut spesifikasinya, seharusnya sama dengan isIntersecting.

Mengapa menggunakan IntersectionObserver

• Di masa lalu, untuk melakukan tindakan yang sama, kita bisa menggunakan event level dokumen scroll dan resize. Tapi mendengarkannya bisa jadi sangat mahal jika Anda akhirnya menjalankan banyak perhitungan pada mereka. Saya sarankan Anda menghindari menggunakannya.
• IntersectionObserver menjadi alternatif standar bagi mereka, tidak memerlukan perpustakaan dan memiliki API yang baik dan deklaratif.
• Jika Anda tidak mengamati perubahan apa pun, cukup disconnect saja. Tidak perlu mendengarkan sepanjang waktu (Dalam kasus penggunaan kami, tidak perlu terus mendengarkan persimpangan gambar setelah dimuat, jadi kami memutuskant mereka segera setelah) .
• Sebagian besar browser modern mendukung Intersection Observer, yang merupakan pertanda baik.

Metrik Akhir

Kami memuat begitu banyak gambar di luar layar, yang tidak diperlukan untuk pemuatan pertama di halaman kami. Ini mengurangi muatan sebesar 793 KB (4,450ms). Cukup mengesankan bukan? 😱

Sebelumnya, ada 66 permintaan gambar dari beranda, yang merupakan jumlah yang sangat besar, melebihi apa pun. Sekarang ada 21, tidak banyak jika kita bandingkan.

Payload permintaan konten adalah peningkatan besar di sini, seperti yang Anda lihat, tetapi ada banyak hal penting lainnya yang perlu diperhatikan di sini:

• Waktu memuat berkurang dari 4.104s menjadi 3.543s .
• Mulai render turun dari 1.579s menjadi 1.080s .
• Indeks kecepatan ditandai 4018 dan sekarang menjadi 2801 .
• Dan pemuatan selesai pada 4.104s dan sekarang 3.743s .

Apa yang bisa kita lakukan selanjutnya?

Saat ini, kami memiliki banyak pekerjaan kinerja yang harus dilakukan, namun kami yakin bahwa menghapus gambar darinya, akan menjadi dorongan besar untuk meningkatkan hal ini.

Mari kita lihat pemuatan halaman

Seperti yang Anda lihat pada gambar di atas, waktu muat kita cukup lama di seluler. Jika dipikir-pikir, kami bekerja dengan sekitar 30 negara, beberapa di antaranya, bahkan tidak memiliki koneksi bandwidth yang memadai. Jumlah ini bisa menjadi lebih menakutkan ketika memuat halaman di negara-negara tersebut! dan tidak mungkin kita memisahkannya.

Kesimpulan

Menggunakan Intersection Observer sungguh luar biasa, dukungan browser layak untuk mulai menggunakannya dan dapat memberikan dorongan besar dalam meningkatkan waktu payload di halaman Anda.

Pantau terus pembaruannya! Dan ingat, kunjungi dan temukan artis dan acara favorit Anda di seluruh dunia di www.livenation.co.uk.