cover image for Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web

Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web

Tutorial penerapan atribut lazy pada elemen gambar HTML untuk mempersingkat load time page

Rizki Ramadandi
Penulis
8
View(s)
{{ readingTime }}
Waktu baca
11 Maret, 2022
Tanggal publikasi
29 Maret, 2023
Tanggal sunting terakhir
Daftar Blog Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web

Lazy load adalah sebuah teknik untuk memuat gambar pada halaman web apabila elemen gambar tersebut berada didalam viewport.


Dengan menggunakan Lazy Load, Kamu dapat.

  1. Mempercepat load time suatu halaman web yang memiliki banyak elemen gambar.
  2. Menghemat resource dan bandwidth server.


Penerapan Native Lazy Load

Penerapan native lazy load pada HTML sangatlah sederhana, kamu hanya perlu menambahkan sebuah atribut "loading".


Contoh penggunaan native lazy load:

<img src="/imagepath.jpg" loading="lazy">


Selain lazy, nilai-nilai yang dapat diterima oleh atribut loading adalah sebagai berikut.

  1. Eager: merupakan nilai default dan gambar akan dimuat bersamaan dengan saat halaman web dimuat.
  2. Lazy: gambar akan dimuat hanya saat elemen gambar berada didalam viewport.


Cara mendeteksi apakah browser yang digunakan support Native Lazy Load

Atribut loading ini baru kompatibel untuk beberapa browser saja, seperti Google Chrome, Microsoft Edge, Opera, dan Mozilla Firefox.


Maka dari itu, untuk mendeteksi apakah browser yang dipakai oleh pengguna support atribut loading adalah dengan cara berikut.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}


ADVERTISEMENT

Referensi

ADVERTISEMENT

SUPPORT

Berikan supportmu kepada website https://www.rizki-ramadandi.com
Share this blog
Support me on
ADVERTISEMENT

BLOG YANG MIRIP

Beberapa blog yang mirip dengan blog Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
Walktrough lengkap game Digimon World Bahasa Indonesia
Daftar tanaman dan informasi seputar tanaman (musim tumbuh, harga beli benih, harga jual, dan waktu tumbuh) pada game Stardew Valley
Walktrough lengkap game Final Fantasy Bahasa Indonesia
Daftar kupon atau kode gratis yang bisa kamu redeem untuk mendapatkan berbagai macam hadiah pada game Idle Moon Rabbit: AFK RPG
Daftar tanaman dan informasi seputar tanaman (musim tumbuh, harga beli benih, harga jual, dan waktu tumbuh tanaman) pada game Innocent Life: A Futuristic Harvest Moon
Daftar guild key quest dan urgent quest yang diperlukan untuk menaikkan HR pada game Monster Hunter Portable 3rd
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis
ADVERTISEMENT
Kata kunci: tutorial, penerapan, atribut, elemen, gambar, html, mempersingkat, time, menerapkan, native, lazy, load, mempercepat, memuat, halaman, web, tutorial penerapan, penerapan atribut, atribut lazy, lazy pada, pada elemen, elemen gambar, gambar html, html untuk, untuk mempersingkat, mempersingkat load, load time, time page, menerapkan native, native lazy, lazy load, load untuk, untuk mempercepat, mempercepat waktu, waktu memuat, memuat halaman, halaman web, tutorial penerapan atribut, penerapan atribut lazy, atribut lazy pada, lazy pada elemen, pada elemen gambar, elemen gambar html, gambar html untuk, html untuk mempersingkat, untuk mempersingkat load, mempersingkat load time, load time page, menerapkan native lazy, native lazy load, lazy load untuk, load untuk mempercepat, untuk mempercepat waktu, mempercepat waktu memuat, waktu memuat halaman, memuat halaman web, tutorial penerapan atribut lazy, penerapan atribut lazy pada, atribut lazy pada elemen, lazy pada elemen gambar, pada elemen gambar html, elemen gambar html untuk, gambar html untuk mempersingkat, html untuk mempersingkat load, untuk mempersingkat load time, mempersingkat load time page, menerapkan native lazy load, native lazy load untuk, lazy load untuk mempercepat, load untuk mempercepat waktu, untuk mempercepat waktu memuat, mempercepat waktu memuat halaman, waktu memuat halaman web, tutorial penerapan atribut lazy pada, penerapan atribut lazy pada elemen, atribut lazy pada elemen gambar, lazy pada elemen gambar html, pada elemen gambar html untuk, elemen gambar html untuk mempersingkat, gambar html untuk mempersingkat load, html untuk mempersingkat load time, untuk mempersingkat load time page, menerapkan native lazy load untuk, native lazy load untuk mempercepat, lazy load untuk mempercepat waktu, load untuk mempercepat waktu memuat, untuk mempercepat waktu memuat halaman, mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen, penerapan atribut lazy pada elemen gambar, atribut lazy pada elemen gambar html, lazy pada elemen gambar html untuk, pada elemen gambar html untuk mempersingkat, elemen gambar html untuk mempersingkat load, gambar html untuk mempersingkat load time, html untuk mempersingkat load time page, menerapkan native lazy load untuk mempercepat, native lazy load untuk mempercepat waktu, lazy load untuk mempercepat waktu memuat, load untuk mempercepat waktu memuat halaman, untuk mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen gambar, penerapan atribut lazy pada elemen gambar html, atribut lazy pada elemen gambar html untuk, lazy pada elemen gambar html untuk mempersingkat, pada elemen gambar html untuk mempersingkat load, elemen gambar html untuk mempersingkat load time, gambar html untuk mempersingkat load time page, menerapkan native lazy load untuk mempercepat waktu, native lazy load untuk mempercepat waktu memuat, lazy load untuk mempercepat waktu memuat halaman, load untuk mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen gambar html, penerapan atribut lazy pada elemen gambar html untuk, atribut lazy pada elemen gambar html untuk mempersingkat, lazy pada elemen gambar html untuk mempersingkat load, pada elemen gambar html untuk mempersingkat load time, elemen gambar html untuk mempersingkat load time page, menerapkan native lazy load untuk mempercepat waktu memuat, native lazy load untuk mempercepat waktu memuat halaman, lazy load untuk mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen gambar html untuk, penerapan atribut lazy pada elemen gambar html untuk mempersingkat, atribut lazy pada elemen gambar html untuk mempersingkat load, lazy pada elemen gambar html untuk mempersingkat load time, pada elemen gambar html untuk mempersingkat load time page, menerapkan native lazy load untuk mempercepat waktu memuat halaman, native lazy load untuk mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen gambar html untuk mempersingkat, penerapan atribut lazy pada elemen gambar html untuk mempersingkat load, atribut lazy pada elemen gambar html untuk mempersingkat load time, lazy pada elemen gambar html untuk mempersingkat load time page, menerapkan native lazy load untuk mempercepat waktu memuat halaman web, tutorial penerapan atribut lazy pada elemen gambar html untuk mempersingkat load, penerapan atribut lazy pada elemen gambar html untuk mempersingkat load time, atribut lazy pada elemen gambar html untuk mempersingkat load time page, tutorial penerapan atribut lazy pada elemen gambar html untuk mempersingkat load time, penerapan atribut lazy pada elemen gambar html untuk mempersingkat load time page, tutorial penerapan atribut lazy pada elemen gambar html untuk mempersingkat load time page
KONTEN YANG MIRIP
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery cover image
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
16 April, 2023
5 View(s)
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap cover image
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
06 April, 2023
160 View(s)
Walkthrough Digimon World Bahasa Indonesia Lengkap cover image
Walktrough lengkap game Digimon World Bahasa Indonesia
15 Desember, 2023
105 View(s)
Daftar Harga Tanaman - Stardew Valley cover image
Daftar tanaman dan informasi seputar tanaman (musim tumbuh, harga beli benih, harga jual, dan waktu tumbuh) pada game Stardew Valley
08 April, 2024
52 View(s)
Walkthrough Final Fantasy Bahasa Indonesia Lengkap cover image
Walktrough lengkap game Final Fantasy Bahasa Indonesia
15 Desember, 2023
62 View(s)
Daftar Kupon Gratis Terbaru - Idle Moon Rabbit: AKF RPG (Juli 2023) cover image
Daftar kupon atau kode gratis yang bisa kamu redeem untuk mendapatkan berbagai macam hadiah pada game Idle Moon Rabbit: AFK RPG
01 Agustus, 2023
2 View(s)
Daftar Harga Tanaman - Innocent Life: A Futuristic Harvest Moon cover image
Daftar tanaman dan informasi seputar tanaman (musim tumbuh, harga beli benih, harga jual, dan waktu tumbuh tanaman) pada game Innocent Life: A Futuristic Harvest Moon
04 Juni, 2023
36 View(s)
Daftar Guild Key Quest dan Urgent Quest - Monster Hunter Portable 3rd cover image
Daftar guild key quest dan urgent quest yang diperlukan untuk menaikkan HR pada game Monster Hunter Portable 3rd
01 Juli, 2023
41 View(s)
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed cover image
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
22 Maret, 2024
10 View(s)
Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis cover image
Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis
01 Juli, 2023
10 View(s)
MUNGKIN KAMU JUGA SUKA
Penjelasan Karakter Dwarf - Brotato cover image
Penjelasan karakter Dwarf pada game Brotato
26 Maret, 2025
4 View(s)
Penjelasan Karakter Builder - Brotato cover image
Penjelasan karakter Builder pada game Brotato
23 Maret, 2025
8 View(s)
Penjelasan Karakter Druid - Brotato cover image
Penjelasan karakter Druid pada game Brotato
23 Maret, 2025
14 View(s)
Penjelasan Karakter Chef - Brotato cover image
Penjelasan karakter Chef pada game Brotato
08 Maret, 2025
24 View(s)
Penjelasan Karakter Creature - Brotato cover image
Penjelasan karakter Creature pada game Brotato
02 Maret, 2025
18 View(s)
Penjelasan Karakter Captain - Brotato cover image
Penjelasan karakter Captain pada game Brotato
24 Februari, 2025
29 View(s)
Penjelasan Karakter Sailor - Brotato cover image
Penjelasan karakter Sailor pada game Brotato
18 Februari, 2025
27 View(s)
Penjelasan Karakter Curious - Brotato cover image
Penjelasan karakter Curious pada game Brotato
14 Februari, 2025
29 View(s)
Penjelasan Karakter Vampire - Brotato cover image
Penjelasan karakter Vampire pada game Brotato
06 Februari, 2025
40 View(s)
Penjelasan Karakter Technomage - Brotato cover image
Penjelasan karakter Technomage pada game Brotato
05 Februari, 2025
41 View(s)
KONTEN LAINNYA
Lihat Blog
Blog
Koleksi blog random
Lihat Resource
Resource
Koleksi berbagai macam resource gratis
Lihat Tool
Tool
Koleksi online tools berbagai macam fungsi
Lihat Game
Game
Koleksi berbagai macam game sederhana
Lihat Abbreviation
Abbreviation
Koleksi abreviasi/singkatan