Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua permintaan utama
yang belum memprioritaskan permintaan pengambilan dengan <link rel=preconnect>:
Kompatibilitas browser
<link rel=preconnect> didukung di sebagian besar browser. Lihat
Kompatibilitas browser.
Tingkatkan kecepatan pemuatan halaman dengan preconnect
Sebaiknya tambahkan petunjuk resource preconnect atau dns-prefetch
guna membuat koneksi awal ke origin pihak ketiga yang penting.
<link rel="preconnect"> akan memberi tahu browser bahwa halaman Anda akan
menghubungkan ke origin lain,
dan Anda ingin prosesnya dimulai sesegera mungkin.
Membangun koneksi sering kali memerlukan waktu yang cukup lama pada jaringan yang lambat, terutama dalam hal koneksi aman, karena hal ini mungkin melibatkan pencarian DNS, pengalihan, dan beberapa round-trip ke server akhir yang menangani permintaan pengguna.
Dengan menangani semua ini sebelumnya, aplikasi Anda dapat terasa jauh lebih cepat bagi pengguna tanpa berpengaruh negatif pada penggunaan bandwidth. Sebagian besar waktu dalam membangun koneksi dihabiskan untuk menunggu, bukan bertukar data.
Memberi tahu maksud Anda kepada browser semudah menambahkan tag link ke halaman:
<link rel="preconnect" href="https://example.com">
Hal ini memberi tahu browser bahwa halaman bermaksud
terhubung ke example.com dan mengambil konten dari sana.
Perlu diingat bahwa meskipun cukup murah, <link rel="preconnect"> tetap dapat menghabiskan waktu CPU yang berharga, terutama pada koneksi yang aman.
Hal ini sangat buruk jika koneksi tidak digunakan dalam 10 detik,
saat browser menutupnya, dan menyia-nyiakan semua pekerjaan koneksi awal tersebut.
Secara umum,
coba gunakan <link rel="preload">,
karena ini adalah penyesuaian performa yang lebih komprehensif,
tetapi simpan <link rel="preconnect"> di sabuk alat Anda untuk kasus ekstrem seperti:
- Kasus penggunaan: Mengetahui Dari Mana, tetapi tidak Mengetahui Apa yang Anda Ambil
- Kasus penggunaan: Media Streaming
<link rel="dns-prefetch"> adalah jenis <link> lain yang terkait dengan koneksi.
Ini hanya menangani pencarian DNS, tetapi mendapatkan dukungan browser yang lebih luas, sehingga mungkin berfungsi sebagai penggantian yang baik.
Anda menggunakannya dengan cara yang sama persis:
<link rel="dns-prefetch" href="https://example.com" />.
Panduan khusus stack
Drupal
Gunakan modul yang mendukung petunjuk resource agen pengguna sehingga Anda dapat menginstal dan mengonfigurasi petunjuk resource prakoneksi atau pengambilan data DNS.
Magento
Ubah tata letak tema dan tambahkan petunjuk resource preconnect atau pengambilan data DNS.