Mengoptimalkan prioritas pramuat

Fitur web: Prioritas pengambilan <link rel="preload">

Melakukan pramuat resource dengan <link rel="preload"> memberi sinyal ke browser bahwa resource akan segera diperlukan. Namun, pramuat mewarisi prioritas default untuk jenis resource dan untuk gambar, khususnya, prioritas ini rendah. Penggunaan fetchpriority memungkinkan Anda menyempurnakan prioritas relatif ini, khususnya memastikan pra-pemuatan gambar dipramuat dengan prioritas tinggi sehingga dapat dimulai lebih awal dan menggunakan lebih banyak resource bandwidth.

Cara menerapkan

  1. Identifikasi kandidat pramuat: Temukan resource yang tidak ditemukan lebih awal oleh browser (misalnya, gambar poster video atau gambar latar di CSS), tetapi penting untuk tampilan halaman.
  2. Tingkatkan prioritas pramuat gambar penting: Untuk gambar LCP atau gambar penting lainnya yang tidak diprioritaskan secara default, gunakan <link rel="preload" fetchpriority="high"> untuk memastikan gambar tersebut diprioritaskan di atas pramuat lainnya. Perhatikan bahwa font sudah memiliki prioritas tinggi secara default.
  3. Mendeprioritaskan pramuat yang tidak penting: Untuk resource yang tidak penting untuk render awal (misalnya, video latar belakang atau font sekunder), gunakan <link rel="preload" fetchpriority="low">.
  4. Koordinasikan dengan jenis resource: Perhatikan bahwa jenis as yang berbeda memiliki prioritas default yang berbeda; gunakan fetchpriority untuk mengganti default ini jika diperlukan.

Kode contoh

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Praktik Terbaik

  • WAJIB: Hanya gunakan fetchpriority="high" pada maksimal 1-2 pramuat gambar penting untuk menghindari pertentangan jaringan dan mengurangi peningkatan prioritas.
  • WAJIB: Gunakan fetchpriority="high" pada gambar Largest Contentful Paint (LCP).
  • LAKUKAN: Batasi jumlah total pramuat di halaman hingga maksimal 2 gambar dan 2-3 font penting untuk mencegah perebutan bandwidth.
  • LAKUKAN penggunaan fetchpriority="low" untuk pramuat yang Anda inginkan agar dimulai lebih awal oleh browser, tetapi tidak mengorbankan resource penting (terutama font yang tidak penting).
  • LAKUKAN penentuan atribut as dengan benar untuk memastikan pramuat akan digunakan.
  • LAKUKAN: utamakan membuat resource penting (seperti gambar LCP) dapat ditemukan secara statis di HTML melalui tag <img>, bukan mengandalkan pramuat untuk gambar latar.
  • LAKUKAN: pastikan pramuat font selalu memiliki atribut crossorigin (meskipun berasal dari origin yang sama).
  • JANGAN gunakan atribut importance yang tidak digunakan lagi. Metode ini telah diganti dengan fetchpriority.

Strategi penggantian

Atribut fetchpriority pada <link rel="preload"> adalah progressive enhancement. Browser yang tidak mendukungnya akan tetap melakukan pramuat resource menggunakan prioritas default untuk jenis resource tersebut. Untuk memastikan kompatibilitas, selalu berikan atribut as dan type yang benar.