Dalam modul terakhir tentang mengoptimalkan pemuatan resource, Anda mempelajari cara berbagai resource halaman seperti CSS dan JavaScript dapat memengaruhi kecepatan pemuatan halaman, dan cara mengoptimalkan serta pengirimannya untuk mempercepat rendering halaman. Sekarang adalah waktu yang tepat untuk mempelajari aspek pemuatan resource yang lebih canggih, dan hal ini melibatkan bantuan browser untuk memuatnya lebih cepat dengan menggunakan petunjuk resource.
Petunjuk resource dapat membantu developer mengoptimalkan lebih lanjut waktu pemuatan halaman dengan memberi tahu browser cara memuat dan memprioritaskan resource. Serangkaian awal petunjuk resource seperti preconnect dan dns-prefetch adalah yang pertama kali diperkenalkan.
Namun, seiring waktu, preload dan Fetch Priority API telah mengikuti untuk memberikan kemampuan tambahan.
Petunjuk resource menginstruksikan browser untuk melakukan tindakan tertentu lebih awal yang dapat meningkatkan performa pemuatan. Petunjuk resource dapat melakukan tindakan seperti melakukan pencarian DNS awal, menghubungkan ke server lebih awal, dan bahkan mengambil resource sebelum browser biasanya menemukannya.
Petunjuk resource dapat ditentukan di HTML—paling sering di awal 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 yang sangat dekat, dan browser harus membuka koneksi tersebut sesegera mungkin, idealnya sebelum menunggu parser HTML atau pemindai pra-muat melakukannya.
Jika Anda memiliki banyak resource lintas origin di halaman, gunakan preconnect
untuk resource yang paling penting bagi halaman saat ini.
preconnect dengan membuat koneksi lebih awal, bukan pada saat
penemuan resource lintas origin.
Kasus penggunaan umum untuk preconnect adalah Google Fonts. Google Fonts merekomendasikan agar Anda preconnect ke domain https://fonts.googleapis.com yang menayangkan 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—Anda harus menambahkan atribut crossorigin ke petunjuk
preconnect.
dns-prefetch
Meskipun membuka koneksi ke server lintas origin lebih awal dapat meningkatkan waktu pemuatan halaman awal secara signifikan, mungkin tidak wajar atau tidak mungkin untuk membuat koneksi ke banyak server lintas origin sekaligus. Jika Anda khawatir
bahwa Anda mungkin terlalu sering menggunakan preconnect, 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 untuk server tersebut 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 menjadikan proses ini umumnya cepat, proses ini tetap 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 menjadi alat yang lebih tepat dalam beberapa kasus dibandingkan dengan preconnect. Khususnya, ini mungkin merupakan petunjuk resource yang diinginkan untuk digunakan dalam kasus link yang mengarahkan ke situs lain yang menurut Anda mungkin diikuti oleh pengguna.dnstradamus adalah salah satu alat yang melakukan hal ini secara otomatis menggunakan JavaScript, dan menggunakan Intersection Observer API untuk menyuntikkan petunjuk dns-prefetch ke HTML halaman saat ini saat link ke situs lain di-scroll ke dalam area tampilan pengguna.
preload
Direktif preload digunakan untuk memulai permintaan awal untuk resource
yang diperlukan untuk merender halaman:
<link rel="preload" href="/lcp-image.jpg" as="image" fetchpriority="high">
Direktif preload harus dibatasi untuk aset penting yang ditemukan terlambat. Kasus penggunaan yang paling umum adalah file font, file CSS yang diambil melalui deklarasi @import, atau resource CSS background-image yang kemungkinan merupakan kandidat Largest Contentful Paint (LCP) atau resource LCP lainnya yang tidak dapat ditemukan di HTML awal (misalnya, jika dimuat oleh JavaScript). Dalam kasus seperti itu, file ini tidak akan ditemukan oleh pemindai pra-muat karena resource dirujuk dalam resource eksternal.
Mirip dengan preconnect, direktif preload memerlukan atribut crossorigin
jika Anda melakukan pra-pemuatan resource CORS, seperti font. Jika Anda tidak menambahkan atribut crossorigin—atau menambahkannya untuk permintaan non-CORS—maka resource akan didownload oleh browser dua kali, sehingga membuang bandwidth yang seharusnya dapat digunakan dengan lebih baik untuk resource lain.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Dalam cuplikan HTML sebelumnya, browser diinstruksikan untuk memuat /font.woff2 terlebih dahulu menggunakan permintaan CORS—meskipun /font.woff2 berada di domain yang sama.
prefetch
Direktif prefetch digunakan untuk memulai permintaan prioritas rendah untuk
resource yang kemungkinan akan digunakan untuk navigasi mendatang:
<link rel="prefetch" href="/next-page.css" as="style">
Sebagian besar petunjuk ini mengikuti format yang sama dengan petunjuk preload, hanya saja atribut rel elemen <link> menggunakan nilai "prefetch".
Namun, tidak seperti direktif preload, prefetch sebagian besar bersifat spekulatif karena Anda memulai pengambilan resource untuk navigasi mendatang yang mungkin terjadi atau tidak.
Ada saatnya prefetch dapat bermanfaat—misalnya, jika Anda telah
mengidentifikasi alur pengguna di situs Anda yang diikuti sebagian besar pengguna hingga selesai,
prefetch untuk resource penting rendering bagi halaman mendatang tersebut dapat membantu
mengurangi waktu pemuatan bagi mereka.
Fetch Priority API
Anda dapat menggunakan Fetch Priority API melalui atribut fetchpriority untuk meningkatkan prioritas resource. Anda dapat menggunakan atribut 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 pandang awal, prioritas akan ditingkatkan menjadi
High. Dalam cuplikan HTML sebelumnya, fetchpriority segera
memberi tahu browser untuk mendownload gambar LCP yang lebih besar dengan prioritas Tinggi,
sementara gambar thumbnail yang kurang penting didownload dengan prioritas yang lebih rendah.
Browser modern memuat resource dalam dua tahap. Fase pertama dicadangkan untuk
resource penting dan berakhir setelah semua skrip pemblokiran didownload dan
dieksekusi. Selama fase ini, resource prioritas Rendah mungkin tertunda saat
didownload. 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 sebaiknya Anda menggunakan petunjuk prefetch?
Berikutnya: Performa gambar
Sekarang, Anda mungkin mulai merasa cukup yakin dengan pengetahuan Anda tentang pertimbangan performa umum terkait HTML halaman, elemen <head>, dan petunjuk resource. Namun, ada pengoptimalan tambahan yang khusus untuk berbagai jenis resource yang biasanya dimuat halaman. Selanjutnya, performa gambar dibahas dalam modul berikutnya, yang dapat membantu Anda memuat gambar situs secepat mungkin, terlepas dari perangkat pengguna.