Mengoptimalkan pemuatan resource dengan Fetch Priority API

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

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

Dukungan Browser

  • 102
  • 102
  • x
  • 17,2

Sumber

Saat browser mengurai halaman web dan mulai menemukan serta mendownload resource seperti gambar, skrip, atau CSS, browser akan menetapkan priority pengambilan sehingga dapat mendownloadnya dalam urutan optimal. Prioritas resource biasanya bergantung pada resource dan lokasinya dalam dokumen. Misalnya, gambar dalam area pandang mungkin memiliki prioritas High, dan prioritas untuk CSS yang dimuat awal dan memblokir perenderan yang 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 Data Web Inti.

Ringkasan

Beberapa area utama tempat Pengambilan Prioritas dapat membantu:

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

Selama ini, developer memiliki pengaruh yang terbatas terhadap prioritas resource menggunakan pramuat dan preconnect. Pramuat memungkinkan Anda memberi tahu browser tentang resource penting yang ingin dimuat lebih awal sebelum browser menemukannya secara alami. Hal ini sangat berguna untuk sumber daya yang lebih sulit ditemukan, seperti font yang disertakan dalam stylesheet, gambar latar, atau sumber daya yang dimuat dari skrip. Preconnect membantu mempersiapkan koneksi ke server lintas origin dan dapat meningkatkan metrik seperti Waktu hingga byte pertama. Hal ini berguna jika Anda mengetahui asal, tetapi belum tentu URL yang tepat dari resource yang akan diperlukan.

Prioritas Pengambilan melengkapi Petunjuk Resource ini. Sinyal berbasis markup ini 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 dibuat untuk data. Pengambilan Prioritas juga dapat melengkapi pramuat. Mengambil gambar Largest Contentful Paint, yang saat dimuat sebelumnya, masih akan mendapatkan prioritas rendah. Jika ditolak oleh resource berprioritas rendah awal lainnya, penggunaan Prioritas Pengambilan dapat membantu mempercepat pemuatan gambar.

Prioritas resource

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

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

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

  Pemuatan 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 (akhir**) CSS (media tidak cocok***)
Skrip (awal** atau bukan dari pemindai pramuat) Skrip (terlambat**) Skrip (asinkron)
Font Font (rel=pramuat)
Impor
Gambar (di area pandang) Gambar (5 gambar pertama > 10.000px2) Gambar
Media (video/audio)
Prefetch
XSL
XHR (sinkronisasi) XHR/fetch* (asinkron)

Browser mendownload resource dengan prioritas komputasi yang sama sesuai urutan penemuannya. Anda dapat memeriksa prioritas yang ditetapkan ke resource yang berbeda saat memuat halaman di tab Jaringan Chrome Dev Tools. (Pastikan Anda menyertakan kolom prioritas dengan mengklik kanan judul tabel dan mencentangnya).

Tab jaringan di DevTools Chrome yang mencantumkan sejumlah resource font. Semua itu adalah prioritas Tertinggi.
Prioritas untuk referensi type = "font" di halaman detail berita BBC
Tab jaringan di DevTools Chrome yang mencantumkan sejumlah resource font. Keduanya adalah campuran dari prioritas Rendah dan Tinggi.
Prioritas untuk referensi 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 jaringan DevTools Chrome. Setelan &#39;Baris permintaan besar&#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 memerlukan Prioritas Pengambilan?

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

  • Tempatkan tag resource seperti <script> dan <link> sesuai urutan yang Anda inginkan untuk didownload oleh browser. Resource dengan prioritas yang sama umumnya dimuat sesuai urutan penemuannya.
  • Gunakan petunjuk resource preload untuk mendownload resource yang diperlukan lebih awal, terutama untuk resource yang tidak mudah ditemukan di awal oleh browser.
  • Gunakan async atau defer untuk mendownload skrip tanpa memblokir resource lain.
  • Pemuatan 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 Data Web Inti. Misalnya, jika gambar latar penting telah dimuat sebelumnya, gambar tersebut dapat ditemukan jauh lebih awal, sehingga meningkatkan Largest Contentful Paint (LCP).

Terkadang tuas ini mungkin tidak cukup untuk memprioritaskan resource secara optimal bagi aplikasi Anda. Berikut adalah beberapa skenario yang dapat membantu Pengambilan Prioritas:

  • 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 gambar lainnya, yang biasanya di balik layar pada awalnya dapat disetel agar memiliki prioritas yang lebih rendah.
  • Gambar di dalam area pandang biasanya dimulai pada prioritas Low. Setelah tata letak selesai, Chrome menemukan bahwa pengguna berada di area pandang dan meningkatkan prioritasnya. Hal ini biasanya menambahkan penundaan yang cukup lama untuk memuat gambar kritis, seperti {i>hero images<i}. Dengan menyediakan Prioritas Pengambilan dalam markup, gambar dapat dimulai pada prioritas High dan mulai dimuat lebih awal. Dalam upaya untuk mengotomatiskan hal ini, lima gambar pertama yang lebih besar disetel ke prioritas Medium oleh Chrome yang akan membantu, tetapi fetchpriority="high" eksplisit akan jauh lebih baik.

    Pramuat masih diperlukan untuk penemuan awal gambar LCP yang disertakan sebagai latar belakang CSS. Untuk meningkatkan prioritas gambar latar belakang, sertakan fetchpriority='high' di pramuat.
  • Mendeklarasikan skrip sebagai async atau defer akan memberi tahu browser untuk memuatnya secara asinkron. Namun, seperti yang ditampilkan dalam tabel prioritas, skrip ini juga diberi prioritas "Rendah". Anda mungkin ingin meningkatkan prioritasnya sambil memastikan download asinkron, terutama untuk skrip yang sangat penting bagi pengalaman pengguna.
  • Jika Anda menggunakan JavaScript fetch() API untuk mengambil resource atau data secara asinkron, browser menetapkan prioritas High untuknya. Anda mungkin ingin menjalankan beberapa pengambilan dengan prioritas lebih rendah, terutama jika Anda mencampur 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 untuk CSS dan font, tetapi beberapa resource tersebut mungkin lebih penting daripada yang lain. Anda dapat menggunakan Prioritas Pengambilan untuk menurunkan prioritas resource yang tidak penting (perhatikan bahwa CSS awal adalah pemblokir render, jadi 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. Parameter ini dapat berisi nilai berikut:

  • high: Resource merupakan prioritas yang lebih tinggi dan Anda ingin browser memprioritaskannya lebih tinggi dari biasanya, selama heuristik browser 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 di 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>

Pengaruh prioritas browser dan fetchpriority

Anda dapat menerapkan atribut fetchpriority ke resource yang berbeda seperti yang 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).

  Pemuatan 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
Referensi Utama ◉
CSS (lebih awal**) ⬆◉ ⬇
CSS (akhir**) ⬆ ◉ ⬇
CSS (media tidak cocok***) ⬆*** ◉⬇
Skrip (awal** atau bukan 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.000px2) ⬆ ◉ ⬇
Gambar ⬆ ◉⬇
Media (video/audio) ◉
XHR (sinkronisasi) - tidak digunakan lagi ◉
XHR/fetch* (asinkron) ⬆◉ ⬇
Prefetch ◉
XSL ◉

fetchpriority menetapkan prioritas relatif, yang berarti menaikkan atau menurunkan prioritas default dengan jumlah yang sesuai, bukan menetapkan prioritas secara eksplisit ke High atau Low. Hal ini sering menghasilkan prioritas High atau Low, tetapi tidak selalu. Misalnya, CSS penting dengan fetchpriority="high" akan mempertahankan prioritas "Sangat Tinggi"/"Tertinggi", dan penggunaan fetchpriority="low" pada elemen ini akan mempertahankan prioritas "Tinggi". Tak 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. Setelah prioritas disetel 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 Pengambilan.

Gunakan fetchpriority="low" untuk menurunkan prioritas gambar paruh atas yang tidak langsung penting, misalnya gambar di balik 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 jika atribut load=lazy ditambahkan. Oleh karena itu, fetchpriority="low" adalah solusi yang tepat untuk ini.

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

Perbandingan berdampingan untuk Prioritas Pengambilan saat digunakan pada 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.
Menggunakan prioritas tinggi hanya untuk gambar carousel pertama memungkinkan halaman dimuat lebih cepat.

Menurunkan prioritas resource bawaan

Agar resource yang dimuat sebelumnya 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'">

Buat ulang skrip

Skrip halaman Anda harus interaktif harus dimuat dengan cepat, tetapi tidak boleh memblokir resource lain yang lebih penting dan memblokir 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 bergantung pada status DOM tertentu. Namun, jika keduanya berjalan 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 mengizinkan konten sebelum ini diprioritaskan.

Alternatifnya, jika DOM lengkap diperlukan, adalah dengan menggunakan atribut defer (yang berjalan, secara berurutan, setelah DOMContentLoaded), atau bahkan async di bagian bawah halaman.

Turunkan 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 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 harus diperhatikan saat menggunakan Prioritas Pengambilan:

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

  • Jangan salah membedakan antara Fetch Priority dengan pramuat:

    • Pramuat adalah pengambilan wajib, bukan petunjuk.
    • Pramuat memungkinkan browser menemukan resource lebih awal, tetapi browser masih mengambil resource dengan prioritas default. Sebaliknya, Prioritas Pengambilan 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 sudah menentukan pramuat sebagai salah satu item pertama dalam <head> untuk gambar LCP, 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 kritis adalah gambar latar CSS, pramuat dengan fetchpriority = "high".

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

  • CDN tidak menerapkan prioritas HTTP/2 secara seragam, begitu pula untuk HTTP/3. Meskipun browser menyampaikan prioritas dari Prioritas Pengambilan, CDN mungkin tidak memprioritaskan ulang resource dalam urutan yang ditentukan. Hal ini membuat pengujian Prioritas Pengambilan menjadi sulit. Prioritas diterapkan secara internal dalam browser dan dengan protokol yang mendukung penentuan prioritas (HTTP/2 dan HTTP/3). Tidak ada salahnya menggunakan Prioritas Pengambilan hanya untuk prioritas browser internal yang tidak bergantung pada CDN atau dukungan asal, karena prioritas sering berubah saat browser meminta resource. Misalnya, resource berprioritas rendah seperti gambar sering kali tidak dapat diminta saat browser memproses item <head> penting.

  • Anda mungkin tidak dapat memperkenalkan Pengambilan Prioritas sebagai praktik terbaik dalam desain awal Anda. Di tahapan selanjutnya dalam siklus pengembangan, Anda dapat menetapkan prioritas ke sumber daya yang berbeda pada halaman, dan jika prioritas tersebut tidak sesuai dengan harapan, Anda dapat memperkenalkan Prioritas Pengambilan untuk pengoptimalan lebih lanjut.

Developer harus menggunakan pramuat untuk tujuan yang dimaksudkan—untuk melakukan pramuat resource yang tidak terdeteksi oleh parser (font, impor, gambar LCP latar belakang). Penempatan petunjuk preload akan memengaruhi kapan 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 sebelum yang lainnya dalam urutan pemuatan.
  • Umumnya, pramuat dimuat sesuai urutan yang akan dilakukan parser untuk apa pun dengan prioritas Medium atau lebih tinggi. Hati-hati jika Anda menyertakan pramuat di awal HTML Anda.
  • Pramuat font mungkin berfungsi paling baik di akhir kepala atau awal tubuh.
  • Pramuat impor (import() atau modulepreload dinamis) harus dijalankan setelah tag skrip yang memerlukan impor. Jadi, pastikan skrip dimuat atau diurai terlebih dahulu sehingga dapat dievaluasi saat dependensinya dimuat.
  • Pramuat gambar memiliki prioritas Low atau Medium secara default. Urutkan file tersebut sesuai dengan skrip asinkron dan tag prioritas rendah atau terendah lainnya.

Histori

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

Kesimpulan

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