Kecepatan tampilnya halaman tidak semata ditentukan ukuran berkasnya, karena urutan serta waktu unduhan aset juga berperan besar. HTML menyediakan atribut yang mengarahkan browser pada keputusan itu, mulai dari gambar yang ditunda hingga aset yang diminta lebih awal. Topik ini membahas loading="lazy", atribut decoding, fetchpriority, dan link rel="preload", beserta pengaruhnya terhadap waktu tampilnya konten utama halaman.
Gambar dan ukurannya terhadap LCP#
Gambar adalah jenis konten yang paling menambah ukuran halaman pada umumnya, dan browser secara bawaan (default) mengunduhnya segera begitu parser menemui tagnya, tanpa menunggu apakah gambar itu benar-benar tampak di layar. Perilaku bawaan ini menjaga kesederhanaan, tetapi boros pada halaman yang panjang. Markup modern menyediakan pengarah yang lebih halus untuk setiap gambar.
Ukuran yang relevan untuk kecepatan persepsi adalah Largest Contentful Paint (LCP), yaitu waktu yang berlalu sampai elemen konten terbesar yang tampak selesai digambar. Gambar unggulan di bagian atas halaman, yang sering disebut hero image, kerap menjadi elemen LCP pada halaman beranda, sehingga perlakuan terhadap gambar itu menentukan angka LCP halaman. Panduan optimasi LCP dari web.dev menempatkan pengaturan sumber daya ini sebagai salah satu jalur utamanya.
Menunda unduhan dengan loading=“lazy”#
Atribut loading="lazy" pada img dan iframe memerintahkan browser untuk menunda unduhannya sampai elemen itu mendekati area yang terlihat. Pengukuran jaraknya dikerjakan browser sendiri, dan ambangnya berbeda antarbrowser serta berubah menurut kecepatan jaringan. Chrome memperkenalkan perilaku ini secara bawaan pada 2019, kemudian browser utama lainnya menyusul, sehingga atributnya kini cukup ditulis tanpa skrip pendamping.
Fitur ini tepat untuk galeri panjang, daftar artikel dengan gambar pada tiap entri, dan sematan yang letaknya jauh di bawah. Sebaliknya, gambar pada bagian atas halaman yang tampak sebelum pengguna menggulir (above the fold) justru tidak boleh ditunda karena bisa saja menjadi elemen LCP. Memberi loading="lazy" pada gambar tersebut memperburuk angka LCP, dan panduan web.dev menandainya sebagai anti-pola.
<img src="foto-arsip-12.jpg" alt="Arsip foto kegiatan" width="640" height="480" loading="lazy" decoding="async">
<img src="foto-arsip-13.jpg" alt="Arsip foto kegiatan" width="640" height="480" loading="lazy" decoding="async">Nilai loading="eager" adalah kebalikannya dan menjadi bawaan, sehingga atribut ini hanya perlu ditulis pada gambar yang dimunda. Elemen iframe menerima perlakuan yang sama, dan sematan yang diberi loading="lazy" tidak lagi merebut pita lebar selagi bagian atas halaman dimuat. Ambang jarak yang berbeda antarbrowser tidak menjadi persoalan, karena efeknya hanya pada waktu unduhan dimulai.
<iframe src="pratinjau-terkait.html" width="560" height="315" loading="lazy" title="Pratinjau halaman terkait"></iframe>Memandu unduhan dengan decoding dan fetchpriority#
Atribut decoding pada img memberi petunjuk tentang waktu dekodasi gambar, yaitu proses mengubah byte terunduh menjadi piksel yang siap digambar. Nilai decoding="async" memungkinkan dekodasi berjalan di luar jalur kritis, sehingga pekerjaan lain seperti perenderan teks tidak menunggunya. Atribut ini tidak mengubah urutan unduhan sama sekali, sehingga efeknya ada pada keteraturan penyajian, bukan pada kecepatan unduh.
Atribut fetchpriority justru menyentuh urutan unduhan. Nilai high pada gambar unggulan memintanya diprioritaskan di antrean jaringan, sedangkan nilai low menurunkan porsinya bagi gambar yang tidak terlihat di awal, misalnya gambar pada bagian carousel. Browser sudah menghitung prioritasnya sendiri, sehingga atribut ini berfungsi sebagai koreksi halus ketika hitungan bawaannya tidak sesuai dengan kenyataan halaman.
<img src="pemandangan-utama.jpg" alt="Panorama danau pagi hari" width="1280" height="720" fetchpriority="high" decoding="async">Kombinasi yang lazim untuk elemen LCP adalah fetchpriority="high" dan decoding="async" sekaligus. Gambar unggulan selesai lebih dahulu karena prioritasnya, dan penggambarannya tidak terhalang proses dekodasi. Keduanya hanya petunjuk, sehingga browser tetap boleh menilai sendiri ketika sumber daya lain lebih mendesak.
Meminta aset kritis lebih awal dengan rel=“preload”#
Beberapa aset kritis baru ditemukan browser setelah tahap awal selesai, misalnya berkas huruf yang permintaannya baru muncul ketika CSS-nya terunduh dan dibaca. Penemuan yang terlambat ini menyisakan waktu kosong pada jalur kritis. Elemen link dengan rel="preload" memberi tahu browser untuk mengunduh aset tertentu sejak dini, lengkap dengan atribut as yang menyatakan jenisnya.
<link rel="preload" href="huruf-utama.woff2" as="font" type="font/woff2" crossorigin>Berkas huruf adalah pengguna preload yang paling umum. Untuk berkas huruf, atribut crossorigin wajib ditulis meskipun berkasnya berada di situs yang sama, karena aturan permintaan huruf memang menuntutnya. Preload juga dapat digunakan untuk gambar unggulan yang posisinya baru ditemui belakangan di markup. Prinsip penggunaannya ketat, yaitu preload hanya untuk aset yang benar-benar dibutuhkan pada muatan awal, karena setiap aset yang diprioritaskan mencuri pita lebar dari yang lain.
Alur pemuatan lazy versus eager#
Perbedaan antara pemuatan bawaan dan pemuatan yang dimunda dapat dirangkum menjadi dua alur. Pada alur bawaan, setiap img masuk ke antrean jaringan sejak parser menemuinya, sedangkan pada alur lazy, unduhan ditunda sampai browser mengukur bahwa elemennya mendekati viewport, yaitu area halaman yang tampak di layar. Diagram berikut membandingkan keduanya.
Berkas utuh halaman sadar kinerja#
Berkas berikut menyatukan seluruh atribut topik ini pada satu halaman. Gambar unggulan diberi prioritas tinggi tanpa lazy, galeri di bagian bawah dimunda, sematan menerima perlakuan yang sama, dan berkas huruf utama diminta lebih awal melalui preload di head. Seluruhnya bekerja tanpa satu baris skrip pun karena hanya berupa atribut markup.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halaman sadar kinerja</title>
<link rel="preload" href="huruf-utama.woff2" as="font" type="font/woff2" crossorigin>
<style>
body { font-family: sans-serif; max-width: 34rem; margin: 0 auto; padding: 0 1rem; color: #222222; }
img { max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>Halaman sadar kinerja</h1>
<img src="pemandangan-utama.jpg" alt="Panorama danau pagi hari" width="1280" height="720" fetchpriority="high" decoding="async">
<p>Gambar unggulan di atas dimuat segera dengan prioritas tinggi karena menjadi elemen LCP halaman.</p>
<p>Galeri di bawahnya berada jauh dari layar awal, sehingga seluruhnya dimunda dengan loading="lazy".</p>
<img src="foto-arsip-12.jpg" alt="Arsip foto kegiatan" width="640" height="480" loading="lazy" decoding="async">
<img src="foto-arsip-13.jpg" alt="Arsip foto kegiatan" width="640" height="480" loading="lazy" decoding="async">
<img src="foto-arsip-14.jpg" alt="Arsip foto kegiatan" width="640" height="480" loading="lazy" decoding="async">
<iframe src="pratinjau-terkait.html" width="560" height="315" loading="lazy" title="Pratinjau halaman terkait"></iframe>
</body>
</html>Gambar unggulan pada baris 15 membawa fetchpriority="high" dan decoding="async", sedangkan tiga gambar galeri membawa loading="lazy" karena letaknya di bagian bawah halaman. Baris 7 meminta huruf-utama.woff2 sejak dini dengan rel="preload". Penempatan atribut width dan height pada setiap img menjaga tata letak tetap stabil selagi gambarnya belum tiba, sehingga ukuran ruangnya sudah tercadangkan sejak awal.
Kesalahan umum#
- Memasang
loading="lazy"pada gambar unggulan yang menjadi elemen LCP. Unduhannya baru dimulai ketika halaman hampir tampil, sehingga angka LCP memburuk, dan perbaikannya adalah mengembalikan gambar itu ke pemuatan segera. - Menambahkan
rel="preload"untuk semua aset. Antrean jaringan memenuhi permintaan yang saling bersaing, dan prioritas aset penting justru tergeser. - Mengharapkan
decoding="async"mempercepat unduhan. Atributnya mengatur waktu dekodasi, sedangkan urutan unduhan diatur olehfetchpriorityataurel="preload".
Ringkasan#
loading="lazy"menunda unduhanimgdaniframesampai elemennya mendekati viewport, dan tidak boleh dipasang pada gambar di bagian atas halaman yang menjadi LCP.decoding="async"mengatur waktu dekodasi gambar agar tidak menghambat penyajian, tanpa mengubah urutan unduhannya.fetchpriority="high"memprioritaskan gambar unggulan di antrean jaringan, sedangkanrel="preload"meminta aset kritis lebih awal dari head.- Atribut-atribut ini adalah petunjuk, dan browser tetap menghitung prioritasnya sendiri.
Referensi#
- Lazy loading — MDN — Panduan penundaan pemuatan gambar dan iframe.
- Browser-level image lazy loading — web.dev — Perilaku lazy bawaan browser dan ambang jaraknya.
- Optimize LCP — web.dev — Definisi LCP dan strategi optimalisasinya.
- Preload critical assets — web.dev — Pemakaian rel=“preload” untuk aset jalur kritis.
- HTMLImageElement: fetchPriority — MDN — Dokumentasi atribut fetchpriority beserta nilainya.
- rel=preload — MDN — Sintaks preload beserta atribut as dan crossorigin.