Di modul terakhir tentang mengoptimalkan pemuatan resource, Anda telah mempelajari cara berbagai sumber daya halaman seperti CSS dan JavaScript dapat memengaruhi kecepatan pemuatan halaman, dan bagaimana Anda dapat mengoptimalkannya dan penayangannya untuk mempercepat rendering halaman. Ini adalah waktu yang tepat untuk pindah ke aspek yang lebih maju dari sumber daya memuat, dan itu termasuk membantu browser memuatnya lebih cepat dengan menggunakan petunjuk resource.
Petunjuk resource dapat membantu developer lebih mengoptimalkan waktu muat halaman dengan memberi tahu
browser cara memuat dan
memprioritaskan sumber daya. Set awal resource
Petunjuk seperti preconnect
dan dns-prefetch
adalah yang pertama diperkenalkan.
Namun, seiring waktu, preload
dan Fetch Priority API mengikuti
memberikan kemampuan tambahan.
Petunjuk resource menginstruksikan browser untuk melakukan tindakan tertentu terlebih dahulu yang dapat meningkatkan performa pemuatan. Petunjuk resource dapat melakukan tindakan seperti seperti melakukan pencarian DNS dini, menghubungkan ke server sebelumnya, dan bahkan mengambil sumber daya sebelum browser biasanya menemukannya.
Petunjuk resource dapat ditentukan dalam HTML—paling sering di awal dalam <head>
— atau ditetapkan sebagai header HTTP. Untuk ruang lingkup modul ini,
preconnect
, dns-prefetch
, dan preload
tercakup, serta
perilaku pengambilan spekulatif yang disediakan prefetch
.
preconnect
Petunjuk preconnect
digunakan untuk membuat koneksi ke asal 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 terhubung ke
server lintas asal tertentu dalam waktu yang sangat dekat, dan bahwa browser
harus segera membuka koneksi itu, idealnya sebelum menunggu
Parser HTML atau pemindai pramuat untuk melakukannya.
Jika Anda memiliki banyak resource lintas asal di sebuah halaman, gunakan preconnect
untuk sumber daya yang paling penting untuk laman saat ini.
![Screenshot pengaturan 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.developers.google.cn/static/learn/performance/resource-hints/image/fig-1.png?authuser=7&hl=id)
preconnect
mengurangi dengan membangun koneksi
lebih cepat, daripada pada saat
penemuan resource lintas origin.
Kasus penggunaan umum untuk preconnect
adalah Google Fonts. Google Fonts merekomendasikan
yang Anda preconnect
ke domain https://fonts.googleapis.com
yang berfungsi
deklarasi @font-face
dan ke domain https://fonts.gstatic.com
yang
menayangkan 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 origin menggunakan
CORS—seperti file font—maka Anda perlu menambahkan atribut crossorigin
ke
Petunjuk preconnect
.
dns-prefetch
Meskipun membuka koneksi ke server
lintas asal lebih awal dapat secara signifikan
meningkatkan waktu muat laman awal, mungkin
tidak masuk akal atau tidak memungkinkan untuk
membuat koneksi ke banyak server
lintas asal sekaligus. Jika Anda khawatir
Anda mungkin terlalu sering menggunakan preconnect
, petunjuk resource yang jauh lebih murah adalah
Petunjuk dns-prefetch
.
Sesuai namanya, dns-prefetch
tidak membuat koneksi ke lintas origin
server tertentu, namun hanya melakukan pencarian DNS sebelumnya. DNS
pencarian terjadi saat nama domain diselesaikan ke alamat IP yang mendasarinya.
Sementara lapisan {i>cache<i} DNS pada tingkat perangkat dan jaringan membantu membuat
yang umumnya cepat, masih
membutuhkan 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,
dalam beberapa kasus mungkin menjadi alat yang lebih tepat daripada preconnect
. Di beberapa
secara khusus, mungkin ini adalah petunjuk sumber daya yang
diinginkan untuk digunakan dalam kasus tautan yang
menavigasi ke {i>website<i} lain yang menurut Anda akan diikuti oleh pengguna.
dnstradamus adalah salah satu alat yang
melakukannya 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 pandang.
preload
Perintah preload
digunakan untuk memulai permintaan awal untuk resource
yang diperlukan untuk merender halaman:
<link rel="preload" href="/lcp-image.jpg" as="image">
Perintah preload
harus dibatasi pada resource penting yang baru ditemukan.
Kasus penggunaan yang paling umum adalah file font, file CSS yang diambil melalui @import
deklarasi, atau background-image
resource CSS yang kemungkinan besar Terbesar
Kandidat Contentful Paint (LCP). Dalam kasus seperti itu, file tersebut tidak akan
ditemukan oleh pemindai pramuat karena resource ini direferensikan di bagian eksternal
Google Cloud Platform.
Sama seperti preconnect
, perintah preload
memerlukan crossorigin
jika Anda melakukan pramuat resource CORS—seperti font. Jika Anda tidak menambahkan
atribut crossorigin
—atau tambahkan untuk permintaan non-CORS—lalu resource
didownload oleh browser dua kali, sehingga membuang-buang bandwidth yang seharusnya
lebih baik digunakan untuk
sumber daya lain.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Dalam cuplikan HTML sebelumnya, browser diminta untuk melakukan pramuat
/font.woff2
menggunakan permintaan CORS—meskipun /font.woff2
berada di domain yang sama.
prefetch
Perintah prefetch
digunakan untuk memulai permintaan prioritas rendah untuk
sumber daya yang mungkin 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 saja
Sebagai gantinya, atribut rel
elemen <link>
menggunakan nilai "prefetch"
.
Namun, tidak seperti perintah preload
, prefetch
sebagian besar bersifat spekulatif dalam
Anda memulai pengambilan resource untuk navigasi di masa mendatang yang mungkin
atau mungkin tidak terjadi.
Ada kalanya prefetch
dapat bermanfaat—misalnya, jika Anda
mengidentifikasi alur pengguna di situs Anda yang
diikuti oleh sebagian besar pengguna hingga selesai,
prefetch
untuk resource penting render bagi halaman mendatang tersebut dapat membantu
mengurangi waktu muat untuk resource tersebut.
Fetch Priority API
Anda dapat menggunakan Fetch Priority API
melalui atribut fetchpriority
untuk
meningkatkan prioritas resource. Anda dapat menggunakan atribut dengan <link>
,
Elemen <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 didapati berada dalam area pandang awal, prioritasnya ditingkatkan menjadi
Prioritas tinggi. Dalam cuplikan HTML sebelumnya, fetchpriority
langsung
memberi tahu browser untuk mendownload gambar LCP yang lebih besar dengan prioritas High,
sementara gambar thumbnail yang kurang penting didownload dengan prioritas yang lebih rendah.
Browser modern memuat resource dalam dua fase. Fase pertama disediakan untuk
sumber daya penting dan berakhir setelah
semua skrip pemblokir diunduh dan
telah dijalankan. Selama fase ini, resource prioritas Rendah mungkin tertunda dari
mengunduh. Dengan menggunakan fetchpriority="high"
, Anda dapat meningkatkan prioritas
otomatis, sehingga browser dapat mendownloadnya pada fase pertama.
Demo petunjuk resource
Menguji pengetahuan Anda
Apa fungsi petunjuk resource preconnect
?
Apa yang dapat Anda lakukan dengan Fetch Priority API?
<link>
,
Elemen <img>
dan <script>
.
Kapan Anda harus menggunakan petunjuk prefetch
?
Berikutnya: Performa gambar
Sekarang, Anda mungkin mulai merasa
cukup percaya diri dengan pengetahuan Anda
pertimbangan performa umum dalam hal HTML halaman, <head>
elemen, dan petunjuk resource. Namun, ada pengoptimalan tambahan yang
spesifik untuk berbagai jenis resource yang biasanya dimuat oleh halaman. Selanjutnya,
performa gambar dibahas di modul berikutnya, yang dapat membantu Anda mendapatkan
gambar situs Anda dimuat secepat mungkin, terlepas dari
perangkat pengguna.