Optimasi gambar merupakan salah satu bagian penting dalam meningkatkan kecepatan halaman Blogger. Pengaturan pemuatan gambar yang tepat dapat membantu browser menampilkan konten utama lebih cepat sekaligus mengurangi pekerjaan yang tidak diperlukan saat halaman pertama kali dibuka.
Dua atribut HTML yang sering digunakan dalam optimasi gambar adalah fetchpriority dan loading="lazy". Keduanya memiliki fungsi berbeda. Fetchpriority membantu browser menentukan prioritas pengambilan resource, sedangkan lazy load mengatur kapan gambar mulai dimuat.
Memahami perbedaan keduanya penting, terutama ketika mengoptimalkan gambar utama yang berpotensi menjadi elemen Largest Contentful Paint (LCP).
Apa Itu Fetchpriority?
fetchpriority merupakan atribut HTML yang memberikan petunjuk kepada browser mengenai tingkat prioritas pengambilan suatu resource. Untuk gambar yang penting bagi tampilan awal halaman, atribut fetchpriority="high" dapat membantu browser memprioritaskan proses pengunduhannya.
Contoh penggunaannya:
<img
src="gambar-utama.webp"
fetchpriority="high"
loading="eager"
alt="Gambar utama artikel"
/>Atribut ini dapat digunakan pada gambar utama artikel atau gambar lain yang memang penting untuk ditampilkan sejak awal. Namun, fetchpriority bukan jaminan bahwa gambar akan selalu dimuat paling cepat karena hasil akhirnya juga dipengaruhi ukuran file, koneksi internet, server, dan proses rendering halaman.
Apa Itu Lazy Load?
Lazy load adalah teknik yang menunda pemuatan gambar sampai gambar tersebut mendekati area tampilan pengguna. Pada HTML, teknik ini dapat diterapkan menggunakan atribut loading="lazy".
Contoh penerapannya:
<img
src="gambar-artikel.webp"
loading="lazy"
decoding="async"
alt="Ilustrasi isi artikel"
/>Pengaturan ini cocok untuk gambar yang berada jauh di bawah layar, misalnya ilustrasi pada bagian tengah artikel, gambar lanjutan, atau gambar di bagian bawah halaman.
Dengan menunda pemuatan gambar yang belum diperlukan, browser dapat mengurangi pekerjaan saat menampilkan bagian awal halaman. Meski demikian, lazy load sebaiknya tidak diterapkan secara sembarangan pada gambar yang langsung terlihat ketika halaman dibuka.
Perbedaan Fetchpriority dan Lazy Load
Kedua atribut tersebut tidak memiliki fungsi yang sama. Fetchpriority mengatur petunjuk prioritas pengambilan resource, sedangkan lazy load mengatur penundaan pemuatan gambar.
| Aspek | Fetchpriority | Lazy Load |
|---|---|---|
| Fungsi | Memberi petunjuk prioritas pemuatan | Menunda pemuatan gambar |
| Atribut | fetchpriority="high" |
loading="lazy" |
| Penggunaan | Resource gambar yang penting | Gambar yang belum diperlukan |
| Contoh lokasi | Gambar utama atau gambar LCP | Gambar di bawah area awal halaman |
Pengaturan Gambar yang Tepat di Blogger
Agar pemuatan gambar lebih teratur, bedakan pengaturan gambar utama dengan gambar yang berada di bagian lain artikel.
1. Gambar Utama atau Gambar LCP
Gambar yang berpotensi menjadi elemen LCP sebaiknya dapat ditemukan browser sejak awal pemuatan halaman. Jika gambar tersebut penting untuk tampilan awal, gunakan pemuatan langsung dan pertimbangkan prioritas tinggi.
<img
src="gambar-utama.webp"
width="640"
height="426"
loading="eager"
fetchpriority="high"
decoding="async"
alt="Deskripsi gambar utama"
/>Penggunaan loading="eager" memastikan gambar tidak ditunda menggunakan lazy load. Sementara itu, fetchpriority="high" memberikan petunjuk kepada browser bahwa gambar tersebut memiliki prioritas tinggi.
Gunakan pengaturan ini secara selektif. Tidak semua gambar yang muncul di bagian atas halaman otomatis membutuhkan prioritas tinggi. Periksa terlebih dahulu elemen yang benar-benar menjadi LCP.
2. Gambar di Dalam Artikel
Untuk gambar yang berada di bagian tengah atau bawah artikel dan belum terlihat saat halaman pertama kali dibuka, lazy load dapat digunakan.
<img
src="gambar-artikel.webp"
width="640"
height="426"
loading="lazy"
decoding="async"
alt="Deskripsi gambar artikel"
/>Menambahkan atribut width dan height membantu browser memperkirakan ruang gambar sebelum file selesai dimuat. Hal ini dapat membantu mengurangi pergeseran tata letak atau Cumulative Layout Shift (CLS).
3. Gambar Sidebar dan Footer
Gambar yang berada di sidebar atau footer dan tidak langsung terlihat oleh pengguna umumnya dapat menggunakan lazy load.
<img
src="gambar-sidebar.webp"
width="300"
height="200"
loading="lazy"
decoding="async"
alt="Deskripsi gambar"
/>Namun, jika gambar sidebar atau elemen lainnya ternyata menjadi bagian penting dari tampilan awal, sesuaikan pengaturannya berdasarkan hasil pemeriksaan halaman.
Kesalahan yang Perlu Dihindari
Beberapa kesalahan berikut dapat membuat optimasi gambar kurang efektif:
-
Memberikan lazy load pada gambar LCP.
Jika gambar utama yang seharusnya segera terlihat justru ditunda, browser dapat terlambat menampilkan elemen tersebut.
-
Menggunakan fetchpriority high pada terlalu banyak gambar.
Prioritas tinggi sebaiknya diberikan secara selektif agar browser tetap dapat mengatur prioritas resource lainnya.
-
Tidak mencantumkan ukuran gambar.
Tanpa dimensi yang sesuai, ruang gambar mungkin belum dapat disiapkan dengan baik sehingga berpotensi menyebabkan pergeseran tata letak.
-
Menggunakan gambar berukuran terlalu besar.
Prioritas tinggi tidak dapat menggantikan kompresi gambar. File yang terlalu besar tetap membutuhkan waktu lebih lama untuk diunduh.
-
Menerapkan lazy load secara otomatis ke semua gambar.
Pengaturan template perlu diperiksa agar gambar utama tidak ikut ditunda oleh skrip lazy load.
Kenapa PageSpeed Insights Menampilkan Pesan Lazy Load Tidak Diterapkan?
Ketika memeriksa halaman menggunakan PageSpeed Insights, kamu mungkin menemukan rekomendasi atau keterangan terkait pemuatan gambar yang tidak menggunakan lazy load.
Hal tersebut tidak selalu menunjukkan adanya kesalahan. Gambar yang terlihat sejak awal halaman memang tidak harus menggunakan lazy load. Bahkan, menunda gambar LCP justru dapat memperlambat tampilan konten utama.
Karena itu, jangan langsung menambahkan loading="lazy" ke semua gambar hanya untuk menghilangkan suatu rekomendasi. Periksa terlebih dahulu posisi gambar, perannya dalam halaman, serta hasil pengukuran LCP.
Tips Tambahan untuk Mengoptimalkan Gambar Blogger
Selain mengatur fetchpriority dan lazy load, ada beberapa hal lain yang dapat membantu meningkatkan performa gambar:
- Gunakan format gambar modern seperti WebP jika sesuai dengan kebutuhan.
- Kompres gambar sebelum diunggah agar ukuran file tidak berlebihan.
- Sesuaikan dimensi gambar dengan ukuran tampilan sebenarnya.
- Gunakan atribut
widthdanheightsesuai rasio gambar. - Pastikan gambar utama dapat ditemukan browser melalui HTML awal, bukan hanya dimuat setelah JavaScript berjalan.
- Jika menggunakan
srcsetdansizes, sesuaikan dengan ukuran layar agar browser dapat memilih gambar yang tepat.
Setelah melakukan perubahan, uji kembali halaman menggunakan PageSpeed Insights. Perhatikan hasil LCP, CLS, dan tampilan halaman pada perangkat seluler maupun desktop. Lakukan pengujian pada halaman yang benar-benar mewakili kondisi blog.
Kesimpulan
Fetchpriority dan lazy load memiliki fungsi berbeda dalam optimasi gambar Blogger. Fetchpriority memberikan petunjuk prioritas pengambilan resource, sedangkan lazy load menunda pemuatan gambar sampai mendekati area tampilan pengguna.
Untuk gambar utama yang berpotensi menjadi LCP, gunakan pemuatan langsung dan pertimbangkan fetchpriority="high" jika memang diperlukan. Sementara itu, gunakan loading="lazy" untuk gambar yang berada di luar area tampilan awal.
Optimasi yang baik bukan sekadar memasang sebanyak mungkin atribut, melainkan menyesuaikan pengaturan dengan posisi dan fungsi setiap gambar. Dengan begitu, pemuatan halaman dapat menjadi lebih efisien tanpa mengorbankan pengalaman pengunjung.
Pertanyaan yang Sering Diajukan (FAQ)
Apa perbedaan fetchpriority dan lazy load?
Fetchpriority memberikan petunjuk kepada browser mengenai prioritas pengambilan resource, sedangkan lazy load menunda pemuatan gambar sampai mendekati area tampilan pengguna.
Apakah gambar LCP boleh menggunakan lazy load?
Gambar LCP yang terlihat sejak awal halaman umumnya tidak disarankan menggunakan lazy load karena penundaan pemuatan dapat memperlambat LCP.
Berapa jumlah gambar yang sebaiknya menggunakan fetchpriority high?
Gunakan secara selektif pada resource gambar yang benar-benar penting untuk tampilan awal. Tidak ada aturan mutlak bahwa setiap halaman harus selalu menggunakan tepat satu gambar dengan prioritas tinggi.
Apakah fetchpriority bisa digabung dengan loading eager?
Bisa. Keduanya dapat digunakan bersama. Loading eager membuat gambar tidak ditunda menggunakan lazy load, sedangkan fetchpriority high memberikan petunjuk prioritas tinggi kepada browser.
Apakah Blogger mendukung fetchpriority dan lazy load?
Blogger memungkinkan penggunaan atribut HTML tersebut pada elemen gambar. Penerapannya dapat dilakukan melalui kode gambar di postingan atau pengaturan template, dengan tetap memperhatikan struktur tema yang digunakan.
