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
Pollard Barry

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 dalam upaya mendownload resource dalam urutan optimal. Prioritas ini dapat bergantung pada jenis resource dan lokasinya dalam dokumen. Misalnya, gambar dalam area pandang mungkin memiliki prioritas High, sedangkan prioritas untuk CSS yang dimuat awal melalui <link> di <head> bisa menjadi Very High. Browser cukup baik dalam menetapkan prioritas yang bekerja dengan baik, tetapi mungkin tidak optimal dalam semua kasus.

Dalam artikel ini, kita akan membahas Fetch Priority API dan atribut HTML fetchpriority, yang memungkinkan Anda menunjukkan prioritas relatif resource (high atau low). Prioritas Pengambilan dapat membantu mengoptimalkan Data Web Inti.

Ringkasan

Beberapa area utama tempat Pengambilan Prioritas dapat membantu:

  • Tingkatkan prioritas gambar LCP dengan menentukan fetchpriority="high" pada elemen gambar, yang menyebabkan LCP terjadi lebih cepat.
  • Tingkatkan prioritas skrip async menggunakan semantik yang lebih baik daripada peretasan saat ini yang umum digunakan (menyisipkan <link rel="preload"> untuk skrip async).
  • Kurangi 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 banner besar, 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

Secara historis, developer memiliki pengaruh tertentu terhadap prioritas resource, tetapi terbatas menggunakan pramuat dan preconnect. Prioritas Pengambilan melengkapi Petunjuk Resource ini, tetapi penting untuk memahami kesesuaiannya. Pramuat memungkinkan Anda memberi tahu browser tentang sumber daya penting yang ingin Anda muat lebih awal sebelum ditemukan secara alami. Hal ini sangat berguna untuk sumber daya yang tidak mudah 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 Time-to-first-byte dan berguna saat Anda mengetahui origin, tetapi belum tentu URL persis resource yang akan diperlukan.

Prioritas Pengambilan adalah sinyal berbasis markup (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 Pengambilan tersedia di Chrome 101 atau yang lebih baru.

Prioritas resource

Urutan download aset bergantung pada prioritas yang ditetapkan browser untuk setiap aset pada halaman. Berbagai faktor dapat memengaruhi logika komputasi prioritas. Misalnya,

  • CSS, font, skrip, gambar, dan resource pihak ketiga diberi prioritas yang berbeda.
  • Lokasi atau urutan referensi resource dalam dokumen juga memengaruhi prioritas resource.
  • Petunjuk resource preload membantu browser menemukan resource lebih cepat sehingga memuatnya sebelum dokumen dimuat dan memengaruhi prioritas.
  • Perubahan komputasi prioritas untuk skrip async atau defer.

Tabel berikut mempertimbangkan faktor-faktor tersebut untuk menunjukkan cara sebagian besar resource saat ini diprioritaskan dan diurutkan di Chrome.

  Pemuatan dalam fase pemblokiran tata letak Memuat satu per satu dalam fase pemblokiran tata letak
Prioritas
Blink		 VeryHigh Tinggi Media Rendah VeryLow
Prioritas
DevTools		 Tertinggi Tinggi Media 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
Dokumen SVG
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).

Screenshot aset yang tercantum di tab jaringan di DevTools Chrome. Kolom tersebut dibaca dari kiri ke kanan: nama, status, jenis, inisiator, ukuran, waktu, dan prioritas.
Prioritas untuk referensi type = "font" di halaman detail berita BBC
Screenshot aset yang tercantum di tab jaringan di DevTools Chrome. Kolom tersebut dibaca dari kiri ke kanan: nama, status, jenis, inisiator, ukuran, waktu, dan prioritas.
Prioritas untuk jenis referensi = "script" di halaman detail berita BBC

Jika prioritas berubah, Anda dapat menggunakan setelan Baris permintaan besar untuk melihat prioritas awal dan akhir. Hal yang sama akan ditampilkan dalam tooltip, apa pun setelan Baris permintaan besar.

Screenshot aset yang tercantum di tab jaringan di 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.
Melihat prioritas awal dan akhir di DevTools

Kapan Anda memerlukan Prioritas Pengambilan?

Pengetahuan tentang logika prioritas browser memberi Anda beberapa tombol yang ada untuk mengubah urutan unduhan. Anda dapat

  1. Tempatkan tag resource seperti <script> dan <link> bergantung pada urutan download yang Anda inginkan. Resource dengan prioritas yang sama umumnya dimuat sesuai urutan penemuannya.
  2. Gunakan petunjuk resource preload untuk mendownload resource yang diperlukan lebih awal, terutama untuk resource yang tidak mudah ditemukan di awal oleh browser.
  3. Gunakan async atau defer untuk mendownload skrip tanpa memblokir resource lain.
  4. 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:

  1. Anda memiliki beberapa gambar paruh atas, tetapi semuanya tidak harus memiliki prioritas yang sama. Misalnya, dalam carousel gambar, hanya gambar pertama yang terlihat yang memerlukan prioritas lebih tinggi dibandingkan gambar lainnya.
  2. Banner besar di dalam area pandang biasanya dimulai pada prioritas "Rendah" (perhatikan bahwa perubahan di Chrome 117 menetapkan lima gambar besar pertama ke "Sedang", tetapi mungkin menyertakan atau tidak menyertakan banner besar Anda). Setelah tata letak selesai, Chrome menemukan bahwa pengguna berada di area pandang dan akan meningkatkan prioritasnya. Hal ini biasanya menyebabkan jeda yang cukup lama untuk memuat gambar. Dengan menyediakan Prioritas Pengambilan dalam markup, gambar dapat dimulai pada prioritas "Tinggi" dan mulai dimuat lebih awal.

    Perhatikan bahwa pramuat masih diperlukan untuk penemuan awal gambar LCP yang disertakan sebagai latar belakang CSS dan dapat digabungkan dengan Prioritas Pengambilan dengan menyertakan fetchpriority='high' di pramuat. Jika tidak, gambar akan tetap dimulai dengan prioritas "Rendah" atau "Sedang" untuk gambar.
  3. Mendeklarasikan skrip sebagai async atau defer akan memberi tahu browser untuk memuatnya secara asinkron. Namun, seperti yang terlihat dalam tabel sebelumnya, skrip ini juga diberi prioritas "Rendah". Anda mungkin ingin meningkatkan prioritasnya sambil memastikan download asinkron, terutama untuk skrip apa pun yang sangat penting bagi pengalaman pengguna.
  4. Anda dapat menggunakan JavaScript fetch() API untuk mengambil resource atau data secara asinkron. Pengambilan ditetapkan dengan prioritas "Tinggi" oleh browser. Mungkin akan ada situasi di mana Anda tidak ingin semua pengambilan dijalankan dengan prioritas "Tinggi" dan lebih memilih menggunakan Prioritas Pengambilan yang berbeda. Ini dapat berguna saat menjalankan panggilan API latar belakang dan mencampurnya dengan panggilan API yang merespons input pengguna, seperti dengan pelengkapan otomatis. Panggilan API latar belakang dapat diberi tag sebagai prioritas "Rendah" dan panggilan API interaktif yang ditandai sebagai prioritas "Tinggi".
  5. Browser menetapkan prioritas "Tinggi" pada CSS dan font, tetapi semua resource tersebut mungkin tidak sama pentingnya atau tidak sama pentingnya untuk LCP. Anda dapat menggunakan Prioritas Pengambilan untuk menurunkan prioritas beberapa resource ini.

Atribut fetchpriority

Anda dapat memberikan Prioritas Pengambilan menggunakan atribut HTML fetchpriority. Anda dapat menggunakan atribut ini dengan tag link, img, dan script. Atribut ini memungkinkan Anda menentukan prioritas untuk jenis resource seperti CSS, font, skrip, dan gambar saat didownload menggunakan tag yang didukung. Atribut fetchpriority menerima salah satu dari tiga nilai:

  • high: Anda menganggap resource sebagai prioritas tinggi dan ingin browser memprioritaskannya selama heuristik browser tidak mencegah hal tersebut.
  • low: Anda menganggap resource sebagai prioritas rendah dan ingin browser tidak memprioritaskannya jika heuristiknya memungkinkan.
  • auto: Ini adalah nilai default yang tidak memiliki preferensi dan membiarkan browser memutuskan prioritas yang sesuai.

Berikut adalah beberapa contoh penggunaan atribut fetchpriority di markup dan 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>

Prioritas browser dan fetchpriority

Anda dapat menerapkan atribut fetchpriority ke resource yang berbeda seperti yang ditunjukkan dalam gambar berikut untuk berpotensi meningkatkan atau mengurangi prioritas komputasinya. fetchpriority="auto" (RTT) di tiap baris menunjukkan prioritas default untuk jenis materi 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 Media Rendah VeryLow
Prioritas
DevTools		 Tertinggi Tinggi Media 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) ⬆ ◉⬇
Dokumen SVG ⬆ ◉⬇
XHR (sinkronisasi) - tidak digunakan lagi ◉
XHR/fetch* (asinkron) ⬆◉ ⬇
Prefetch ◉
XSL ◉

Perlu diperhatikan bahwa fetchpriority menetapkan prioritas relatif—yaitu hal ini menaikkan atau menurunkan prioritas default dengan jumlah yang sesuai, bukan secara eksplisit menetapkan prioritas ke "High" atau "Low" dan browser memutuskan prioritas relatif. Sering kali nilai ini adalah "Tinggi" atau "Rendah", tetapi tidak selalu. Misalnya, CSS penting dengan fetchpriority="high" akan tetap mempertahankan prioritas "Sangat Tinggi"/"Tertinggi", dan penggunaan fetchpriority="low" akan tetap mempertahankan prioritas "Tinggi"—dalam kedua kasus tersebut, Prioritas tidak disetel secara eksplisit ke "Tinggi" atau "Rendah".

Kasus penggunaan

Anda dapat menggunakan atribut fetchpriority untuk mengatasi skenario ketika 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 worker Cloudflare untuk menulis ulang halaman Google Penerbangan menggunakan Prioritas Pengambilan.

Menurunkan prioritas gambar paruh atas

Anda dapat menggunakan fetchpriority="low" untuk menurunkan prioritas gambar paruh atas yang mungkin awalnya tidak penting, misalnya 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>

Dalam eksperimen sebelumnya dengan aplikasi Oodle, kami menggunakan cara ini untuk menurunkan prioritas gambar yang tidak muncul saat dimuat. Hal ini membantu mengurangi waktu muat hingga 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.

Menurunkan prioritas resource bawaan

Agar resource yang dimuat sebelumnya tidak bersaing dengan resource penting lain, Anda dapat memberikan petunjuk untuk mengurangi prioritasnya. Anda dapat menggunakan 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" href="/js/script.js" as="script" fetchpriority="low">

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

Buat ulang skrip

Skrip yang diperlukan untuk membuat beberapa bagian halaman menjadi interaktif sangat penting, tetapi tidak boleh memblokir aset lain. Anda dapat menandainya sebagai asinkron dengan prioritas tinggi.

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

Skrip tidak dapat ditandai sebagai asinkron jika mengandalkan status DOM tertentu. Namun, jika posisi ke bawah di halaman lebih rendah, maka mungkin akan didownload dengan prioritas yang lebih rendah seperti yang ditunjukkan.

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

Turunkan prioritas untuk pengambilan data yang tidak penting

Browser menjalankan fetch dengan prioritas tinggi. Jika Anda memiliki beberapa pengambilan yang dapat diaktifkan secara bersamaan, Anda dapat menggunakan prioritas default yang tinggi untuk pengambilan data yang lebih penting dan menurunkannya untuk data yang tidak terlalu 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, seperti yang dibahas di atas. Ada beberapa hal yang harus diperhatikan:

  • Atribut fetchpriority adalah petunjuk dan bukan perintah. Browser akan mencoba mengikuti preferensi developer. Mungkin juga browser akan menerapkan preferensinya untuk prioritas resource sebagaimana dianggap perlu jika terjadi konflik.

  • Pengambilan Prioritas tidak sama dengan pramuat. Keduanya berbeda karena:

    • Pramuat adalah pengambilan wajib dan bukan petunjuk.
    • Pramuat memungkinkan browser menemukan resource lebih awal, tetapi browser akan tetap mengambilnya dengan prioritas default. Sebaliknya, Prioritas Pengambilan tidak membantu visibilitas, tetapi memungkinkan Anda untuk meningkatkan atau mengurangi prioritas pengambilan.
    • Lebih mudah untuk mengamati dan mengukur efek pramuat.

    Prioritas Pengambilan dapat melengkapi pramuat dengan meningkatkan perincian prioritas. Jika Anda telah menentukan pramuat sebagai salah satu item pertama dalam <head> untuk gambar LCP, Prioritas Pengambilan high mungkin tidak akan menghasilkan peningkatan yang signifikan. Namun, jika pramuat dilakukan setelah resource lain, Prioritas Pengambilan high dapat meningkatkan LCP. Jika gambar kritis adalah gambar latar CSS, Anda harus memuatnya di awal dengan fetchpriority = "high".

  • Keuntungan yang terlihat karena penentuan prioritas akan lebih relevan dalam lingkungan tempat lebih banyak resource bersaing untuk bandwidth jaringan yang tersedia. Hal ini umum terjadi pada koneksi HTTP/1.x yang tidak memungkinkan download paralel atau pada koneksi HTTP/2 dengan bandwidth rendah. Penentuan prioritas dapat mengatasi bottleneck dalam kondisi ini.

  • CDN tidak menerapkan prioritas HTTP/2 secara seragam. Meskipun browser mengomunikasikan prioritas yang disarankan menggunakan Prioritas Pengambilan; CDN mungkin tidak memprioritaskan ulang sumber daya dalam urutan yang diperlukan. Hal ini mempersulit pengujian Prioritas Pengambilan. Prioritas diterapkan secara internal dalam browser dan dengan protokol yang mendukung penentuan prioritas (HTTP/2 dan HTTP/3). Sebaiknya gunakan bahkan hanya prioritas browser internal yang tidak bergantung pada CDN atau dukungan asal, karena hal tersebut akan sering berubah saat resource diminta oleh browser—misalnya resource berprioritas rendah seperti gambar sering kali ditahan agar tidak diminta saat browser memproses item <head> penting.

  • Mungkin tidak mungkin untuk memperkenalkan Pengambilan Prioritas sebagai praktik terbaik dalam desain awal Anda. Ini adalah pengoptimalan yang dapat Anda terapkan nanti dalam siklus pengembangan. Anda dapat memeriksa prioritas yang ditetapkan ke sumber daya yang berbeda pada halaman, dan jika prioritas tersebut tidak sesuai dengan harapan, Anda dapat memperkenalkan Prioritas Pengambilan untuk pengoptimalan lebih lanjut.

Menggunakan Pramuat setelah Chrome 95

Fitur Fetch Priority tersedia untuk uji coba di Chrome 73 hingga 76, tetapi tidak dirilis karena masalah prioritas dengan pramuat yang diperbaiki di Chrome 95. Sebelum Chrome 95, permintaan yang dikeluarkan melalui <link rel=preload> selalu dimulai sebelum permintaan lain yang terlihat oleh pemindai pramuat, meskipun permintaan lain memiliki prioritas yang lebih tinggi.

Dengan perbaikan di Chrome 95 dan peningkatan Prioritas Pengambilan, kami berharap developer akan mulai menggunakan pramuat untuk tujuannya—untuk melakukan pramuat resource yang tidak terdeteksi oleh parser (font, impor, gambar LCP latar belakang). Penempatan petunjuk preload akan memengaruhi kapan resource dipramuat. Beberapa poin penting tentang penggunaan pramuat adalah:

  • Menyertakan pramuat di header HTTP akan membuatnya melompat di depan semua hal lainnya.
  • Umumnya, pramuat akan dimuat sesuai urutan yang akan dilakukan parser untuk apa pun di atas prioritas "Sedang"—jadi berhati-hatilah jika Anda menyertakan pramuat di awal HTML.
  • Pramuat font mungkin akan berfungsi paling baik di akhir bagian kepala atau awal isi.
  • Impor pramuat (import() atau modulepreload dinamis) harus dilakukan setelah tag skrip yang memerlukan impor (sehingga skrip sebenarnya dimuat/diurai terlebih dahulu). Pada dasarnya, jika tag skrip memuat skrip yang akan memicu pemuatan dependensi, pastikan <link rel=preload> untuk dependensi terletak setelah tag skrip induk. Jika tidak, dependensi mungkin akan dimuat sebelum skrip utama. Dalam urutan yang benar, skrip utama dapat diuraikan/dievaluasi saat dependensi dimuat.
  • Pramuat gambar memiliki prioritas "Rendah" atau "Sedang" (tanpa Prioritas Pengambilan) dan harus diurutkan berdasarkan 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 sekali lagi pada tahun 2021 menggunakan atribut importance. Pada saat itu, kode tersebut dikenal sebagai 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 API ini sebagai Prioritas Pengambilan.

Kesimpulan

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