Pelajari petunjuk resource rel=preconnect dan rel=dns-fetching dan cara menggunakannya.
Sebelum browser dapat meminta resource dari server, browser harus membuat koneksi. Ada tiga langkah untuk membuat koneksi yang aman:
Cari nama domain dan ubah menjadi 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 tersebut, dari tempat asal ke tujuan dan kembali, disebut perjalanan pulang pergi.
Bergantung pada kondisi jaringan, satu perjalanan bolak balik mungkin memerlukan waktu yang lama. Proses penyiapan koneksi mungkin melibatkan hingga tiga perjalanan bolak-balik—dan lebih banyak lagi dalam kasus yang tidak dioptimalkan.
Dengan menangani semua hal tersebut sebelumnya, proses aplikasi akan terasa jauh lebih cepat. Postingan ini menjelaskan cara mencapainya dengan dua petunjuk resource: <link rel=preconnect> dan <link rel=dns-prefetch>.
Buat koneksi awal dengan rel=preconnect
Browser modern mencoba yang terbaik untuk mengantisipasi koneksi yang akan dibutuhkan halaman, tetapi mereka tidak dapat memprediksi semuanya dengan andal. Kabar baiknya adalah Anda bisa memberikan petunjuk (resource 🎉) kepada mereka.
Dengan menambahkan rel=preconnect ke <link>, Anda akan memberi tahu browser bahwa halaman Anda bermaksud menghubungkan ke domain lain, dan Anda ingin proses tersebut dimulai sesegera mungkin. Resource akan dimuat lebih cepat karena proses penyiapan telah selesai pada saat browser memintanya.
Petunjuk resource mendapatkan namanya karena bukan petunjuk wajib. Keduanya memberikan informasi tentang apa yang Anda inginkan, namun pada akhirnya terserah pada browser untuk memutuskan apakah akan mengeksekusinya atau tidak. Menyiapkan dan menjaga koneksi tetap terbuka adalah pekerjaan yang berat, sehingga browser mungkin memilih untuk mengabaikan petunjuk resource atau mengeksekusi sebagiannya, bergantung 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 100–500 md dengan membuat koneksi awal ke origin pihak ketiga yang penting. Angka ini mungkin tampak kecil, tetapi mereka membuat perbedaan dalam cara pengguna mempersepsikan performa halaman web.
Kasus penggunaan untuk rel=preconnect
Mengetahui dari mana, tetapi tidak mengetahui apa yang Anda ambil
Karena adanya dependensi berversi, terkadang Anda berakhir dalam situasi ketika Anda mengetahui 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, 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 perlu menghemat sebanyak mungkin waktu 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 bolak-balik.
Media streaming
Contoh lain saat Anda ingin menghemat waktu dalam fase koneksi, tetapi tidak harus langsung mulai 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 memangkas 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 prakoneksi melalui header HTTP Link:
Link: <https://example.com/>; rel=preconnect
Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk aplikasi, Anda harus menyetel 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.
Selesaikan nama domain lebih awal dengan rel=dns-prefetch
Anda mengingat situs berdasarkan namanya, tetapi server mengingatnya berdasarkan alamat IP. Inilah sebabnya 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 halaman perlu membuat koneksi ke banyak domain pihak ketiga, menghubungkan semua domain tersebut di awal merupakan hal yang kontraproduktif. Petunjuk preconnect paling baik digunakan hanya untuk koneksi yang paling penting. Untuk langkah lainnya, gunakan <link rel=dns-prefetch> untuk menghemat waktu di langkah pertama, pencarian DNS, yang biasanya memerlukan waktu sekitar 20–120 milidetik.
Resolusi DNS dimulai mirip dengan 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 menerapkan 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, yang menyebabkan preconnect dibatalkan.
Efek pada Largest Contentful Paint (LCP)
Dengan dns-prefetch dan preconnect, situs dapat mengurangi jumlah waktu yang diperlukan untuk terhubung ke origin lain. Tujuan utamanya adalah waktu untuk memuat resource dari origin lain harus seminimal mungkin.
Jika terkait Largest Contentful Paint (LCP), sebaiknya segera ditemukan resource, karena kandidat LCP adalah bagian penting dari pengalaman pengguna. Nilai fetchpriority sebesar "high" di resource LCP dapat lebih meningkatkan hal ini dengan menunjukkan pentingnya aset ini bagi browser sehingga browser dapat mengambilnya lebih awal.
Jika tidak memungkinkan untuk membuat aset LCP langsung dapat ditemukan, link preload—juga dengan nilai fetchpriority "high"—masih memungkinkan browser memuat resource sesegera mungkin.
Jika tidak satu pun dari opsi ini tersedia—karena resource yang tepat tidak akan diketahui hingga pemuatan halaman nanti—Anda dapat menggunakan preconnect pada resource lintas origin untuk mengurangi dampak keterlambatan penemuan resource sebanyak mungkin.
Selain itu, preconnect lebih murah daripada preload dalam hal penggunaan bandwidth, tetapi tetap saja tanpa risikonya. Seperti halnya dengan petunjuk preload yang berlebihan, petunjuk preconnect yang berlebihan tetap memakai bandwidth yang bermasalah dengan sertifikat TLS. Berhati-hatilah untuk tidak melakukan prakoneksi ke terlalu banyak origin, karena ini dapat menyebabkan pertentangan bandwidth.
Kesimpulan
Kedua petunjuk resource ini berguna untuk meningkatkan kecepatan halaman saat Anda tahu bahwa Anda akan segera mendownload sesuatu dari domain pihak ketiga, tetapi Anda tidak mengetahui URL tepatnya untuk resource tersebut. Contohnya mencakup CDN yang mendistribusikan library, gambar, atau font JavaScript. Perhatikan batasan, gunakan preconnect hanya untuk resource yang paling penting, andalkan dns-prefetch untuk resource lainnya, dan selalu ukur dampaknya di dunia nyata.