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 Isi
Lazy load adalah sebuah teknik untuk memuat gambar pada halaman web apabila elemen gambar tersebut berada didalam viewport.
Dengan menggunakan Lazy Load, Kamu dapat.
- Mempercepat load time suatu halaman web yang memiliki banyak elemen gambar.
- 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.
- Eager: merupakan nilai default dan gambar akan dimuat bersamaan dengan saat halaman web dimuat.
- 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
- https://www.jagoanhosting.com/blog/apa-itu-lazy-load/
- https://www.w3schools.com/tags/att_img_loading.asp
- https://web.dev/browser-level-image-lazy-loading/
ADVERTISEMENT
SUPPORT
Berikan supportmu kepada website https://www.rizki-ramadandi.com
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
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
16 April, 2023
5
View(s)
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
06 April, 2023
167
View(s)
Walktrough lengkap game Digimon World Bahasa Indonesia
15 Desember, 2023
109
View(s)
Daftar tanaman dan informasi seputar tanaman (musim tumbuh, harga beli benih, harga jual, dan waktu tumbuh) pada game Stardew Valley
08 April, 2024
58
View(s)
Walktrough lengkap game Final Fantasy Bahasa Indonesia
15 Desember, 2023
63
View(s)
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 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
37
View(s)
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 dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
22 Maret, 2024
12
View(s)
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 pada game Brotato
26 Maret, 2025
39
View(s)
Penjelasan karakter Builder pada game Brotato
23 Maret, 2025
47
View(s)
Penjelasan karakter Druid pada game Brotato
23 Maret, 2025
38
View(s)
Penjelasan karakter Chef pada game Brotato
08 Maret, 2025
49
View(s)
Penjelasan karakter Creature pada game Brotato
02 Maret, 2025
45
View(s)
Penjelasan karakter Captain pada game Brotato
24 Februari, 2025
52
View(s)
Penjelasan karakter Sailor pada game Brotato
18 Februari, 2025
51
View(s)
Penjelasan karakter Curious pada game Brotato
14 Februari, 2025
54
View(s)
Penjelasan karakter Vampire pada game Brotato
06 Februari, 2025
65
View(s)
Penjelasan karakter Technomage pada game Brotato
05 Februari, 2025
65
View(s)
KONTEN
LAINNYA
Blog
Koleksi blog random
Resource
Koleksi berbagai macam resource gratis
Tool
Koleksi online tools berbagai macam fungsi
Game
Koleksi berbagai macam game sederhana
Abbreviation
Koleksi abreviasi/singkatan