Banyak pengguna Blogger bingung saat mengoptimasi gambar: haruskah menggunakan fetchpriority="high" atau loading="lazy"? Salah penerapan bisa membuat LCP merah, PageSpeed turun, dan muncul peringatan di Google Search Console.
Apa Itu Fetchpriority?
fetchpriority adalah atribut HTML yang digunakan untuk memberi tahu browser bahwa
sebuah resource, seperti gambar, merupakan elemen penting yang perlu dimuat lebih dulu
saat halaman dibuka.
<img src="thumbnail.webp" fetchpriority="high">Pada praktiknya, fetchpriority sangat berguna untuk mempercepat pemuatan gambar utama atau thumbnail artikel. Karena gambar ini biasanya menjadi elemen terbesar yang pertama kali terlihat, penggunaannya berpengaruh langsung terhadap nilai Largest Contentful Paint (LCP).
Apa Itu Lazy Load?
Lazy load (loading="lazy") membuat gambar tidak langsung dimuat saat halaman dibuka,
melainkan dimuat ketika mendekati area layar pengguna.
<img src="gambar-isi.webp" loading="lazy">Teknik ini berguna untuk menghemat bandwidth dan mempercepat pemuatan awal halaman.
Kesalahan Umum Pengguna Blogger
-
Semua gambar diberi
loading="lazy"
Banyak blogger menerapkan lazy load ke seluruh gambar tanpa pengecualian. Padahal, gambar yang tampil pertama kali justru tidak boleh ditunda pemuatannya karena berpengaruh langsung terhadap nilai LCP. -
Gambar utama ikut dilazy load
Ini adalah kesalahan paling fatal. Thumbnail atau hero image adalah elemen utama halaman. Jika dilazy load, browser akan menunda pemuatan dan membuat waktu tampil konten utama menjadi lebih lambat. -
fetchpriority="high"dipakai di banyak gambar
Fetchpriority seharusnya hanya digunakan untuk satu gambar terpenting. Jika diterapkan ke banyak gambar, browser kehilangan prioritas yang jelas dan justru membuat proses loading menjadi tidak efisien. -
Terlalu fokus mengejar skor PageSpeed tanpa memahami LCP
Skor hijau tidak selalu berarti optimal. Yang dinilai Google adalah pengalaman pengguna nyata, terutama kecepatan tampil elemen terbesar (Largest Contentful Paint), bukan sekadar angka di laporan.
Akibatnya, LCP justru melambat dan performa halaman menurun.
Aturan yang Benar Menurut Google
1. Gambar Utama / Thumbnail Artikel (LCP)
Gunakan fetchpriority dan jangan gunakan lazy load.
<img
src="thumbnail.webp"
width="640"
height="426"
fetchpriority="high"
decoding="async"
alt="Judul Artikel - Nama Blog"
/>Gambar ini muncul pertama kali dan menjadi penentu LCP.
2. Gambar Isi Artikel (Below the Fold)
Gunakan lazy load dan jangan gunakan fetchpriority.
<img
src="gambar-isi.webp"
width="600"
height="400"
loading="lazy"
decoding="async"
alt="Deskripsi gambar"
/>Perbandingan Fetchpriority vs Lazy Load
| Jenis Gambar | fetchpriority | lazy load | Status |
|---|---|---|---|
| Thumbnail / Hero | high | jangan | Benar |
| Gambar isi artikel | jangan | ya | Benar |
| Sidebar / Footer | jangan | ya | Benar |
Kenapa PageSpeed Menampilkan “Lazy Load Tidak Diterapkan”?
Jika peringatan ini muncul pada gambar utama, itu bukan kesalahan. Google memang tidak menyarankan lazy load untuk elemen LCP karena dapat memperlambat waktu render utama.
Kesimpulan
Fetchpriority dan lazy load bukan untuk dipilih salah satu, melainkan digunakan sesuai fungsi.
- Gunakan fetchpriority="high" hanya untuk satu gambar utama
- Gunakan loading="lazy" untuk gambar di bawah layar
- Jangan mencampur keduanya pada gambar LCP
Dengan penerapan yang benar, Blogger bisa tetap cepat, stabil, dan ramah SEO tanpa perlu trik berlebihan.
Terima kasih sudah membaca. Jika artikel ini membantu, silakan tinggalkan komentar dan bagikan ke sesama pengguna Blogger.
Pertanyaan yang Sering Diajukan (FAQ)
Apakah fetchpriority boleh digunakan bersamaan dengan lazy load?
Tidak disarankan. Fetchpriority digunakan untuk memprioritaskan pemuatan gambar penting, sedangkan lazy load justru menunda pemuatan. Menggabungkan keduanya dapat membuat browser bingung dan memperlambat LCP.
Gambar apa saja yang sebaiknya memakai fetchpriority="high"?
Hanya satu gambar utama atau thumbnail artikel yang tampil pertama kali di layar. Biasanya inilah elemen LCP yang dinilai Google.
Kenapa PageSpeed menyarankan lazy load tapi tidak diterapkan?
Jika peringatan muncul pada gambar utama, itu bukan kesalahan. Google memang tidak menyarankan lazy load untuk elemen LCP karena dapat memperlambat waktu render konten utama.
Apakah Blogger mendukung optimasi gambar tanpa plugin?
Ya. Blogger mendukung WebP, lazy load, fetchpriority, dan responsive image selama atribut HTML diterapkan dengan benar dan ukuran gambar sesuai kebutuhan tampilan.
