Digital Transformation
Preload Scanner
TL;DR: Preload scanner adalah komponen browser yang memindai HTML lebih awal untuk menemukan dan mengunduh sumber daya penting sebelum parser utama selesai. Fungsinya mempercepat pemuatan halaman, terutama metrik LCP.
Apa itu Preload Scanner?
Preload scanner adalah pemindai kedua di dalam browser yang berjalan paralel dengan parser HTML utama. Sementara parser membangun struktur halaman baris demi baris, pemindai ini melompat ke depan mencari file penting seperti gambar hero, CSS, dan skrip, lalu mulai mengunduhnya lebih awal. Efeknya langsung terasa pada Core Web Vitals, khususnya LCP.
Kapan Ia Terhambat
| Pola | Dampak |
|---|---|
| Gambar disisipkan lewat JavaScript | Pemindai tidak melihatnya, unduhan tertunda |
| CSS render-blocking di tengah body | Antrian sumber daya melambat |
| Resource penting tanpa preload hint | Prioritas unduhan meleset |
Menaruh sumber daya kritis langsung di HTML, bukan lewat skrip, membuat pemindai bekerja optimal. Teknik ini melengkapi lazy loading untuk aset non-kritis.
Kenapa Penting?
Dalam praktik optimasi Web Vitals di beberapa proyek, memindahkan gambar hero dari komponen JavaScript ke tag gambar biasa sering memangkas LCP ratusan milidetik tanpa mengubah desain. Detail teknisnya dibahas di web.dev. Metrik terkait lainnya adalah TTFB.
Pertanyaan Umum
Apakah saya perlu mengatur preload scanner manual?
Tidak. Ia otomatis di semua browser modern. Tugasmu hanya menulis HTML yang mudah dipindai.
Apa beda preload scanner dan atribut preload?
Pemindai adalah mekanisme browser, sedangkan atribut preload adalah petunjuk manual yang bisa kamu tambahkan untuk menegaskan prioritas sumber daya.