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 skripasync
). - Menurunkan prioritas skrip late-body untuk mengurutkan gambar dengan lebih baik.
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
ataudefer
.
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).
Saat prioritas berubah, Anda dapat melihat prioritas awal dan akhir di setelan Baris permintaan besar atau di tooltip.
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
ataudefer
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
atauMedium
. 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, sertakanfetchpriority='high'
pada pramuat. - Mendeklarasikan skrip sebagai
async
ataudefer
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 prioritasHigh
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 prioritasLow
dan panggilan API interaktif sebagai prioritasHigh
. - 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.
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.
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 Pengambilanhigh
mungkin tidak meningkatkan LCP secara signifikan. Namun, jika pramuat terjadi setelah resource lain dimuat, Prioritas Pengambilanhigh
dapat lebih meningkatkan LCP. Jika gambar kritis adalah gambar latar CSS, pramuat denganfetchpriority = "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()
ataumodulepreload
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.