Pada modul terakhir tentang mengoptimalkan pemuatan resource, Anda telah mempelajari pengaruh berbagai resource halaman seperti CSS dan JavaScript terhadap kecepatan pemuatan halaman, serta cara mengoptimalkannya dan penayangannya untuk mempercepat rendering halaman. Inilah waktu yang tepat untuk beralih ke aspek lanjutan pemuatan resource, yaitu dengan membantu browser memuatnya lebih cepat menggunakan petunjuk resource.
Petunjuk resource dapat membantu developer lebih mengoptimalkan waktu muat halaman dengan memberi tahu
browser cara memuat dan memprioritaskan resource. Kumpulan awal petunjuk resource
seperti preconnect
dan dns-prefetch
adalah yang pertama diperkenalkan.
Namun, seiring waktu, preload
dan Fetch Priority API telah mengikuti untuk
memberikan kemampuan tambahan.
Petunjuk resource menginstruksikan browser untuk melakukan tindakan tertentu sebelumnya yang dapat meningkatkan performa pemuatan. Petunjuk resource dapat melakukan tindakan seperti melakukan pencarian DNS awal, menghubungkan ke server terlebih dahulu, dan bahkan mengambil resource sebelum browser biasanya menemukannya.
Petunjuk resource dapat ditentukan dalam HTML—paling sering di awal dalam elemen
<head>
—atau ditetapkan sebagai header HTTP. Untuk cakupan modul ini,
preconnect
, dns-prefetch
, dan preload
dibahas, serta
perilaku pengambilan spekulatif yang disediakan prefetch
.
preconnect
Petunjuk preconnect
digunakan untuk membuat koneksi ke origin lain dari
tempat Anda mengambil resource penting. Misalnya, Anda mungkin menghosting gambar atau aset di CDN atau lintas origin lainnya:
<link rel="preconnect" href="https://example.com">
Dengan menggunakan preconnect
, Anda mengantisipasi bahwa browser berencana untuk terhubung ke
server lintas origin tertentu dalam waktu dekat, dan browser
harus membuka koneksi tersebut sesegera mungkin, idealnya sebelum menunggu
Parser HTML atau pemindai pramuat melakukannya.
Jika Anda memiliki resource lintas origin dalam jumlah besar di suatu halaman, gunakan preconnect
untuk resource yang paling penting untuk halaman saat ini.
![Screenshot waktu koneksi untuk resource di panel jaringan Chrome DevTools. Penyiapan koneksi mencakup waktu tunggu, negosiasi proxy, pencarian DNS, penyiapan koneksi, dan negosiasi TLS.](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=6&hl=id)
preconnect
dengan membuat koneksi lebih cepat, bukan pada saat penemuan resource lintas origin.
Kasus penggunaan yang umum untuk preconnect
adalah Google Fonts. Google Fonts merekomendasikan
agar Anda melakukan preconnect
ke domain https://fonts.googleapis.com
yang menayangkan
deklarasi @font-face
dan ke domain https://fonts.gstatic.com
yang
menyalurkan file font.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Atribut crossorigin
digunakan untuk menunjukkan apakah resource harus
diambil menggunakan Cross-Origin Resource Sharing (CORS). Saat menggunakan
petunjuk preconnect
, jika resource yang didownload dari asal menggunakan
CORS—seperti file font—Anda perlu menambahkan atribut crossorigin
ke
petunjuk preconnect
.
dns-prefetch
Meskipun membuka koneksi ke server lintas origin lebih awal dapat mempercepat
waktu pemuatan halaman awal secara signifikan, mungkin tidak wajar atau tidak mungkin
menghubungkan ke banyak server lintas origin sekaligus. Jika Anda khawatir
Anda mungkin menggunakan preconnect
secara berlebihan, petunjuk resource yang jauh lebih murah adalah
petunjuk dns-prefetch
.
Sesuai namanya, dns-prefetch
tidak membuat koneksi ke server lintas origin, tetapi hanya melakukan pencarian DNS terlebih dahulu. Pencarian
DNS terjadi saat nama domain di-resolve ke alamat IP yang mendasarinya.
Meskipun lapisan cache DNS di tingkat perangkat dan jaringan membantu proses ini
menjadi proses yang umumnya cepat, proses ini masih memerlukan waktu.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Pencarian DNS cukup murah, dan karena biayanya yang relatif kecil,
pencarian DNS mungkin lebih tepat dalam beberapa kasus daripada preconnect
. Secara
khusus, ini mungkin merupakan petunjuk resource yang diinginkan untuk digunakan dalam kasus link yang
membuka situs lain yang menurut Anda akan diikuti oleh pengguna.
dnstradamus adalah salah satu alat yang melakukan hal ini secara otomatis menggunakan JavaScript,
dan menggunakan Intersection Observer API untuk memasukkan petunjuk dns-prefetch
ke dalam
HTML halaman saat ini ketika link ke situs lain di-scroll ke area
area pengguna.
preload
Perintah preload
digunakan untuk memulai permintaan awal bagi resource
yang diperlukan untuk merender halaman:
<link rel="preload" href="/lcp-image.jpg" as="image">
Perintah preload
harus dibatasi untuk resource penting yang terakhir ditemukan.
Kasus penggunaan yang paling umum adalah file font, file CSS yang diambil melalui deklarasi @import
, atau resource background-image
CSS yang kemungkinan merupakan kandidat Largest
Contentful Paint (LCP). Dalam kasus seperti itu, file ini tidak akan
ditemukan oleh pemindai pramuat karena resource-nya direferensikan dalam resource
eksternal.
Demikian pula dengan preconnect
, perintah preload
memerlukan atribut crossorigin
jika Anda melakukan pramuat resource CORS—seperti font. Jika Anda tidak menambahkan
atribut crossorigin
—atau menambahkannya untuk permintaan non-CORS—resource
akan didownload oleh browser dua kali, sehingga membuang-buang bandwidth yang seharusnya
lebih baik digunakan untuk resource lain.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Dalam cuplikan HTML sebelumnya, browser diinstruksikan untuk melakukan pramuat /font.woff2
menggunakan permintaan CORS—meskipun /font.woff2
berada di domain yang sama.
prefetch
Perintah prefetch
digunakan untuk memulai permintaan berprioritas rendah
bagi resource yang kemungkinan akan digunakan untuk navigasi mendatang:
<link rel="prefetch" href="/next-page.css" as="style">
Perintah ini sebagian besar mengikuti format yang sama dengan perintah preload
, hanya
atribut rel
elemen <link>
yang menggunakan nilai "prefetch"
.
Namun, tidak seperti perintah preload
, prefetch
sangat spekulatif karena Anda memulai pengambilan resource untuk navigasi mendatang yang mungkin atau mungkin tidak terjadi.
Ada kalanya prefetch
dapat bermanfaat. Misalnya, jika Anda telah
mengidentifikasi alur penggunaan di situs yang diikuti sebagian besar pengguna hingga selesai,
prefetch
untuk resource yang penting render untuk halaman mendatang tersebut dapat membantu
mengurangi waktu pemuatan bagi halaman tersebut.
Fetch Priority API
Anda dapat menggunakan Fetch Priority API
melalui atribut fetchpriority
-nya untuk
meningkatkan prioritas resource. Anda dapat menggunakan atribut ini dengan elemen <link>
,
<img>
, dan <script>
.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Secara default, gambar diambil dengan prioritas yang lebih rendah. Setelah tata letak, jika
gambar ditemukan berada dalam area tampilan awal, prioritasnya akan ditingkatkan ke
prioritas Tinggi. Dalam cuplikan HTML sebelumnya, fetchpriority
segera
memberi tahu browser untuk mendownload gambar LCP yang lebih besar dengan prioritas Tinggi,
sedangkan gambar thumbnail yang kurang penting didownload dengan prioritas yang lebih rendah.
Browser modern memuat resource dalam dua fase. Fase pertama dicadangkan untuk
resource penting dan berakhir setelah semua skrip pemblokiran telah didownload dan
dieksekusi. Selama fase ini, resource prioritas Rendah mungkin akan tertunda
download. Dengan menggunakan fetchpriority="high"
, Anda dapat meningkatkan prioritas
resource, sehingga browser dapat mendownloadnya selama fase pertama.
Demo petunjuk resource
Menguji pengetahuan Anda
Apa fungsi petunjuk resource preconnect
?
Apa yang dapat Anda lakukan dengan Fetch Priority API?
<link>
,
<img>
, dan <script>
.
Kapan Anda harus menggunakan petunjuk prefetch
?
Berikutnya: Performa gambar
Sekarang, Anda mungkin mulai merasa cukup percaya diri dengan pengetahuan Anda
tentang pertimbangan performa umum dalam hal HTML halaman, elemen
<head>
, dan petunjuk resource. Namun, ada pengoptimalan tambahan yang
khusus untuk berbagai jenis resource yang biasanya dimuat halaman. Selanjutnya,
performa gambar akan dibahas dalam modul berikutnya, yang dapat membantu Anda
memuat gambar situs Anda dimuat secepat mungkin, apa pun
perangkat pengguna.