Mengoptimalkan pemuatan resource dengan Fetch Priority API

Fetch Priority API menunjukkan prioritas relatif resource terhadap browser. Data ini dapat mengaktifkan 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: tidak didukung.
  • Safari: 17.2.

Sumber

Saat browser mengurai halaman web dan mulai menemukan serta mendownload resource seperti gambar, skrip, atau CSS, browser akan menetapkan priority pengambilan ke browser tersebut agar dapat mendownloadnya dalam urutan yang optimal. Prioritas sumber daya biasanya bergantung pada apa dan letaknya dalam dokumen. Misalnya, gambar dalam tampilan mungkin memiliki prioritas High, dan prioritas untuk CSS yang dimuat lebih awal dan memblokir render menggunakan <link> di <head> mungkin adalah Very High. Browser cukup baik dalam menetapkan prioritas yang berfungsi 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 Ambil 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 peretasan 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, Fetch Priority digunakan untuk meningkatkan prioritas banner besar, sehingga menghasilkan penurunan LCP selama 0,7 detik.
Mengambil Prioritas yang meningkatkan Largest Contentful Paint dari 2,6 dtk menjadi 1,9 dtk dalam pengujian Google Penerbangan.

Sebelumnya, developer memiliki pengaruh terbatas terhadap prioritas resource menggunakan pramuat dan prakoneksi. Pramuat memungkinkan Anda memberi tahu browser tentang resource penting yang ingin Anda muat lebih awal sebelum browser menemukannya secara alami. Ini sangat berguna untuk sumber daya yang sulit ditemukan, seperti font yang dimasukkan dalam stylesheet, gambar latar, atau sumber daya 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 belum tentu URL tepat 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 sumber daya tergantung pada prioritas yang ditetapkan browser untuk setiap sumber daya pada laman. Berbagai faktor yang dapat memengaruhi komputasi prioritas logika meliputi:

  • 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
Kedip		 VeryHigh Tinggi Sedang Rendah VeryLow
DevTools
Priority		 Tertinggi Tinggi Sedang Rendah Terendah
Resource utama
CSS (lebih awal**) CSS (terlambat**) CSS (ketidakcocokan media***)
Skrip (lebih awal** atau tidak dari pemindai pramuat) Skrip (terlambat**) Skrip (asinkron)
Font Font (rel=pramuat)
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 untuk berbagai resource saat memuat halaman pada tab Jaringan Chrome Dev Tools. (Pastikan Anda menyertakan kolom prioritas dengan mengklik kanan judul tabel dan mencentangnya).

Tab jaringan DevTools di Chrome yang mencantumkan sejumlah resource font. Semuanya adalah Prioritas tertinggi.
Prioritas untuk materi type = "font" di halaman detail berita BBC
Tab jaringan DevTools di Chrome yang mencantumkan sejumlah resource font. Keduanya merupakan gabungan antara prioritas Rendah dan Tinggi.
Prioritas untuk materi 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. &#39;Baris permintaan besar&#39; dicentang dan kolom Prioritas menampilkan gambar pertama dengan prioritas Tinggi, dan prioritas awal media yang berbeda di bawahnya. Hal yang sama ditampilkan dalam tooltip.
Perubahan prioritas di DevTools.

Kapan Anda memerlukan fitur Ambil Prioritas?

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

  • Tempatkan tag resource seperti <script> dan <link> dalam urutan yang Anda inginkan agar didownload oleh browser. 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.
  • Muat lambat konten paruh bawah sehingga browser dapat menggunakan bandwidth yang tersedia untuk resource paruh atas yang lebih penting.

Teknik ini membantu mengontrol komputasi prioritas browser, sehingga meningkatkan performa dan Core Web Vitals. 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 adalah beberapa skenario ketika Pengambilan Prioritas dapat membantu:

  • Anda memiliki beberapa gambar paruh atas, tetapi tidak semuanya harus memiliki prioritas yang sama. Contohnya, dalam carousel gambar, hanya gambar pertama yang terlihat yang memerlukan prioritas lebih tinggi, dan gambar lainnya, biasanya di luar layar yang awalnya dapat disetel agar memiliki prioritas yang lebih rendah.
  • Gambar di dalam area pandang biasanya dimulai dengan prioritas Low. Setelah tata letak selesai, Chrome akan mengetahui bahwa tata letak berada di area pandang dan akan meningkatkan prioritas. Hal ini biasanya menyebabkan penundaan yang signifikan saat 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 menjadi lebih baik.

    Pramuat masih diperlukan untuk penemuan awal gambar LCP yang disertakan sebagai latar belakang CSS. Untuk meningkatkan kualitas gambar latar prioritaskan, sertakan fetchpriority='high' di pramuat.
  • Mendeklarasikan skrip sebagai async atau defer akan memberi tahu browser untuk memuatnya secara asinkron. Namun, seperti yang ditunjukkan dalam tabel prioritas, skrip ini juga diberi nilai "Rendah" prioritas Anda. Anda mungkin ingin meningkatkan prioritasnya sambil 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 guna menentukan prioritas download untuk berbagai jenis resource seperti CSS, font, skrip, dan gambar saat didownload menggunakan tag link, img, atau script. Kolom ini dapat berisi 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" (DEFAULT) 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
DevTools
Priority		 Tertinggi Tinggi Sedang Rendah Terendah
Resource Utama ◉
CSS (lebih awal**) ⬆◉ ⬇
CSS (terlambat**) ⬆ ◉ ⬇
CSS (ketidakcocokan media***) ⬆*** ◉⬇
Skrip (lebih awal** atau tidak dari pemindai pramuat) ⬆◉ ⬇
Skrip (terlambat**) ⬆ ◉ ⬇
Skrip (asinkron/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/pengambilan* (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. Ini sering kali menghasilkan prioritas High atau Low, tetapi tidak selalu. Misalnya, CSS penting dengan fetchpriority="high" akan mempertahankan nilai "Sangat Tinggi"/"Tertinggi" prioritas tinggi, dan penggunaan fetchpriority="low" pada elemen ini akan mempertahankan nilai "Tinggi" prioritas Anda. 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 menampilkan halaman Google Penerbangan dengan gambar latar LCP yang dimuat dengan dan tanpa Ambil Prioritas. Dengan prioritas ditetapkan ke tinggi, LCP ditingkatkan dari 2,6 dtk menjadi 1,9 dtk.

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

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 mungkin dianggap "cukup dekat" untuk meningkatkannya ke high dan juga dimuat meskipun 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 akan 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.
Menggunakan prioritas tinggi hanya untuk gambar carousel pertama memungkinkan halaman 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'">

Duplikasikan skrip

Skrip yang diperlukan halaman Anda untuk interaktif harus dimuat dengan cepat, tetapi tidak boleh memblokir resource lain yang lebih penting dan pemblokir render. Anda dapat menandai ini 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 bergantung pada status DOM tertentu. Namun, jika dijalankan nanti di halaman, Anda dapat memuatnya 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 memungkinkan konten sebelum ini diprioritaskan.

Alternatifnya, jika DOM yang telah selesai diperlukan, adalah dengan menggunakan 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 Anda memiliki beberapa pengambilan yang mungkin diaktifkan secara bersamaan, Anda dapat menggunakan prioritas default yang tinggi untuk pengambilan data yang lebih penting dan menurunkan prioritas untuk 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 masih 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 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 meningkatkan LCP lebih lanjut. 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 untuk koneksi HTTP/1.x yang tidak dapat mendownload paralel, atau pada koneksi HTTP/2 atau HTTP/3 bandwidth rendah. Dalam kasus ini, penentuan prioritas dapat membantu mengatasi bottleneck.

  • CDN tidak menerapkan penentuan prioritas HTTP/2 secara seragam, dan begitu juga untuk HTTP/3. Bahkan jika browser mengomunikasikan prioritas dari Fetch Priority, 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 tujuannya—untuk melakukan pramuat resource yang tidak terdeteksi oleh parser (font, impor, gambar LCP latar belakang). Penempatan petunjuk preload akan terpengaruh saat resource dipramuat.

Prioritas pengambilan berkaitan dengan bagaimana resource harus 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, pramuat dimuat sesuai urutan yang dilakukan parser untuknya untuk apa pun dengan prioritas Medium atau yang lebih tinggi. Hati-hati 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 dijalankan setelah tag skrip yang memerlukan impor, jadi pastikan skrip dimuat atau diuraikan terlebih dahulu agar dapat dievaluasi saat dependensinya dimuat.
  • Pramuat gambar memiliki prioritas Low atau Medium secara default. Urutkan secara 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 disebut Priority Hints. Sejak saat itu, antarmuka berubah 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 cenderung tertarik untuk menggunakan fitur Ambil Prioritas dengan perbaikan perilaku pramuat serta fokus terbaru pada Core Web Vitals dan LCP. Mereka sekarang memiliki kenop tambahan yang tersedia untuk mencapai urutan pemuatan yang diinginkan.