Pemuatan lambat gambar dan elemen <iframe>

Gambar dan elemen <iframe> sering kali mengonsumsi lebih banyak bandwidth dibandingkan jenis bandwidth lainnya Google Cloud Platform. Untuk elemen <iframe>, cukup banyak pemrosesan tambahan waktu yang diperlukan untuk memuat dan merender laman di dalamnya.

Dalam kasus pemuatan lambat gambar, penundaan pemuatan gambar yang di luar area pandang awal dapat membantu mengurangi pertentangan bandwidth untuk sumber daya yang lebih penting dalam area pandang awal. Hal ini dapat meningkatkan Largest Contentful Paint (LCP) halaman dalam beberapa kasus saat koneksi jaringan buruk, dan alokasi ulang bandwidth dapat membantu kandidat LCP memuat dan melukis lebih cepat.

Saat elemen <iframe> diperhatikan, Interaksi ke Gambar Berikutnya halaman (INP) dapat ditingkatkan selama startup dengan pemuatan lambat. Hal ini karena <iframe> adalah dokumen HTML yang sepenuhnya terpisah dengan subresource-nya sendiri. Meskipun elemen <iframe> dapat dijalankan dalam proses terpisah, hal ini wajar untuk berbagi proses dengan thread lain, yang dapat membuat kondisi di mana halaman menjadi kurang responsif terhadap input pengguna.

Jadi, menunda pemuatan gambar di luar layar dan elemen <iframe> adalah teknik yang layak untuk diikuti, dan membutuhkan upaya yang cukup rendah untuk laba dalam hal kinerja. Modul ini membahas penjelasan tentang pemuatan lambat dua jenis elemen untuk pengalaman pengguna yang lebih cepat dan lebih baik periode startup kritis.

Gambar pemuatan lambat dengan atribut loading

Atribut loading dapat ditambahkan ke elemen <img> untuk memberi tahu browser cara parameter tersebut harus dimuat:

• "eager" memberi tahu browser bahwa gambar akan segera dimuat, meskipun berada di luar area pandang awal. Ini juga merupakan nilai {i>default<i} untuk atribut loading.
• "lazy" menunda pemuatan gambar hingga berada dalam jarak yang ditentukan dari area pandang yang terlihat. Jarak ini bervariasi menurut browser, tetapi sering kali ditetapkan menjadi cukup besar sehingga gambar dimuat saat pengguna men-scroll ke gambar tersebut.

Perlu diperhatikan juga bahwa jika Anda menggunakan elemen <picture>, Atribut loading harus tetap diterapkan ke elemen <img> turunannya, bukan elemen <picture> itu sendiri. Hal ini karena elemen <picture> adalah penampung yang berisi elemen <source> tambahan yang mengarah ke berbagai kandidat gambar, dan kandidat yang dipilih browser akan diterapkan secara langsung ke elemen <img> turunannya.

Jangan muat gambar yang ada di area pandang awal dengan lambat

Anda hanya boleh menambahkan atribut loading="lazy" ke elemen <img> yang diletakkan di luar area pandang awal. Namun, mengetahui dasar dari posisi presisi suatu elemen relatif dalam area pandang sebelum halaman dirender. Ukuran area pandang, rasio aspek, dan perangkat yang berbeda harus dipertimbangkan.

Misalnya, area pandang desktop bisa sangat berbeda dari area pandang pada karena menyediakan lebih banyak ruang vertikal yang mungkin sesuai dengan gambar di area pandang awal yang tidak akan muncul di area pandang awal perangkat yang lebih kecil secara fisik. Tablet yang digunakan dalam orientasi potret juga ditampilkan ruang vertikal yang cukup besar, bahkan mungkin lebih banyak dibandingkan beberapa {i>desktop<i} perangkat.

Namun, ada beberapa kasus di mana cukup jelas bahwa Anda harus menghindari menerapkan loading="lazy". Contohnya, Anda harus menghilangkan Atribut loading="lazy" dari elemen <img> dalam kasus banner besar, atau kasus penggunaan gambar lainnya di mana elemen <img> cenderung muncul di atas lipat, atau di dekat bagian atas tata letak pada perangkat apa pun. Hal ini jauh lebih penting untuk gambar yang cenderung menjadi kandidat LCP.

Gambar yang lambat dimuat harus menunggu browser menyelesaikan tata letak untuk mengetahui apakah posisi akhir gambar berada di dalam area pandang. Artinya bahwa jika elemen <img> di area pandang yang terlihat memiliki loading="lazy" ini hanya diminta setelah semua CSS didownload, diuraikan, dan diterapkan ke halaman—bukan diambil segera setelah ditemukan oleh pemindai pramuat di markup mentah.

Karena atribut loading pada elemen <img> didukung di semua elemen utama browser tidak perlu menggunakan JavaScript untuk memuat gambar dengan lambat, karena menambahkan JavaScript tambahan ke halaman untuk memberikan kemampuan yang sudah disediakan oleh browser memengaruhi aspek lain dari performa halaman, seperti INP.

Demo pemuatan lambat gambar

Elemen <iframe> pemuatan lambat

Pemuatan lambat elemen <iframe> hingga terlihat di area tampilan dapat disimpan data yang signifikan dan meningkatkan pemuatan sumber daya penting yang diperlukan untuk halaman tingkat atas yang dapat dimuat. Selain itu, karena elemen <iframe> pada dasarnya seluruh dokumen HTML yang dimuat dalam dokumen tingkat atas, mereka dapat menyertakan jumlah subresource yang signifikan—terutama JavaScript—yang dapat sangat memengaruhi INP halaman jika tugas dalam {i>frame<i} tersebut membutuhkan waktu pemrosesan yang signifikan.

Penyematan pihak ketiga adalah kasus penggunaan umum untuk elemen <iframe>. Misalnya, pemutar video atau postingan media sosial yang disematkan biasanya menggunakan elemen <iframe>, dan sering kali membutuhkan jumlah sub-sumber daya yang signifikan yang juga mengakibatkan pertentangan bandwidth untuk sumber daya halaman tingkat atas. Sebagai seorang Misalnya, pemuatan lambat sematan video YouTube menghemat lebih dari 500 KiB selama pemuatan halaman awal, sambil menjalankan lambat saat memuat plugin tombol Like Facebook menghemat lebih dari 200 KiB—yang sebagian besar adalah JavaScript.

Apa pun itu, setiap kali memiliki <iframe> di paruh bawah halaman, Anda harus pertimbangkan untuk menjalankan pemuatan lambat jika tidak penting untuk memuatnya di awal, melakukannya dapat meningkatkan pengalaman pengguna secara signifikan.

Atribut loading untuk elemen <iframe>

Atribut loading pada elemen <iframe> juga didukung di semua elemen utama browser. Nilai untuk atribut loading dan perilakunya adalah sama seperti elemen <img> yang menggunakan atribut loading:

• "eager" adalah nilai defaultnya. Fungsi ini memberi tahu browser untuk memuat <iframe> HTML elemen dan subsumber dayanya dengan segera.
• "lazy" menunda pemuatan HTML elemen <iframe> dan subresource-nya hingga berada dalam jarak yang telah ditentukan dari area pandang.

Demo pemuatan lambat iframe

Fasad

Daripada langsung memuat sematan saat halaman dimuat, Anda dapat memuatnya di permintaan pengguna sebagai respons terhadap interaksi pengguna. Hal ini dapat dilakukan dengan menampilkan gambar atau elemen HTML lain yang sesuai hingga pengguna berinteraksi dengannya. Setelah pengguna berinteraksi dengan elemen, Anda dapat menggantinya dengan sematan pihak ketiga. Teknik ini dikenal sebagai faade.

Kasus penggunaan umum untuk fasad adalah sematan video dari layanan pihak ketiga dengan sematan mungkin melibatkan pemuatan banyak tambahan dan berpotensi mahal subresource—seperti JavaScript—selain konten video itu sendiri. Dengan demikian sebuah kasus—kecuali jika ada kebutuhan yang sah agar video dapat diputar otomatis—sematan video mengharuskan pengguna berinteraksi dengan konten sebelum pemutaran dengan mengklik tombol.

Ini adalah kesempatan utama untuk menampilkan gambar statis yang secara visual mirip dengan penyematan video dan menghemat banyak {i>bandwidth<i} selama prosesnya. Setelah pengguna mengklik gambar, lalu gambar diganti dengan sematan <iframe> yang sebenarnya, yang memicu HTML elemen <iframe> pihak ketiga dan subresource-nya untuk memulai mengunduh.

Selain meningkatkan pemuatan halaman awal, keunggulan utama lainnya adalah jika pengguna tidak pernah memutar video, sumber daya yang dibutuhkan untuk menyampaikannya tidak pernah diunduh. Ini adalah pola yang baik, karena memastikan pengguna hanya mengunduh apa mereka benar-benar inginkan, tanpa membuat asumsi yang mungkin salah tentang kebutuhan pengguna.

Widget chat adalah kasus penggunaan lain yang sangat baik untuk teknik fasad. Paling sering widget chat mendownload JavaScript dalam jumlah besar yang dapat berdampak negatif memengaruhi pemuatan halaman dan responsivitas terhadap input pengguna. Seperti saat memuat apa pun, depan, biaya dikeluarkan pada saat pemuatan, tetapi dalam kasus widget chat, tidak setiap pengguna tidak pernah bermaksud untuk berinteraksi dengannya.

Di sisi lain, dengan fasad, dimungkinkan untuk menggantikan {i>Chat<i}" dengan tombol palsu. Setelah pengguna berinteraksi secara bermakna dengan —seperti mengarahkan kursor ke atasnya selama jangka waktu yang wajar, atau dengan sekali klik—widget chat yang berfungsi dan aktual ditempatkan pada sehingga pengguna memerlukannya.

Meskipun Anda dapat membuat fasad Anda sendiri, ada metode open source opsi yang tersedia untuk pihak ketiga yang lebih populer, seperti lite-youtube-embed untuk video YouTube, lite-vimeo-embed untuk video Vimeo, dan Reaksi Live Chat Loader untuk widget chat.

Library pemuatan lambat JavaScript

Jika Anda perlu memuat elemen <video> dengan lambat, gambar elemen <video> poster, gambar yang dimuat oleh properti background-image CSS, atau gambar lain yang tidak didukung Anda dapat melakukannya dengan solusi pemuatan lambat berbasis JavaScript, seperti lazysizes atau yall.js, karena pemuatan lambat jenis resource ini bukan tingkat browser.

Khususnya, memutar otomatis dan mengulang elemen <video> tanpa trek audio adalah alternatif yang jauh lebih efisien daripada menggunakan GIF animasi, yang dapat sering kali beberapa kali lebih besar daripada sumber daya video berupa visual yang setara {i>sandwich<i} itu. Meski begitu, video-video ini masih bisa signifikan dalam hal {i>bandwidth<i}, jadi pemuatan lambat adalah pengoptimalan tambahan yang bisa sangat membantu mengurangi pemborosan {i>bandwidth<i}.

Sebagian besar library ini bekerja menggunakan Intersection Observer API—dan juga Mutation Observer API jika HTML halaman berubah setelah pemuatan awal—untuk mengenali kapan elemen memasuki area pandang pengguna. Jika gambar terlihat—atau mendekati area pandang—maka library JavaScript menggantikan atribut non-standar, (sering kali data-src atau atribut serupa), dengan atribut yang benar, misalnya src.

Misalnya Anda memiliki video yang menggantikan animasi GIF, tetapi Anda ingin memuatnya dengan lambat dengan solusi JavaScript. Hal ini dapat dilakukan dengan yall.js dengan hal berikut pola markup:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Secara {i>default<i}, yall.js mengamati semua elemen HTML yang memenuhi syarat dengan "lazy". Setelah yall.js dimuat dan dieksekusi di halaman, video tidak dimuat hingga pengguna men-scroll-nya ke dalam area pandang. Pada saat itu, data-src atribut pada elemen <source> turunan elemen <video> ditukar ke atribut src, yang mengirimkan permintaan untuk mendownload video dan memutarnya secara otomatis.

Menguji pengetahuan Anda

Berikutnya: Pengambilan data dan pra-rendering

Setelah Anda memahami pemuatan lambat gambar dan elemen <iframe>, Anda berada dalam posisi yang baik untuk memastikan bahwa laman dapat dimuat lebih cepat saat kebutuhan pengguna Anda. Namun, ada kasus di mana pemuatan spekulatif dari sumber daya dapat diinginkan. Pada modul berikutnya, mempelajari pengambilan data dan pra-rendering, dan bagaimana teknik ini—saat digunakan dengan hati-hati—dapat mempercepat navigasi ke halaman berikutnya dengan memuat terlebih dahulu.