Mengoptimalkan pemuatan resource dengan Fetch Priority API

Fetch Priority API menunjukkan prioritas relatif resource terhadap browser. Data ini dapat memungkinkan pemuatan yang optimal dan meningkatkan Core Web Vitals.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Dukungan Browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Sumber

Saat mengurai halaman web dan mulai menemukan serta mendownload resource seperti gambar, skrip, atau CSS, browser akan menetapkan priority pengambilan sehingga dapat mendownloadnya dalam urutan yang optimal. Prioritas resource biasanya bergantung pada jenisnya dan lokasinya dalam dokumen. Misalnya, gambar dalam area pandang mungkin memiliki prioritas High, dan prioritas untuk CSS yang dimuat lebih awal dan memblokir rendering menggunakan <link> di <head> mungkin adalah Very High. Browser cukup baik dalam menetapkan prioritas yang bekerja dengan baik, tetapi mungkin tidak optimal dalam semua kasus.

Halaman ini membahas Fetch Priority API dan atribut HTML fetchpriority, yang memungkinkan Anda mengisyaratkan prioritas relatif resource (high atau low). Prioritas Pengambilan dapat membantu mengoptimalkan Core Web Vitals.

Ringkasan

Beberapa area utama tempat Prioritas Pengambilan dapat membantu:

  • Meningkatkan prioritas gambar LCP dengan menentukan fetchpriority="high" pada elemen gambar, yang menyebabkan LCP terjadi lebih cepat.
  • Meningkatkan prioritas skrip async, menggunakan semantik yang lebih baik daripada hack yang paling umum saat ini (menyisipkan <link rel="preload"> untuk skrip async).
  • Menurunkan prioritas skrip bagian akhir untuk memungkinkan pengurutan gambar yang lebih baik.
Tampilan setrip film yang membandingkan dua pengujian di halaman beranda Google Penerbangan. Di bagian bawah, Prioritas Pengambilan digunakan untuk meningkatkan prioritas gambar hero, sehingga LCP berkurang 0,7 detik.
Pengambilan Prioritas yang meningkatkan Largest Contentful Paint dari 2,6 dtk menjadi 1,9 dtk dalam pengujian Google Penerbangan.

Secara historis, developer memiliki pengaruh terbatas atas prioritas resource menggunakan preload dan preconnect. Dengan melakukan pramuat, Anda dapat memberi tahu browser tentang resource penting yang ingin Anda muat lebih awal sebelum browser menemukannya secara alami. Hal ini sangat berguna untuk resource yang lebih sulit ditemukan, seperti font yang disertakan dalam stylesheet, gambar latar belakang, atau resource yang dimuat dari skrip. Prakoneksi membantu menyiapkan koneksi ke server lintas origin dan dapat membantu meningkatkan metrik seperti Waktu hingga byte pertama. Hal ini berguna jika Anda mengetahui origin, tetapi tidak selalu URL persis dari resource yang akan diperlukan.

Prioritas Pengambilan melengkapi Petunjuk Resource ini. Ini adalah sinyal berbasis markup yang tersedia melalui atribut fetchpriority yang dapat digunakan developer untuk menunjukkan prioritas relatif resource tertentu. Anda juga dapat menggunakan petunjuk ini melalui JavaScript dan Fetch API dengan properti priority untuk memengaruhi prioritas pengambilan resource yang dilakukan untuk data. Prioritas Pengambilan juga dapat melengkapi pramuat. Ambil gambar Largest Contentful Paint, yang, saat dipramuat, akan tetap mendapatkan prioritas rendah. Jika didorong oleh resource awal berprioritas rendah lainnya, penggunaan Prioritas Pengambilan dapat membantu seberapa cepat gambar dimuat.

Prioritas resource

Urutan download resource bergantung pada prioritas yang ditetapkan browser untuk setiap resource di halaman. Faktor yang dapat memengaruhi logika komputasi prioritas mencakup hal-hal berikut:

  • Jenis resource, seperti CSS, font, skrip, gambar, dan resource pihak ketiga.
  • Lokasi atau urutan dokumen yang merujuk pada resource.
  • Apakah atribut async atau defer digunakan pada skrip.

Tabel berikut menunjukkan cara Chrome memprioritaskan dan mengurutkan sebagian besar resource:

  Memuat dalam fase pemblokiran tata letak Memuat satu per satu dalam fase pemblokiran tata letak
Prioritas
Blink		 VeryHigh Tinggi Sedang Rendah VeryLow
Prioritas
DevTools		 Tertinggi Tinggi Sedang Rendah Terendah
Resource utama
CSS (lebih awal**) CSS (terlambat**) CSS (ketidakcocokan media***)
Skrip (awal** atau bukan dari pemindai pramuat) Skrip (terlambat**) Skrip (asinkron)
Font Font (rel=preload)
Impor
Gambar (di area pandang) Gambar (5 gambar pertama > 10.000 px2) Gambar
Media (video/audio)
Prefetch
XSL
XHR (sinkronisasi) XHR/pengambilan* (asinkron)

Browser mendownload resource dengan prioritas komputasi yang sama sesuai urutan kemunculannya. Anda dapat memeriksa prioritas yang ditetapkan ke berbagai resource saat memuat halaman di tab Jaringan Chrome DevTools. (Pastikan Anda menyertakan kolom prioritas dengan mengklik kanan judul tabel dan mencentang kolom tersebut).

Tab jaringan DevTools di Chrome yang mencantumkan sejumlah resource font. Semuanya adalah Prioritas tertinggi.
Prioritas untuk resource type = "font" di halaman detail berita BBC
Tab Jaringan di DevTools Chrome yang mencantumkan sejumlah resource font. Prioritas ini merupakan campuran dari Prioritas Rendah dan Tinggi.
Prioritas untuk resource type = "script" di halaman detail berita BBC.

Saat prioritas berubah, Anda dapat melihat prioritas awal dan akhir di setelan Baris permintaan besar atau di tooltip.

Tab Network di DevTools Chrome. Setelan &#39;Big request rows&#39; dicentang dan kolom Prioritas menampilkan gambar pertama dengan prioritas Tinggi, dan prioritas awal yang berbeda untuk media di bawahnya. Hal yang sama ditampilkan dalam tooltip.
Perubahan prioritas di DevTools.

Kapan Anda mungkin memerlukan Prioritas Pengambilan?

Setelah memahami logika prioritas browser, Anda dapat menyesuaikan urutan download halaman untuk mengoptimalkan performanya dan Core Web Vitals. Berikut beberapa contoh hal yang dapat Anda ubah untuk memengaruhi prioritas download resource:

  • Tempatkan tag resource seperti <script> dan <link> dalam urutan yang Anda inginkan agar browser mendownloadnya. Resource dengan prioritas yang sama umumnya dimuat sesuai urutan ditemukannya.
  • Gunakan petunjuk resource preload untuk mendownload resource yang diperlukan lebih awal, terutama untuk resource yang tidak mudah ditemukan lebih awal oleh browser.
  • Gunakan async atau defer untuk mendownload skrip tanpa memblokir resource lain.
  • Memuat lambat konten di bawah fold sehingga browser dapat menggunakan bandwidth yang tersedia untuk resource di atas fold yang lebih penting.

Teknik ini membantu mengontrol komputasi prioritas browser, sehingga meningkatkan performa dan Data Web Inti. Misalnya, saat gambar latar penting dipramuat, gambar tersebut dapat ditemukan jauh lebih awal, sehingga meningkatkan Largest Contentful Paint (LCP).

Terkadang, handle ini mungkin tidak cukup untuk memprioritaskan resource secara optimal untuk aplikasi Anda. Berikut beberapa skenario yang dapat membantu Anda menggunakan Prioritas Pengambilan:

  • Anda memiliki beberapa gambar paruh atas, tetapi tidak semuanya harus memiliki prioritas yang sama. Misalnya, dalam carousel gambar, hanya gambar pertama yang terlihat yang memerlukan prioritas lebih tinggi, dan yang lainnya, biasanya di luar layar pada awalnya dapat disetel untuk memiliki prioritas lebih rendah.
  • Gambar di dalam area pandang biasanya dimulai dengan prioritas Low. Setelah tata letak selesai, Chrome akan menemukan bahwa elemen tersebut berada di area tampilan dan meningkatkan prioritasnya. Hal ini biasanya menambahkan penundaan yang signifikan untuk memuat gambar penting, seperti banner besar. Menyediakan Prioritas Ambil di markup memungkinkan gambar dimulai pada prioritas High dan mulai dimuat jauh lebih awal. Dalam upaya untuk mengotomatiskan proses ini, lima gambar pertama yang lebih besar ditetapkan ke prioritas Medium oleh Chrome yang akan membantu, tetapi fetchpriority="high" eksplisit akan lebih baik.

    Pramuat masih diperlukan untuk penemuan awal gambar LCP yang disertakan sebagai latar belakang CSS. Untuk meningkatkan prioritas gambar latar, sertakan fetchpriority='high' di pramuat.
  • Mendeklarasikan skrip sebagai async atau defer akan memberi tahu browser untuk memuat skrip secara asinkron. Namun, seperti yang ditampilkan dalam tabel prioritas, skrip ini juga diberi prioritas "Rendah". Anda dapat meningkatkan prioritasnya sekaligus memastikan download asinkron, terutama untuk skrip yang penting bagi pengalaman pengguna.
  • Jika Anda menggunakan JavaScript fetch() API untuk mengambil resource atau data secara asinkron, browser akan menetapkan prioritas High. Anda mungkin ingin beberapa pengambilan berjalan dengan prioritas lebih rendah, terutama jika Anda menggabungkan panggilan API latar belakang dengan panggilan API yang merespons input pengguna. Menandai panggilan API latar belakang sebagai prioritas Low dan panggilan API interaktif sebagai prioritas High.
  • Browser menetapkan prioritas High pada CSS dan font, tetapi beberapa resource tersebut mungkin lebih penting daripada yang lain. Anda dapat menggunakan Prioritas Ambil untuk menurunkan prioritas aset yang tidak penting (perhatikan bahwa CSS di awal adalah pemblokiran render sehingga biasanya harus menjadi prioritas High).

Atribut fetchpriority

Gunakan atribut HTML fetchpriority untuk menentukan prioritas download untuk jenis resource seperti CSS, font, skrip, dan gambar saat didownload menggunakan tag link, img, atau script. Dapat menggunakan nilai berikut:

  • high: Resource memiliki prioritas yang lebih tinggi, dan Anda ingin browser memprioritaskannya lebih tinggi dari biasanya, selama heuristik browser tersebut tidak mencegah hal tersebut terjadi.
  • low: Resource memiliki prioritas lebih rendah, dan Anda ingin browser tidak memprioritaskannya, sekali lagi jika heuristiknya mengizinkannya.
  • auto: Nilai default, yang memungkinkan browser memilih prioritas yang sesuai.

Berikut adalah beberapa contoh penggunaan atribut fetchpriority dalam markup, serta properti priority yang setara dengan skrip.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Efek prioritas browser dan fetchpriority

Anda dapat menerapkan atribut fetchpriority ke berbagai resource seperti ditunjukkan dalam tabel berikut untuk meningkatkan atau mengurangi prioritas komputasinya. fetchpriority="auto" (◉) di setiap baris menandai prioritas default untuk jenis resource tersebut. (juga tersedia sebagai Dokumen Google).

  Memuat dalam fase pemblokiran tata letak Memuat satu per satu dalam fase pemblokiran tata letak
Prioritas
Kedip		 VeryHigh Tinggi Sedang Rendah VeryLow
Prioritas
DevTools		 Tertinggi Tinggi Sedang Rendah Terendah
Referensi Utama ◉
CSS (awal**) ⬆◉ ⬇
CSS (terlambat**) ⬆ ◉ ⬇
CSS (ketidakcocokan media***) ⬆*** ◉⬇
Skrip (lebih awal** atau tidak dari pemindai pramuat) ⬆◉ ⬇
Skrip (terlambat**) ⬆ ◉ ⬇
Skrip (async/defer) ⬆ ◉⬇
Font ◉
Font (rel=pramuat) ⬆◉ ⬇
Impor ◉
Gambar (di area pandang - setelah tata letak) ⬆◉ ⬇
Gambar (5 gambar pertama > 10.000 px2) ⬆ ◉ ⬇
Gambar ⬆ ◉⬇
Media (video/audio) ◉
XHR (sinkronisasi) - tidak digunakan lagi ◉
XHR/fetch* (asinkron) ⬆◉ ⬇
Prefetch ◉
XSL ◉

fetchpriority menetapkan prioritas relatif, yang berarti kode tersebut akan menaikkan atau menurunkan prioritas default dengan jumlah yang sesuai, bukan menetapkan prioritas secara eksplisit ke High atau Low. Hal ini sering kali menghasilkan prioritas High atau Low, tetapi tidak selalu. Misalnya, CSS penting dengan fetchpriority="high" mempertahankan prioritas "Sangat Tinggi"/"Tertinggi", dan penggunaan fetchpriority="low" pada elemen ini mempertahankan prioritas "Tinggi". Tidak satu pun dari kasus ini yang melibatkan penetapan prioritas secara eksplisit ke High atau Low.

Kasus penggunaan

Gunakan atribut fetchpriority jika Anda ingin memberikan petunjuk tambahan ke browser tentang prioritas pengambilan resource.

Meningkatkan prioritas gambar LCP

Anda dapat menentukan fetchpriority="high" untuk meningkatkan prioritas LCP atau gambar penting lainnya.

<img src="lcp-image.jpg" fetchpriority="high">

Perbandingan berikut menunjukkan halaman Google Penerbangan dengan gambar latar LCP yang dimuat dengan dan tanpa Prioritas Pengambilan. Dengan prioritas yang ditetapkan ke tinggi, LCP meningkat dari 2,6 detik menjadi 1,9 detik.

Eksperimen yang dilakukan menggunakan pekerja Cloudflare untuk menulis ulang halaman Google Penerbangan menggunakan Ambil Prioritas.

Gunakan fetchpriority="low" untuk menurunkan prioritas gambar paruh atas yang tidak terlalu penting, misalnya gambar di luar layar dalam carousel gambar.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

Meskipun gambar 2-4 akan berada di luar area pandang, gambar tersebut dapat dianggap "cukup dekat" untuk meningkatkannya ke high dan juga dimuat meskipun jika atribut load=lazy ditambahkan. Oleh karena itu, fetchpriority="low" adalah solusi yang tepat untuk masalah ini.

Dalam eksperimen sebelumnya dengan aplikasi Oodle, kami menggunakan ini untuk menurunkan prioritas gambar yang tidak muncul saat dimuat. Cara ini mengurangi waktu muat halaman selama 2 detik.

Perbandingan Fetch Priority saat digunakan di carousel gambar aplikasi Oodle. Di sebelah kiri, browser menetapkan prioritas default untuk gambar carousel, tetapi mendownload dan menggambar gambar tersebut sekitar dua detik lebih lambat daripada contoh di sebelah kanan, yang menetapkan prioritas lebih tinggi hanya pada gambar carousel pertama.
Dengan menggunakan prioritas tinggi hanya untuk gambar carousel pertama, halaman dapat dimuat lebih cepat.

Menurunkan prioritas resource yang dipramuat

Agar resource yang dipramuat tidak bersaing dengan resource penting lainnya, Anda dapat mengurangi prioritasnya. Gunakan teknik ini dengan gambar, skrip, dan CSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Mengurutkan ulang prioritas skrip

Skrip yang diperlukan halaman Anda untuk interaktif harus dimuat dengan cepat, tetapi tidak boleh memblokir resource lain yang lebih penting, yang memblokir render. Anda dapat menandainya sebagai async dengan prioritas tinggi.

<script src="async_but_important.js" async fetchpriority="high"></script>

Anda tidak dapat menandai skrip sebagai async jika skrip tersebut mengandalkan status DOM tertentu. Namun, jika dijalankan nanti di halaman, Anda dapat memuat dengan prioritas yang lebih rendah:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Tindakan ini akan tetap memblokir parser saat mencapai skrip ini, tetapi akan mengizinkan konten sebelum ini diprioritaskan.

Alternatifnya, jika DOM yang sudah selesai diperlukan, gunakan atribut defer (yang berjalan secara berurutan setelah DOMContentLoaded), atau bahkan async di bagian bawah halaman.

Menurunkan prioritas untuk pengambilan data yang tidak penting

Browser menjalankan fetch dengan prioritas tinggi. Jika memiliki beberapa pengambilan yang mungkin diaktifkan secara bersamaan, Anda dapat menggunakan prioritas default tinggi untuk pengambilan data yang lebih penting dan menurunkan prioritas data yang kurang penting.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Mengambil catatan penerapan Prioritas

Prioritas Pengambilan dapat meningkatkan performa dalam kasus penggunaan tertentu, tetapi ada beberapa hal yang perlu diketahui saat menggunakan Prioritas Pengambilan:

  • Atribut fetchpriority adalah petunjuk, bukan perintah. Browser mencoba menghormati preferensi developer, tetapi browser juga dapat menerapkan preferensi prioritas resource-nya untuk prioritas resource guna menyelesaikan konflik.

  • Jangan samakan antara Ambil Prioritas dengan pramuat:

    • Pramuat adalah pengambilan wajib, bukan petunjuk.
    • Pramuat memungkinkan browser menemukan resource lebih awal, tetapi tetap mengambil resource dengan prioritas default. Sebaliknya, Prioritas Ambil tidak membantu visibilitas, tetapi memungkinkan Anda meningkatkan atau mengurangi prioritas pengambilan.
    • Sering kali lebih mudah untuk mengamati dan mengukur efek pramuat daripada efek perubahan prioritas.

    Prioritas Pengambilan dapat melengkapi pramuat dengan meningkatkan tingkat perincian prioritas. Jika Anda telah menentukan pramuat sebagai salah satu item pertama dalam <head> untuk gambar LCP, maka Prioritas Pengambilan high mungkin tidak meningkatkan LCP secara signifikan. Namun, jika pramuat terjadi setelah resource lain dimuat, Prioritas Pengambilan high dapat lebih meningkatkan LCP. Jika gambar penting adalah gambar latar CSS, pramuat gambar tersebut dengan fetchpriority = "high".

  • Peningkatan waktu pemuatan berdasarkan prioritas lebih relevan di lingkungan dengan lebih banyak resource yang bersaing untuk mendapatkan bandwidth jaringan yang tersedia. Hal ini umum terjadi untuk koneksi HTTP/1.x yang tidak memungkinkan download paralel, atau pada koneksi HTTP/2 atau HTTP/3 dengan bandwidth rendah. Dalam kasus ini, prioritas dapat membantu menyelesaikan bottleneck.

  • CDN tidak menerapkan prioritas HTTP/2 secara seragam, dan demikian pula untuk HTTP/3. Meskipun browser menyampaikan prioritas dari Prioritas Pengambilan, CDN mungkin tidak memprioritaskan ulang resource dalam urutan yang ditentukan. Hal ini menyulitkan pengujian Prioritas Pengambilan. Prioritas diterapkan secara internal di dalam browser dan dengan protokol yang mendukung penentuan prioritas (HTTP/2 dan HTTP/3). Ada baiknya menggunakan Fetch Priority hanya untuk prioritas browser internal yang tidak bergantung pada CDN atau dukungan asal, karena prioritas sering kali berubah saat browser meminta resource. Misalnya, resource prioritas rendah seperti gambar sering kali ditahan sehingga tidak diminta saat browser memproses item <head> penting.

  • Anda mungkin tidak dapat memperkenalkan Fetch Priority sebagai praktik terbaik dalam desain awal Anda. Selanjutnya dalam siklus pengembangan, Anda dapat menetapkan prioritas yang ditetapkan ke berbagai aset pada halaman, dan jika tidak sesuai dengan harapan, Anda dapat memperkenalkan Prioritas Ambil untuk pengoptimalan lebih lanjut.

Developer harus menggunakan pramuat untuk tujuan yang diinginkan—untuk memuat ulang resource yang tidak terdeteksi oleh parser (font, impor, gambar LCP latar belakang). Penempatan petunjuk preload akan memengaruhi kapan resource dipramuat.

Prioritas pengambilan adalah tentang cara resource diambil saat diambil.

Tips untuk menggunakan pramuat

Perhatikan hal-hal berikut saat menggunakan pramuat:

  • Menyertakan pramuat di header HTTP akan menempatkannya di urutan pemuatan berikutnya.
  • Umumnya, pemuatan pramuat sesuai urutan yang diperoleh parser untuk apa pun dengan prioritas Medium atau yang lebih tinggi. Berhati-hatilah jika Anda menyertakan pramuat di awal HTML.
  • Pramuat font mungkin berfungsi paling baik di akhir kepala atau awal isi.
  • Pramuat impor (import() atau modulepreload dinamis) harus berjalan setelah tag skrip yang memerlukan impor, jadi pastikan skrip dimuat atau diuraikan terlebih dahulu agar dapat dievaluasi saat dependensinya dimuat.
  • Pemuatan ulang gambar memiliki prioritas Low atau Medium secara default. Urutkan tag tersebut relatif terhadap skrip asinkron dan tag prioritas rendah atau terendah lainnya.

Histori

Prioritas Pengambilan pertama kali diuji coba di Chrome sebagai uji coba origin pada tahun 2018, lalu bereksperimen lagi pada tahun 2021 menggunakan atribut importance. Pada saat itu, setelan ini disebut Priority Hints. Antarmuka ini telah diubah menjadi fetchpriority untuk HTML dan priority untuk Fetch API JavaScript sebagai bagian dari proses standar web. Untuk mengurangi kebingungan, sekarang kami menyebut API Pengambilan Prioritas ini.

Kesimpulan

Developer mungkin tertarik dengan Prioritas Pengambilan dengan perbaikan pada perilaku pramuat dan fokus terbaru pada Core Web Vitals dan LCP. Mereka sekarang memiliki kenop tambahan yang tersedia untuk mencapai urutan pemuatan yang diinginkan.