Pelajari petunjuk resource rel=preconnect dan rel=dns-prefetch serta cara menggunakannya.
Sebelum dapat meminta resource dari server, browser harus membuat koneksi. Membuat koneksi yang aman melibatkan tiga langkah:
Mencari nama domain dan me-resolve-nya ke alamat IP.
Menyiapkan koneksi ke server.
Mengenkripsi koneksi untuk keamanan.
Di setiap langkah ini, browser mengirimkan data ke server, dan server mengirimkan respons. Perjalanan tersebut, dari asal ke tujuan dan kembali, disebut perjalanan pulang pergi.
Bergantung pada kondisi jaringan, satu perjalanan pulang pergi mungkin memerlukan waktu yang cukup lama. Proses penyiapan koneksi mungkin melibatkan hingga tiga perjalanan pulang pergi—dan lebih banyak lagi dalam kasus yang tidak dioptimalkan.
Menangani semua hal tersebut sebelumnya membuat aplikasi terasa jauh lebih cepat. Postingan ini menjelaskan cara mencapainya dengan dua petunjuk resource: <link rel=preconnect> dan <link rel=dns-prefetch>.
Membuat koneksi awal dengan rel=preconnect
Browser modern mencoba yang terbaik untuk mengantisipasi koneksi yang akan diperlukan halaman, tetapi browser tidak dapat memprediksi semuanya dengan andal. Kabar baiknya adalah Anda dapat memberikan petunjuk (resource 😉) kepada browser.
Menambahkan rel=preconnect ke <link> memberi tahu browser bahwa halaman Anda bermaksud membuat koneksi ke domain lain, dan Anda ingin prosesnya dimulai sesegera mungkin. Resource akan dimuat lebih cepat karena proses penyiapan telah selesai pada saat browser memintanya.
Petunjuk resource mendapatkan namanya karena petunjuk tersebut bukan merupakan petunjuk wajib. Petunjuk resource memberikan informasi tentang apa yang ingin Anda lakukan, tetapi pada akhirnya browser yang akan memutuskan apakah akan menjalankannya atau tidak. Menyiapkan dan menjaga koneksi tetap terbuka adalah pekerjaan yang berat, sehingga browser dapat memilih untuk mengabaikan petunjuk resource atau menjalankannya sebagian, bergantung pada situasinya.
Memberi tahu browser tentang niat Anda semudah menambahkan tag <link> ke halaman Anda:
<link rel="preconnect" href="https://example.com">
Anda dapat mempercepat waktu pemuatan sebesar 100–500 md dengan membuat koneksi awal ke origin pihak ketiga yang penting. Angka-angka ini mungkin terlihat kecil, tetapi angka-angka tersebut membuat perbedaan dalam persepsi pengguna terhadap performa halaman web.
Kasus penggunaan untuk rel=preconnect
Mengetahui dari mana, tetapi tidak apa yang Anda ambil
Karena dependensi versi, terkadang Anda berada dalam situasi di mana Anda tahu bahwa Anda akan meminta resource dari CDN tertentu, tetapi tidak mengetahui jalur pastinya.
Kasus umum lainnya adalah memuat gambar dari CDN gambar, dengan jalur pasti untuk gambar bergantung pada kueri media atau pemeriksaan fitur runtime di browser pengguna.
Dalam situasi ini, jika resource yang akan Anda ambil penting, Anda ingin menghemat waktu sebanyak mungkin dengan melakukan pra-koneksi ke server. Browser tidak akan mendownload file hingga halaman Anda memintanya, tetapi setidaknya browser dapat menangani aspek koneksi sebelumnya, sehingga pengguna tidak perlu menunggu beberapa perjalanan pulang pergi.
Media streaming
Contoh lain saat Anda mungkin ingin menghemat waktu dalam fase koneksi, tetapi tidak harus segera mulai mengambil konten, adalah saat melakukan streaming media dari asal yang berbeda.
Bergantung pada cara halaman Anda menangani konten yang di-streaming, Anda mungkin ingin menunggu hingga skrip Anda dimuat dan siap memproses streaming. Pra-koneksi membantu Anda mengurangi waktu tunggu menjadi satu perjalanan pulang pergi setelah Anda siap untuk mulai mengambil.
Cara menerapkan rel=preconnect
Salah satu cara untuk memulai preconnect adalah menambahkan tag <link> ke <head> dokumen.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Pra-koneksi hanya efektif untuk domain selain domain asal, jadi Anda tidak boleh menggunakannya untuk situs Anda.
Anda juga dapat memulai pra-koneksi melalui Link header HTTP:
Link: <https://example.com/>; rel=preconnect
Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk resource tersebut, Anda harus menetapkan atribut crossorigin dengan petunjuk preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Jika Anda menghapus atribut crossorigin, browser hanya akan melakukan pencarian DNS.
Me-resolve nama domain lebih awal dengan rel=dns-prefetch
Anda mengingat situs berdasarkan namanya, tetapi server mengingatnya berdasarkan alamat IP. Inilah alasan sistem nama domain (DNS) ada. Browser menggunakan DNS untuk mengonversi nama situs menjadi alamat IP. Proses ini—resolusi nama domain—adalah langkah pertama dalam membuat koneksi.
Jika halaman perlu membuat koneksi ke banyak domain pihak ketiga, melakukan pra-koneksi ke semua domain tersebut akan kontraproduktif. Petunjuk preconnect sebaiknya hanya digunakan untuk koneksi yang paling penting. Untuk yang lainnya, gunakan <link rel=dns-prefetch> untuk menghemat waktu pada langkah pertama, yaitu pencarian DNS, yang biasanya memerlukan waktu sekitar 20–120 md.
Resolusi DNS dimulai dengan cara yang sama seperti preconnect: dengan menambahkan tag <link> ke <head> dokumen.
<link rel="dns-prefetch" href="http://example.com">
Dukungan browser untuk dns-prefetch sedikit berbeda dengan preconnect dukungan, sehingga dns-prefetch dapat berfungsi sebagai penggantian untuk browser yang tidak mendukung preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch penggantian di tag <link> yang sama menyebabkan bug di Safari yang membatalkan preconnect.
Efek pada Largest Contentful Paint (LCP)
Dengan menggunakan dns-prefetch dan preconnect, situs dapat mengurangi waktu yang diperlukan untuk terhubung ke asal lain. Tujuan utamanya adalah waktu untuk memuat resource dari asal lain harus diminimalkan sebanyak mungkin.
Untuk Largest Contentful Paint (LCP), sebaiknya resource dapat langsung ditemukan, karena kandidat LCP adalah bagian penting dari pengalaman pengguna. Nilai fetchpriority sebesar "high" pada resource LCP dapat lebih meningkatkan hal ini dengan memberi sinyal pentingnya aset ini ke browser sehingga browser dapat mengambilnya lebih awal.
Jika aset LCP tidak dapat langsung ditemukan, link preload—juga dengan nilai fetchpriority sebesar "high"—tetap memungkinkan browser memuat resource sesegera mungkin.
Jika tidak ada opsi ini—karena resource yang tepat tidak akan diketahui hingga nanti saat pemuatan halaman—Anda dapat menggunakan preconnect pada resource lintas asal untuk mengurangi dampak penemuan resource yang terlambat sebanyak mungkin.
Selain itu, preconnect lebih murah daripada preload dalam hal penggunaan bandwidth, tetapi tetap memiliki risiko. Seperti halnya petunjuk preload yang berlebihan, petunjuk preconnect yang berlebihan tetap menggunakan bandwidth jika menyangkut sertifikat TLS. Berhati-hatilah untuk tidak melakukan pra-koneksi ke terlalu banyak asal, karena hal ini dapat menyebabkan pertentangan bandwidth.
Kesimpulan
Dua petunjuk resource ini berguna untuk meningkatkan kecepatan halaman jika Anda tahu bahwa Anda akan segera mendownload sesuatu dari domain pihak ketiga, tetapi Anda tidak mengetahui URL yang tepat untuk resource tersebut. Contohnya mencakup CDN yang mendistribusikan library JavaScript, gambar, atau font. Perhatikan batasan, gunakan preconnect hanya untuk resource yang paling penting, gunakan dns-prefetch untuk resource lainnya, dan selalu ukur dampaknya di dunia nyata.