Halaman ini diterjemahkan oleh Cloud Translation API.

Mengoptimalkan pemuatan resource dengan Fetch Priority API

Addy Osmani

Leena Sohoni

Patrick Meenan

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 mendownload resource tersebut 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 lebih awal dan memblokir perenderan yang menggunakan <link> di <head> mungkin adalah Very High. Penetapan prioritas otomatis biasanya berfungsi dengan baik, tetapi ada kasus penggunaan yang membuat urutan yang ditetapkan tidak optimal.

Halaman ini membahas Fetch Priority API dan atribut HTML fetchpriority, yang membantu Anda mengoptimalkan Data Web Inti dengan memungkinkan Anda menunjukkan prioritas relatif resource (high atau low).

Ringkasan

Beberapa area utama tempat Pengambilan Prioritas 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 late-body untuk mengurutkan gambar dengan lebih baik.

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 selama 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 resource yang lebih sulit ditemukan, seperti font yang disertakan dalam stylesheet, gambar latar, atau resource yang dimuat dari skrip. Preconnect membantu menyiapkan koneksi ke server lintas origin dan dapat membantu meningkatkan metrik seperti Waktu hingga byte pertama. 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. Fetch Priority juga dapat melengkapi pramuat. Ambil 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.
Petunjuk resource preload, yang membantu browser menemukan resource lebih cepat dan memuatnya lebih awal.
Perubahan komputasi prioritas untuk skrip async atau defer.

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)

Catatan:
* Pramuat menggunakan "as" atau fetch dengan "destination" tertentu menggunakan prioritas tujuan yang diminta. Misalnya, pramuat as="style" menggunakan prioritas Tertinggi. Tanpa tujuan eksplisit, pengambilan diprioritaskan seperti XHR asinkron.
** "Early" didefinisikan sebagai permintaan yang diminta sebelum image yang tidak di-pramuat diminta, dan "late" adalah permintaan setelah gambar yang belum dimuat sebelumnya diminta.
*** CSS yang jenis medianya tidak cocok tidak akan diambil oleh pemindai pramuat dan hanya diproses saat parser utama mencapainya, yang biasanya berarti media diambil sangat terlambat.

Gambar dimulai dari prioritas "Rendah" secara default. Pada waktu tata letak, gambar dalam area pandang akan ditingkatkan ke "Tinggi". Mulai Chrome 117, 5 gambar besar pertama disetel ke "Sedang" untuk mempercepatnya, dan dua di antaranya dapat diambil secara paralel selama "mode ketat" awal. Dengan memberi tag pada gambar penting dalam markup menggunakan fetchpriority="high", gambar tersebut dapat langsung dimulai dari "Tinggi" dan dimuat jauh lebih cepat.

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

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

Screenshot aset yang tercantum di tab jaringan di DevTools Chrome. Setelan 'Baris permintaan besar' 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 beberapa contoh hal yang dapat Anda ubah tanpa menggunakan Prioritas Pengambilan:

Tempatkan tag resource seperti <script> dan <link> sesuai urutan yang Anda inginkan untuk didownload oleh browser.
Gunakan petunjuk resource preload untuk mendownload resource yang diperlukan lebih awal, terutama resource yang lebih sulit ditemukan oleh browser.
Gunakan async atau defer untuk mendownload skrip tanpa memblokir resource lain.
Pemuatan lambat konten paruh bawah agar browser dapat menggunakan bandwidth yang tersedia untuk resource paruh atas yang lebih penting.

Berikut adalah beberapa kasus yang lebih kompleks saat Pengambilan Prioritas dapat membantu Anda mendapatkan urutan prioritas resource yang diperlukan:

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.
Banner besar di dalam area pandang biasanya dimulai pada prioritas Low atau Medium. Setelah tata letak selesai, Chrome akan menemukan bahwa tata letak tersebut berada di area pandang dan meningkatkan prioritasnya. Hal ini biasanya menambahkan penundaan yang signifikan untuk pemuatan gambar. Dengan menyediakan Prioritas Pengambilan dalam markup, gambar dapat dimulai pada prioritas "Tinggi" dan mulai dimuat lebih awal.

Pramuat masih diperlukan untuk penemuan awal gambar LCP yang disertakan sebagai latar belakang CSS. Untuk meningkatkan prioritas gambar latar belakang, sertakan fetchpriority='high' pada 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 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 akan menetapkan prioritas High untuknya. Anda mungkin ingin beberapa pengambilan dijalankan 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 High" priority 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.

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 memiliki prioritas tinggi dan Anda ingin browser memprioritaskannya selama heuristik browser tidak mencegah hal tersebut terjadi.
low: Resource memiliki prioritas rendah dan Anda ingin browser menghentikannya 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>

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.

	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 ke High atau Low secara eksplisit. 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 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 menampilkan halaman Google Penerbangan dengan gambar latar belakang LCP yang dimuat dengan dan tanpa Prioritas Pengambilan. Setelah prioritas disetel ke tinggi, LCP meningkat 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

Gunakan fetchpriority="low" untuk menurunkan prioritas gambar paruh atas yang tidak langsung 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 ini untuk menurunkan prioritas gambar yang tidak muncul saat dimuat. Fitur ini mengurangi waktu muat halaman selama 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 membuat halaman dimuat lebih cepat.

Menurunkan prioritas resource bawaan

Agar resource yang dimuat sebelumnya tidak lagi 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" 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 halaman Anda harus interaktif agar dapat dimuat dengan cepat, tetapi tidak boleh memblokir resource lain. 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>

Turunkan 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 yang 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

Berikut beberapa hal yang perlu diperhatikan saat menggunakan Prioritas Pengambilan:

Atribut fetchpriority adalah petunjuk, bukan perintah. Browser mencoba menghargai 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 masih mengambil resource dengan prioritas default. Sementara itu, Prioritas Pengambilan tidak membantu visibilitas, tetapi memungkinkan Anda meningkatkan atau mengurangi prioritas pengambilan.
- 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 prioritas lebih relevan di lingkungan tempat lebih banyak resource bersaing untuk bandwidth jaringan yang tersedia. Hal ini lazim terjadi pada koneksi HTTP/1.x yang tidak mendukung download paralel, atau pada koneksi HTTP/2 bandwidth rendah. Dalam kasus ini, penentuan prioritas dapat membantu mengatasi bottleneck.
CDN tidak menerapkan prioritas HTTP/2 secara seragam. Meskipun browser mengomunikasikan 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, terlepas dari 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 Prioritas Pengambilan sebagai praktik terbaik dalam desain awal Anda. Nantinya dalam siklus pengembangan, Anda dapat menetapkan prioritas ke berbagai resource pada halaman, dan jika tidak sesuai dengan ekspektasi Anda, Anda dapat memperkenalkan Prioritas Pengambilan untuk pengoptimalan lebih lanjut.

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 di atas prioritas "Sedang". Berhati-hatilah jika Anda memasukkan pramuat di awal HTML.
Pramuat font mungkin berfungsi paling baik di ujung 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 sedang dimuat.
Pramuat gambar memiliki prioritas "Rendah" atau "Sedang" 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 dilakukan lagi pada tahun 2021 menggunakan atribut importance. Pada saat itu, fitur ini disebut Petunjuk Prioritas. Sejak itu, 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.