Lazy Load Images (iframe) berarti “ memuat gambar di website menjadi tidak sinkron, dalam artian setelah konten bagian atas sepenuhnya dimuat, maka gambar tidak akan dimuat. Bisa dikatakan jika pengguna tidak melakukan scroll sepenuhnya ke bawah, maka gambar yang ditempatkan di bagian bawah halaman tidak akan pernah dimuat.” Sitepoint

Ini adalah teknik yang sangat keren yang dapat mempercepat jalannya situs berkali-kali lipat!

Mau tahu caranya?? Tentu saja dengan menggunakan plugin WordPress ☺

Pilihannya fiturnya cukup banyak, dari solusi individual sampai fitur optimasi performa:
● Autoptimize (images & iframes)
● SmushIt – (images only)
● Flying Images(images only)
● WpRocket (gambar & iframe)
● Swift Performance Pro (gambar & iframe)

Lima Cara untuk Malas Memuat Gambar untuk Performa Situs Web yang Lebih Baik

Website dengan gambar menjadi salah satu jenis konten paling populer di web, namun waktu untuk membuka halaman di situs web dapat dengan mudah menjadi masalah besar.

Fakta: 40% orang meninggalkan situs web yang membutuhkan waktu lebih dari 3 detik untuk memuat.

Ini dapat berdampak negatif pada waktu pengunjung harus menunggu sebelum mereka dapat mengakses konten di situs web Anda. Kemungkinannya adalah, mereka menjadi tidak sabar dan menavigasi ke tempat lain, kecuali Anda menemukan solusi untuk memuat gambar yang tidak mengganggu persepsi kecepatan.

Jika dioptimalkan dengan benar, lazy load dapat menjadi solusi masalah ini. 

Dalam artikel ini, Anda akan mempelajari tentang lima pendekatan gambar pemuatan lambat yang dapat Anda tambahkan ke perangkat pengoptimalan web untuk meningkatkan pengalaman pengguna di situs web Anda.

Apa Itu Lazy Load?

Gambar yang lambat dimuat berarti memuat gambar di situs web secara asinkronis – yaitu, setelah konten paruh atas dimuat sepenuhnya, atau bahkan bersyarat, hanya ketika gambar tersebut muncul di area pandang browser. Artinya, jika pengguna tidak menggulir sepenuhnya ke bawah, gambar yang ditempatkan di bagian bawah halaman bahkan tidak akan dimuat.

Sejumlah situs web menggunakan pendekatan ini, tetapi ini terutama terlihat di situs dengan banyak gambar. Coba jelajahi tempat berburu online favorit Anda untuk mendapatkan foto beresolusi tinggi, dan Anda akan segera menyadari bagaimana situs web memuat gambar dalam jumlah terbatas. Saat Anda menggulir ke bawah halaman, Anda akan melihat gambar placeholder dengan cepat terisi dengan gambar nyata untuk pratinjau. Misalnya, perhatikan loader di Unsplash.com : menggulir bagian halaman tersebut ke tampilan memicu penggantian placeholder dengan foto resolusi lengkap:

Mengapa Anda Harus Peduli Tentang Pemuatan Gambar yang Lambat?

Setidaknya ada beberapa alasan bagus mengapa Anda harus mempertimbangkan gambar pemuatan lambat untuk situs web Anda:

• Jika situs web Anda menggunakan JavaScript untuk menampilkan konten atau menyediakan beberapa jenis fungsi kepada pengguna, memuat DOM dengan cepat menjadi penting. Biasanya skrip menunggu hingga DOM dimuat sepenuhnya sebelum mulai berjalan. Di situs dengan jumlah gambar yang signifikan, pemuatan lambat – atau memuat gambar secara asinkron – dapat membuat perbedaan antara pengguna yang tetap tinggal atau meninggalkan situs Anda.
  
• Karena sebagian besar solusi pemuatan lambat bekerja dengan memuat gambar hanya jika pengguna telah men-scroll ke lokasi tempat gambar akan terlihat di dalam viewport, gambar tersebut tidak akan pernah dimuat jika pengguna tidak pernah sampai ke titik itu. Ini berarti penghematan bandwidth yang cukup besar, di mana sebagian besar pengguna, terutama yang mengakses Web di perangkat seluler dan koneksi lambat, akan berterima kasih kepada Anda.

Nah, gambar pemuatan lambat membantu kinerja situs web, tetapi apa cara terbaik untuk melakukannya?

Tidak ada cara yang sempurna.

Jika Anda menjalankan dan menghirup JavaScript, mengimplementasikan solusi pemuatan lambat Anda sendiri seharusnya tidak menjadi masalah. Tidak ada yang memberi Anda kontrol lebih daripada membuat kode sendiri.

Atau, Anda dapat menjelajahi Web untuk pendekatan yang layak dan mulai bereksperimen dengannya. Saya melakukan itu dan menemukan lima teknik menarik ini.

# 1 Pemuatan Lambat Asli

Pemuatan lambat asli gambar dan iframe sangat keren. Tidak ada yang lebih mudah daripada markup di bawah ini:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

Seperti yang Anda lihat, tidak ada JavaScript, tidak ada pertukaran dinamis dari nilai srcatribut, hanya HTML lama biasa.

The loadingatribut memberi kita pilihan untuk menunda off-layar gambar dan iframe sampai pengguna gulir ke lokasi mereka pada halaman. loadingdapat mengambil salah satu dari tiga nilai berikut:

• lazy: berfungsi baik untuk pemuatan lambat
• eager: menginstruksikan browser untuk memuat konten yang ditentukan segera
• auto: membiarkan opsi untuk memuat lambat atau tidak memuat lambat ke browser.

Metode ini tidak memiliki saingan: tidak memiliki overhead, bersih dan sederhana. Namun, meskipun pada saat penulisan sebagian besar browser utama memiliki dukungan yang baik untuk loadingatribut tersebut , belum semua browser terpasang.

Untuk artikel mendalam tentang fitur mengagumkan ini untuk gambar yang lambat dimuat, termasuk solusi dukungan browser, jangan lewatkan ” Gambar asli pemuatan lambat untuk web ” dari Addy Osmani ! “.

# 2 Pemuatan Lambat Menggunakan Intersection Observer API

The Intersection Observer API adalah antarmuka modern yang Anda dapat manfaatkan untuk loading lambat gambar dan konten lainnya.

Berikut cara MDN memperkenalkan API ini:

Tingkatkan kinerja CSS Anda

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

Dengan kata lain, apa yang diamati secara asinkron adalah perpotongan satu elemen dengan elemen lainnya.

Denys Mishunov memiliki tutorial bagus tentang Intersection Observer dan gambar pemuatan lambat menggunakannya. Inilah solusinya.

Katakanlah Anda ingin malas memuat galeri gambar. Markup untuk setiap gambar akan terlihat seperti ini:

<img data-src="image.jpg" alt="test image">

Perhatikan bagaimana jalur ke gambar berada di dalam data-srcatribut, bukan srcatribut. Alasannya adalah karena menggunakan srccara gambar akan langsung dimuat, yang bukan itu yang Anda inginkan.

Di CSS, Anda memberi nilai pada setiap gambar min-height, katakanlah 100px. Ini memberi setiap placeholder gambar (elemen img tanpa atribut src) dimensi vertikal:

img {
  min-height: 100px;
  /* more styles here */
}

Dalam dokumen JavaScript, Anda kemudian membuat configobjek dan mendaftarkannya dengan sebuah intersectionObservercontoh:

// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
  // iterate over each entry
  entries.forEach(entry => {
    // process just the images that are intersecting.
    // isIntersecting is a property exposed by the interface
    if(entry.isIntersecting) {
      // custom function that copies the path to the img
      // from data-src to src
      preloadImage(entry.target);
      // the image is now in place, stop watching
      self.unobserve(entry.target);
    }
  });
}, config);

Terakhir, Anda mengulang semua gambar Anda dan menambahkannya ke iterationObservercontoh ini :

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});

Manfaat dari solusi ini: mudah untuk diterapkan, efektif, dan intersectionObservermelakukan pekerjaan berat dalam hal perhitungan.

Di sisi lain, meskipun Intersection Observer API didukung oleh sebagian besar browser dalam versi terbaru mereka, itu tidak secara konsisten didukung oleh semuanya . Untungnya, polyfill tersedia .

Anda dapat mempelajari lebih lanjut tentang Intersection Observer API dan detail implementasi ini di artikel Denys .

# 3 Lozad.js

Alternatif cepat dan mudah untuk mengimplementasikan pemuatan lambat gambar adalah dengan membiarkan pustaka JS melakukan sebagian besar pekerjaan untuk Anda.

Lozad adalah pemuat malas yang berkinerja tinggi, ringan, dan dapat dikonfigurasi dalam JavaScript murni tanpa ketergantungan. Anda dapat menggunakannya untuk memuat gambar, video, iframe, dan lainnya secara lambat, dan menggunakan Intersection Observer API.

Anda dapat menyertakan Lozad dengan npm / Yarn dan mengimpornya menggunakan bundler modul pilihan Anda:

npm install --save lozad

yarn add lozad

import lozad from 'lozad';

Atau, Anda cukup mengunduh pustaka menggunakan CDN dan menambahkannya ke bagian bawah halaman HTML di < script>tag:

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Selanjutnya, untuk implementasi dasar, tambahkan lozad kelas ke aset di markup Anda:

<img class="lozad" data-src="img.jpg">

Terakhir, buat instance Lozad di dokumen JS Anda:

const observer = lozad();
observer.observe();

Jika Anda tidak ingin menyelami cara kerja Intersection Observer API atau Anda hanya mencari implementasi cepat yang berlaku untuk berbagai tipe konten, Lozad adalah pilihan yang tepat.

Hanya saja, perhatikan dukungan browser dan akhirnya integrasikan pustaka ini dengan polyfill untuk Intersection Observer API.

# 4 Pemuatan Malas dengan Efek Gambar Buram

Jika Anda seorang pembaca Medium , Anda pasti telah memperhatikan bagaimana situs memuat gambar utama di dalam sebuah posting.

Hal pertama yang Anda lihat adalah salinan gambar yang buram dan beresolusi rendah, sementara versi resolusi tinggi sedang dimuat dengan lambat:

Anda dapat memuat gambar secara lambat dengan efek pemburaman yang menarik ini dalam beberapa cara.

Teknik favorit saya adalah oleh Craig Buckler. Inilah semua kebaikan dari solusi ini:

• Kinerja: hanya 463 byte CSS dan 1.007 byte kode JavaScript yang diperkecil
• Dukungan untuk layar retina
• Bebas ketergantungan: tidak diperlukan jQuery atau pustaka dan kerangka kerja lain
• Secara progresif ditingkatkan untuk melawan browser lama dan JavaScript yang gagal

Anda dapat membaca semua tentangnya di Cara Membangun Pemuat Gambar Progresif Anda Sendiri dan mengunduh kode di repo GitHub proyek .

# 5 Yall.js

Yall adalah skrip pemuatan lambat yang penuh fitur untuk gambar, video, dan iframe. Lebih khusus lagi, ini menggunakan Intersection Observer API dan secara cerdas kembali ke teknik penanganan kejadian tradisional jika diperlukan.

Saat menyertakan Yall dalam dokumen Anda, Anda perlu memulainya sebagai berikut:

<script src="yall.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", yall);
</script>

Selanjutnya, untuk lazy memuat imgelemen sederhana , yang perlu Anda lakukan di markup adalah:

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

Perhatikan hal-hal berikut:

• Anda menambahkan kelas malas ke elemen
• nilai dari srcadalah gambar placeholder
• jalur ke gambar yang Anda inginkan untuk memuat lambat berada di dalam data-srcatribut

Di antara manfaat Yall adalah:

• kinerja hebat dengan Intersection Observer API
• dukungan browser yang fantastis (kembali ke IE11)
• tidak ada ketergantungan lain yang diperlukan

Untuk mempelajari lebih lanjut tentang apa yang dapat Anda tawarkan dan untuk implementasi yang lebih kompleks, silakan lihat halaman berikutnya.

Kesimpulan

Demikianlah lima cara pemuatan lambat gambar (lazy load) yang dapat Anda mulai uji coba dalam proyek Anda.

Masih butuh bantuan?

YA. Bantu Saya Pasangkan.

Tools yang digunakan	Pendalaman Materi
– WordPress	– Cukup jelas