Pemuatan Malas Hibrida: Migrasi Progresif ke Pemuatan Malas Asli

Dalam beberapa minggu terakhir, Anda mungkin pernah mendengar atau membaca tentang pemuatan lambat bawaan, yang akan hadir di Chromium 75 dalam beberapa bulan mendatang.

"Ya, berita bagus, tapi kita harus menunggu sampai semua browser mendukungnya."

Jika ini adalah hal pertama yang terlintas dalam pikiran Anda, teruslah membaca. Saya akan mencoba dan meyakinkan Anda sebaliknya.

Mari kita mulai dengan perbandingan antara pemuatan lambat asli dan pemuatan berbasis JavaScript yang baik.

Pemuatan Malas Berbasis JavaScript Asli Versus

Pemuatan lambat adalah cara untuk meningkatkan kinerja situs web atau aplikasi web dengan memaksimalkan kecepatan rendering gambar paruh atas dan iframe (dan terkadang video) dengan menunda pemuatan konten paruh bawah.

Pemuatan Malas Berbasis JavaScript

Untuk memuat gambar atau iframe dengan lambat, adalah praktik yang sangat umum untuk menandainya dengan mengganti atribut src yang tepat dengan atribut data yang serupa, data-src , lalu mengandalkan solusi JavaScript untuk mendeteksi saat gambar/iframe mulai dekat dengan bagian situs web yang terlihat (biasanya karena pengguna menggulir ke bawah) dan menyalin atribut data ke atribut yang tepat, lalu memicu pemuatan konten yang ditangguhkan.

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

Pemuatan Malas Asli

Menurut spesifikasi pemuatan lambat asli (masih dalam pengembangan), jika Anda ingin memuat lambat gambar atau iframe menggunakan fitur pemuatan malas asli, Anda hanya perlu menambahkan atribut loading=lazy pada tag terkait.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmani banyak menulis tentang topik ini dalam artikelnya “Native Image Lazy-Loading For The Web!” di mana ia menyatakan bahwa tim Google Chrome sudah mengembangkan fitur tersebut dan berniat untuk mengirimkannya di Chrome 75.

Peramban berbasis Chromium lainnya seperti Opera dan Microsoft Edge juga akan mendapat manfaat dari pengembangan ini dengan mendapatkan fitur yang sama dalam pembaruan pertama mereka berdasarkan Chromium 75.

Memulai Dengan Native Lazy Loading

Jika gambar situs web Anda diunduh sekaligus di halaman landing tanpa lazy loading, Anda dapat mengaktifkan (jika didukung) native lazy loading di situs web Anda semudah menambahkan atribut HTML. Atribut loading memberi tahu browser gambar mana yang penting untuk segera dimuat, dan gambar mana yang dapat diunduh dengan malas saat pengguna menggulir ke bawah. Atribut yang sama dapat diterapkan ke iframe.

Untuk memberi tahu browser bahwa gambar tertentu penting sehingga mereka dapat memuatnya sesegera mungkin, Anda harus menambahkan atribut loading="eager" pada tag img . Praktik terbaik adalah melakukan ini untuk gambar utama — biasanya untuk gambar yang akan ditampilkan di paro atas.

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

Untuk memberi tahu browser bahwa gambar harus diunduh dengan malas, cukup tambahkan atribut loading="lazy" . Ini adalah praktik terbaik hanya jika Anda melakukannya hanya untuk gambar sekunder — biasanya untuk gambar yang akan ditampilkan di paro bawah.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Hanya dengan menambahkan atribut loading ke gambar dan iframe Anda, Anda akan memungkinkan situs web Anda menggunakan pemuatan lambat asli sebagai peningkatan progresif. Situs web Anda secara bertahap akan mendapat manfaat darinya saat dukungan datang kepada pengguna Anda di sebagian besar browser modern.

Ini adalah pendekatan terbaik untuk digunakan jika situs web Anda tidak menggunakan pemuatan lambat apa pun hari ini, tetapi jika Anda sudah menerapkan solusi pemuatan malas berbasis JavaScript, Anda mungkin ingin mempertahankannya sambil secara bertahap beralih ke pemuatan malas asli.

Solusi ideal adalah mulai menggunakan pemuatan lambat asli segera, dan menggunakan polyfill untuk membuatnya berfungsi di semua browser. Sayangnya, pemuatan malas asli bukanlah fitur yang dapat kami polifill dengan JavaScript.

Tidak Ada Penggunaan Untuk Polyfill

Ketika teknologi browser baru dirilis ke satu browser, komunitas sumber terbuka biasanya merilis polyfill JavaScript untuk menyediakan teknologi yang sama ke browser lainnya. Misalnya, polyfill IntersectionObserver menggunakan elemen JavaScript dan DOM untuk mengoordinasikan Element.getBoundingClientRect() untuk mereproduksi perilaku API asli.

Tetapi kasus pemuatan lambat asli berbeda karena polifill JavaScript untuk loading="lazy" harus mencegah browser memuat konten segera setelah mereka menemukan URL di markup gambar atau iframe. JavaScript tidak memiliki kontrol pada tahap awal rendering halaman ini, oleh karena itu tidak mungkin untuk melakukan polyfill pemuatan lambat asli.

Pemuatan Malas Hibrida

Jika Anda tidak puas dengan pemuatan lambat asli hanya sebagai peningkatan progresif, atau Anda telah menerapkan pemuatan malas berbasis JavaScript dan tidak ingin kehilangan fitur ini di browser yang kurang modern (tetapi masih ingin mengaktifkan pemuatan malas asli di browser yang mendukungnya), maka Anda memerlukan solusi yang berbeda. Memperkenalkan: pemuatan malas hibrida.

Pemuatan malas hibrida adalah teknik untuk menggunakan pemuatan malas asli pada browser yang mendukungnya, jika tidak, andalkan JavaScript untuk menangani pemuatan malas.

“

Untuk melakukan hybrid lazy loading, Anda perlu menandai konten lazy Anda menggunakan atribut data alih-alih yang asli (seperti pada lazy loading yang digerakkan oleh JavaScript), dan menambahkan atribut loading="lazy" .

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

Maka Anda memerlukan beberapa JavaScript. Pertama-tama, Anda perlu mendeteksi apakah pemuatan lambat asli didukung oleh browser atau tidak . Kemudian, lakukan salah satu hal berikut untuk setiap elemen dengan atribut loading="lazy" :

• Jika pemuatan lambat asli didukung, salin nilai atribut data-src ke atribut src ;
• Jika tidak didukung, inisialisasi skrip atau plugin pemuatan lambat JavaScript untuk melakukannya saat elemen memasuki area pandang.

Tidak terlalu sulit untuk menulis kode JavaScript yang diperlukan untuk melakukan operasi ini sendiri. Anda dapat mendeteksi apakah pemuatan lambat asli didukung dengan kondisi:

 if ('loading' in HTMLImageElement.prototype)

Jika ya, cukup salin nilai atribut src dari data-src . Jika tidak, inisialisasi beberapa skrip pemuatan lambat pilihan Anda.

Berikut cuplikan kode yang melakukan itu.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

Anda dapat menemukan dan menguji kode di atas dalam demo langsung ini.

Namun, itu adalah skrip yang sangat mendasar, dan segalanya bisa menjadi rumit saat Anda menggunakan atribut atau tag tambahan untuk mendapatkan gambar yang responsif (seperti atribut srcset dan sizes atau bahkan tag picture dan source ).

Sedikit Bantuan Pihak Ketiga

Selama empat tahun terakhir, saya telah memelihara skrip pemuatan malas sumber terbuka bernama " vanilla-lazyload " dan, dalam beberapa hari setelah Addy Osmani menulis tentang pemuatan malas asli, komunitas bereaksi dengan menanyakan apakah skrip saya bisa bertindak sebagai polifill.

Seperti yang saya jelaskan sebelumnya, Anda tidak dapat membuat polyfill untuk fitur pemuatan lambat asli, namun, saya memikirkan solusi yang akan memudahkan pengembang untuk memulai transisi ke pemuatan malas asli, tanpa perlu menulis kode JavaScript apa pun yang sudah saya sebutkan sebelumnya.

Mulai dari versi 12 vanilla-lazyload , Anda cukup menyetel opsi use_native ke true untuk mengaktifkan pemuatan malas hybrid. Script hanya 2.0 kB gzip dan sudah tersedia di GitHub, npm, dan jsDelivr.

• Kenali vanilla-lazyload di GitHub

Demo

Anda dapat mulai bermain-main dengan pemuatan malas asli hari ini dengan mengunduh Chrome Canary atau Microsoft Edge Insider ( saluran dev ) lalu mengaktifkan tanda "Aktifkan pemuatan gambar malas" dan "Aktifkan pemuatan bingkai malas". Untuk mengaktifkan tanda ini, masukkan about:flags di bidang URL browser Anda dan cari "malas" di kotak pencarian.

Demo Pemuatan Malas Asli

Untuk menganalisis cara kerja pemuatan lambat asli di alat pengembang, Anda dapat mulai bermain dengan demo berikut. Dalam hal ini, tidak ada satu baris pun JavaScript yang digunakan . Ya, itu hanya pemuatan malas asli biasa.

• Uji demo pemuatan malas asli

Apa yang diharapkan : Semua gambar diambil sekaligus, tetapi dengan respons HTTP yang berbeda. Yang dengan kode respons 200 adalah gambar yang dimuat dengan penuh semangat, sedangkan yang dengan kode respons 206 hanya diambil sebagian untuk mendapatkan informasi awal tentang gambar. Gambar-gambar itu kemudian akan diambil sepenuhnya dengan kode respons 200 saat Anda menggulir ke bawah.

Demo Pemuatan Malas Hibrida

Untuk menganalisis cara kerja pemuatan malas hibrida, Anda dapat mulai bermain dengan demo berikutnya. Di sini, [email protected] digunakan dan opsi use_native disetel ke true :

• Uji demo pemuatan malas hibrida

Apa yang diharapkan : Coba demo di browser yang berbeda untuk melihat bagaimana perilakunya. Pada browser yang mendukung pemuatan lambat asli, perilakunya akan sama seperti pada demo pemuatan malas asli. Pada browser yang tidak mendukung pemuatan lambat asli, gambar akan diunduh saat Anda menggulir ke bawah.

Harap dicatat bahwa vanilla-lazyload menggunakan API IntersectionObserver di bawah tenda, jadi Anda perlu polifill di Internet Explorer dan versi Safari yang lebih baru. Ini bukan masalah besar jika polyfill tidak disediakan, karena dalam kasus itu vanilla-lazyload hanya akan mengunduh semua gambar sekaligus.

Catatan : Baca lebih lanjut di bab “Untuk Polyfill Atau Tidak Untuk Polyfill” dari file readme vanilla-lazyload .

Coba Pemuatan Malas Hybrid Di Situs Web Anda

Karena pemuatan malas asli akan segera hadir di beberapa browser, mengapa Anda tidak memberikannya kesempatan hari ini menggunakan pemuatan malas hibrida? Inilah yang perlu Anda lakukan:

Markup HTML

Markup gambar paling sederhana dibuat oleh dua atribut: src dan alt .

Untuk gambar paruh atas, Anda harus meninggalkan atribut src dan menambahkan atribut loading="eager" .

 <img src="important.jpg" loading="eager" alt="Important image">

Untuk gambar paruh bawah, Anda harus mengganti atribut src dengan atribut data data-src dan menambahkan atribut loading="lazy" .

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

Jika Anda ingin menggunakan gambar responsif, lakukan hal yang sama dengan atribut srcset dan sizes .

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

Jika Anda lebih suka menggunakan tag picture , ubah srcset , sizes dan src juga di tag source .

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

Tag picture juga dapat digunakan untuk memuat format WebP secara selektif untuk gambar Anda.

Catatan : Jika Anda ingin mengetahui lebih banyak penggunaan vanilla-lazyload , silakan baca bagian HTML "Memulai" dari file readme-nya.

Kode JavaScript

Pertama-tama, Anda perlu menyertakan vanilla-lazyload di situs web Anda.

Anda dapat memuatnya dari CDN seperti jsDelivr:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Atau Anda dapat menginstalnya menggunakan npm:

 npm install vanilla-lazyload@12

Anda juga dapat menggunakan skrip async dengan inisialisasi otomatis; muat sebagai modul ES menggunakan type="module" atau muat sebagai AMD menggunakan RequireJS. Temukan lebih banyak cara untuk memasukkan dan menggunakan vanilla-lazyload di bagian skrip "Memulai" dari file readme.

Kemudian, dalam kode JavaScript situs web/aplikasi web Anda, sertakan yang berikut ini:

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

Catatan : Skrip memiliki banyak pengaturan lain yang dapat Anda gunakan untuk menyesuaikan perilaku vanilla-lazyload , misalnya untuk menambah jarak area pengguliran dari mana untuk mulai memuat elemen atau untuk memuat elemen hanya jika mereka tetap berada di viewport selama beberapa waktu. waktu yang diberikan. Temukan pengaturan lainnya di bagian API dari file readme.

Semua Bersama, Menggunakan Script async

Untuk menggabungkan semuanya dan menggunakan skrip async untuk memaksimalkan kinerja, silakan merujuk ke kode HTML dan JavaScript berikut:

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Itu dia! Dengan langkah-langkah yang sangat sederhana dan mudah ini, Anda telah mengaktifkan pemuatan malas hibrid di situs web Anda!

Praktik Terbaik Penting

• Terapkan lazy loading hanya pada gambar yang Anda tahu yang mungkin akan ditampilkan di paro bawah. Muat yang di paro atas dengan penuh semangat untuk memaksimalkan kinerja. Jika Anda hanya menerapkan pemuatan lambat ke semua gambar di halaman Anda, Anda akan memperlambat kinerja rendering.
• Gunakan CSS untuk memesan ruang untuk gambar sebelum dimuat. Dengan begitu, mereka akan mendorong sisa konten di bawah. Jika Anda tidak melakukannya, lebih banyak gambar akan ditempatkan di paro atas sebelum seharusnya, memicu unduhan langsung untuk gambar tersebut. Jika Anda memerlukan trik CSS untuk melakukannya, Anda dapat menemukannya di bagian tips dan trik readme dari vanilla-lazyload .

Pro dan kontra

Membungkus

Saya sangat senang bahwa pemuatan lambat asli akan hadir di browser, dan saya tidak sabar menunggu semua vendor browser menerapkannya!

Sementara itu, Anda dapat memilih untuk memperkaya markup HTML Anda untuk peningkatan progresif dan mendapatkan pemuatan lambat asli hanya jika didukung, atau Anda dapat menggunakan pemuatan malas hibrida dan mendapatkan pemuatan malas bawaan dan berbasis JavaScript hingga hari pemuatan malas asli akan didukung oleh sebagian besar browser.

Cobalah! Jangan lupa untuk membintangi/menonton vanilla-lazyload di GitHub, dan beri tahu saya pendapat Anda di bagian komentar.

Bacaan Lebih Lanjut tentang SmashingMag:

• Sekarang Anda Melihat Saya: Cara Menunda, Memuat Malas, dan Bertindak Dengan IntersectionObserver
• Malas Memuat Modul JavaScript Dengan ConditionerJS
• Daftar Periksa Kinerja Front-End 2019 (PDF, Apple Pages, MS Word)
• Bagaimana Meningkatkan Kinerja Situs Web Dapat Membantu Menyelamatkan Bumi