Mengoptimalkan prioritas gambar

Browser menggunakan heuristik untuk menetapkan prioritas pemuatan ke gambar, tetapi setelan default ini mungkin tidak selalu selaras dengan Largest Contentful Paint (LCP) halaman Anda.

Menggunakan fetchpriority pada elemen <img> memungkinkan Anda memberi sinyal secara eksplisit kepada browser tentang pentingnya suatu gambar, sehingga gambar penting dimuat lebih cepat, sementara gambar yang tidak penting tidak bersaing untuk mendapatkan bandwidth.

Atribut loading=lazy mencegah gambar didownload sama sekali jika berada di luar layar, yang dapat membantu memprioritaskan gambar.

Cara menerapkan

1. Identifikasi gambar LCP: Tentukan gambar yang paling mungkin menjadi kandidat Largest Contentful Paint (biasanya banner besar di bagian atas halaman).
2. Tingkatkan prioritas LCP: Tambahkan fetchpriority="high" ke elemen <img> untuk kandidat LCP.
3. Turunkan prioritas gambar yang tidak penting: Untuk gambar yang merupakan bagian dari UI sekunder atau hanya ditampilkan setelah interaksi pengguna (seperti mega menu, modal, atau slide carousel di luar layar), tambahkan fetchpriority="low".
4. Optimalkan pemuatan lambat: Jangan pernah menggunakan loading="lazy" pada gambar LCP. Untuk gambar standar di paruh bawah, loading="lazy" sudah cukup untuk menunda permintaan hingga pengguna men-scroll ke dekat gambar tersebut. Hindari menambahkan fetchpriority="low" ke gambar ini, karena Anda ingin gambar tersebut dimuat dengan prioritas normal setelah pengguna men-scroll ke gambar tersebut. Cadangkan fetchpriority="low" untuk gambar yang secara teknis berada di "paruh atas", tetapi tidak terlihat di awal (misalnya, slide carousel tersembunyi atau menu mega). Untuk gambar tersembunyi ini, Anda juga dapat menggunakan loading="lazy"; browser akan menangani pengaturan waktu permintaan sambil tetap memprioritaskan prioritas rendah.
5. Pilih prioritas default: Jika gambar harus memiliki prioritas pemuatan normal, hapus atribut fetchpriority sepenuhnya, bukan menyetelnya ke auto. Ini adalah konvensi gaya untuk menjaga HTML Anda tetap bersih sambil mengandalkan heuristik native browser.

Kode contoh

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Praktik terbaik

• WAJIB: Selalu terapkan fetchpriority="high" ke gambar LCP.
• WAJIB: Hanya gunakan fetchpriority="high" pada maksimal 1-2 gambar penting untuk menghindari pertentangan jaringan dan mengurangi peningkatan prioritas.
• WAJIB: Gunakan fetchpriority="low" untuk gambar yang secara teknis "di paruh atas" tetapi awalnya disembunyikan (misalnya, slide carousel tersembunyi, gambar menu mega).
• WAJIB: Jangan gunakan fetchpriority="low" pada gambar standar di paruh bawah yang sudah menggunakan loading="lazy". Gambar ini akan dimuat dengan prioritas normal setelah memasuki area pandang.
• DIREKOMENDASIKAN: Hindari penggunaan fetchpriority="auto". Jika Anda menginginkan prioritas default, hapus atribut sepenuhnya agar HTML Anda tetap rapi.
• JANGAN gabungkan fetchpriority="high" dengan loading="lazy".
• JANGAN gunakan atribut importance yang tidak digunakan lagi. Tag ini telah diganti dengan fetchpriority dan tidak didukung oleh browser apa pun.
• JANGAN gunakan nilai loading="auto" yang tidak digunakan lagi. Fitur ini awalnya didukung oleh Chrome, tetapi telah dihapus dan tidak didukung oleh browser apa pun.

Strategi penggantian

Atribut fetchpriority adalah progressive enhancement untuk elemen <img>. Jika browser tidak mendukungnya, atribut akan diabaikan, dan browser akan menggunakan heuristik prioritas defaultnya.