Pelajari petunjuk resource rel=preconnect dan rel=dns-fetch serta cara menggunakannya.
Sebelum dapat meminta resource dari server, browser harus membuat koneksi. Ada tiga langkah untuk membuat koneksi yang aman:
Cari nama domain dan selesaikan ke alamat IP.
Menyiapkan koneksi ke server.
Mengenkripsi koneksi untuk keamanan.
Pada setiap langkah ini, browser mengirimkan sepotong data ke server, dan server mengirimkan kembali respons. Perjalanan itu, dari tempat asal ke tujuan dan kembali, disebut perjalanan pulang pergi.
Bergantung pada kondisi jaringan, satu perjalanan bolak-balik mungkin memerlukan waktu yang cukup lama. Proses penyiapan koneksi mungkin melibatkan hingga tiga perjalanan bolak-balik—dan lebih banyak lagi dalam kasus yang tidak dioptimalkan.
Dengan mengantisipasi semua hal tersebut di awal, proses aplikasi akan terasa jauh lebih cepat. Postingan ini menjelaskan cara melakukannya dengan dua petunjuk resource: <link rel=preconnect> dan <link rel=dns-prefetch>.
Bangun koneksi awal dengan rel=preconnect
Browser modern mencoba sebaik mungkin untuk mengantisipasi koneksi yang diperlukan halaman, tetapi browser tidak dapat memprediksi semuanya dengan akurat. Kabar baiknya, kamu bisa memberi mereka petunjuk (referensi 😉).
Menambahkan rel=preconnect ke <link> akan memberi tahu browser bahwa halaman Anda bermaksud untuk membuat koneksi ke domain lain, dan Anda ingin proses tersebut dimulai sesegera mungkin. Resource akan dimuat lebih cepat karena proses penyiapan telah diselesaikan saat browser memintanya.
Petunjuk resource mendapatkan namanya karena bukan merupakan instruksi wajib. Perintah ini memberikan informasi tentang tindakan yang akan Anda inginkan, namun pada akhirnya terserah kepada browser untuk memutuskan apakah akan mengeksekusinya atau tidak. Menyiapkan dan menjaga koneksi tetap terbuka adalah pekerjaan berat, sehingga browser mungkin memilih untuk mengabaikan petunjuk resource atau mengeksekusinya sebagian tergantung pada situasinya.
Memberi tahu browser tentang niat Anda semudah menambahkan tag <link> ke halaman:
<link rel="preconnect" href="https://example.com">
Anda dapat mempercepat waktu pemuatan hingga 100–500 md dengan membuat koneksi awal ke asal pihak ketiga yang penting. Angka ini mungkin tampak kecil, tetapi membuat perbedaan pada cara pengguna memandang performa halaman web.
Kasus penggunaan untuk rel=preconnect
Mengetahui dari mana, tetapi tidak mengetahui apa yang Anda ambil
Karena dependensi berversi, terkadang Anda berakhir dalam situasi di mana Anda tahu bahwa Anda akan meminta resource dari CDN tertentu, tetapi bukan jalur yang tepat untuk resource tersebut.
Kasus umum lainnya adalah memuat gambar dari CDN gambar, di mana jalur yang tepat untuk gambar bergantung pada kueri media atau pemeriksaan fitur runtime pada browser pengguna.
Dalam situasi ini, jika resource yang akan diambil penting, Anda sebaiknya menghemat waktu sebanyak mungkin dengan melakukan pra-koneksi ke server. Browser tidak akan mendownload file sampai halaman Anda memintanya, tetapi setidaknya browser dapat menangani aspek koneksi sebelumnya, sehingga pengguna tidak perlu menunggu beberapa kali perjalanan pulang pergi.
Media streaming
Contoh lain di mana Anda mungkin ingin menghemat waktu dalam fase koneksi, tetapi tidak harus langsung mengambil konten, adalah saat melakukan streaming media dari asal yang berbeda.
Bergantung pada cara halaman Anda menangani konten yang di-streaming, sebaiknya tunggu hingga skrip dimuat dan siap untuk memproses streaming. Pra-koneksi membantu Anda mempersingkat waktu tunggu menjadi satu perjalanan pulang pergi setelah Anda siap untuk memulai pengambilan.
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>
Prakoneksi hanya efektif untuk domain selain domain asal, jadi sebaiknya Anda tidak menggunakannya untuk situs Anda.
Anda juga dapat memulai preconnect melalui header HTTP Link:
Link: <https://example.com/>; rel=preconnect
Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk keduanya, Anda harus menetapkan atribut crossorigin dengan petunjuk preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Jika Anda menghapus atribut crossorigin, browser hanya melakukan pencarian DNS.
Selesaikan nama domain lebih awal dengan rel=dns-prefetch
Anda ingat situs berdasarkan namanya, tetapi server mengingatnya berdasarkan alamat IP. Inilah alasan mengapa 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 suatu halaman perlu menghubungkan ke banyak domain pihak ketiga, melakukan pra-koneksi untuk semua domain pihak ketiga adalah tindakan kontraproduktif. Petunjuk preconnect paling baik digunakan hanya untuk koneksi yang paling penting. Untuk sisanya, gunakan <link rel=dns-prefetch> guna menghemat waktu pada langkah pertama, 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">Untuk mengimplementasikan teknik penggantian dengan aman, gunakan tag link terpisah.
<link rel="preconnect dns-prefetch" href="http://example.com">Mengimplementasikan penggantian
dns-prefetch di tag <link> yang sama menyebabkan bug di Safari tempat preconnect dibatalkan.
Efek pada Largest Contentful Paint (LCP)
Penggunaan dns-prefetch dan preconnect memungkinkan situs mengurangi jumlah waktu yang diperlukan untuk terhubung ke origin lain. Tujuan utamanya adalah waktu untuk memuat resource dari asal lain harus diminimalkan.
Jika terkait Largest Contentful Paint (LCP), sebaiknya resource segera ditemukan, karena kandidat LCP adalah bagian penting dari pengalaman pengguna. Nilai fetchpriority dari "high" pada resource LCP dapat lebih meningkatkannya dengan memberi tahu tentang pentingnya aset ini bagi browser agar dapat mengambilnya lebih awal.
Jika tidak memungkinkan untuk membuat aset LCP segera ditemukan, link preload—juga dengan nilai fetchpriority "high"—masih memungkinkan browser memuat resource sesegera mungkin.
Jika tidak satu pun opsi ini tersedia—karena resource persisnya tidak akan diketahui hingga pemuatan halaman nanti—Anda dapat menggunakan preconnect di resource lintas origin untuk mengurangi dampak penemuan resource yang terlambat sebanyak mungkin.
Selain itu, preconnect lebih murah daripada preload dalam hal penggunaan bandwidth, tetapi tetap saja sehat. Seperti halnya dengan petunjuk preload yang berlebihan, petunjuk preconnect yang berlebihan tetap menggunakan bandwidth yang berkaitan dengan sertifikat TLS. Berhati-hatilah untuk tidak melakukan preconnect ke terlalu banyak origin, karena hal ini dapat menyebabkan pertentangan bandwidth.
Kesimpulan
Kedua petunjuk resource ini sangat membantu untuk meningkatkan kecepatan halaman jika Anda akan mendownload sesuatu dari domain pihak ketiga dalam waktu dekat, tetapi Anda tidak mengetahui URL persisnya untuk aset tersebut. Contohnya termasuk CDN yang mendistribusikan library JavaScript, gambar, atau font. Perhatikan batasan, gunakan preconnect hanya untuk resource paling penting, andalkan dns-prefetch untuk resource lainnya, dan selalu ukur dampaknya di dunia nyata.