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
4
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
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
Daftar Kupon Gratis Terbaru - Idle Moon Rabbit: AKF RPG (Juli 2023)
Daftar kupon atau kode gratis yang bisa kamu redeem untuk mendapatkan berbagai macam hadiah pada game Idle Moon Rabbit: AFK RPG
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis
Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
Review: Big Hunter
Review singkat dan beberapa tips bermain game Big Hunter
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
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
16 April, 2023
No
View(s)
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
06 April, 2023
70
View(s)
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
15 Desember, 2023
39
View(s)
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
15 Desember, 2023
47
View(s)
Daftar Kupon Gratis Terbaru - Idle Moon Rabbit: AKF RPG (Juli 2023)
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)
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
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
5
View(s)
Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis
Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis
01 Juli, 2023
5
View(s)
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
15 Desember, 2023
35
View(s)
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
19 Juli, 2023
18
View(s)
Review: Big Hunter
Review singkat dan beberapa tips bermain game Big Hunter
21 Juli, 2023
8
View(s)
MUNGKIN
KAMU
JUGA
SUKA
Penjelasan Karakter Demon - Brotato
Penjelasan karakter Demon pada game Brotato
07 November, 2024
20
View(s)
Penjelasan Karakter Knight - Brotato
Penjelasan karakter Knight pada game Brotato
01 November, 2024
25
View(s)
Penjelasan Karakter Masochist - Brotato
Penjelasan karakter Masochist pada game Brotato
26 Oktober, 2024
28
View(s)
Penjelasan Karakter Soldier - Brotato
Penjelasan karakter Soldier pada game Brotato
20 Oktober, 2024
30
View(s)
Penjelasan Karakter Bull - Brotato
Penjelasan karakter Bull pada game Brotato
14 Oktober, 2024
34
View(s)
Penjelasan Karakter One-Armed - Brotato
Penjelasan karakter One-Armed pada game Brotato
08 Oktober, 2024
22
View(s)
Cara Mendapatkan DigiSeabass - Digital Tamers 2
Apa itu DigiSeabass dan bagaimana cara mendapatkannya pada game Digital Tamers 2
06 Oktober, 2024
23
View(s)
Penjelasan Karakter Renegade - Brotato
Penjelasan karakter Renegade pada game Brotato
02 Oktober, 2024
22
View(s)
Cara Mendapatkan Deluxe Mushroom & DigiWater untuk Drimogemon - Digital Tamers 2
Bagaimana cara mendapatkan Deluxe Mushroom dan DigiWater untuk Drimogemon pada game Digital Tamers 2
27 September, 2024
19
View(s)
Penjelasan Karakter King - Brotato
Penjelasan karakter King pada game Brotato
26 September, 2024
14
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