Bagian Peluang di 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
untuk membuat koneksi awal ke origin pihak ketiga yang penting.
<link rel="preconnect"> memberi tahu browser bahwa halaman Anda bermaksud
untuk membuat koneksi
ke sumber lain,
dan Anda ingin agar proses
dimulai sesegera mungkin.
Membangun koneksi sering kali membutuhkan waktu yang signifikan dalam jaringan yang lambat, terutama dalam hal koneksi yang aman, karena mungkin melibatkan pencarian DNS, pengalihan, dan beberapa perjalanan bolak-balik ke server akhir yang menangani permintaan pengguna.
Memperhatikan semua hal ini sebelumnya dapat membuat aplikasi Anda terasa jauh lebih cepat kepada pengguna tanpa menimbulkan efek negatif pada penggunaan {i>bandwidth<i}. Sebagian besar waktu dalam membangun koneksi dihabiskan untuk menunggu, bukan bertukar data.
Memberi tahu browser tentang niat Anda semudah menambahkan tag link ke halaman:
<link rel="preconnect" href="https://example.com">
Ini memberi tahu browser bahwa
halaman tersebut bermaksud
untuk menghubungkan ke example.com dan mengambil konten dari sana.
Perlu diingat bahwa meskipun <link rel="preconnect"> cukup murah,
tetapi hal ini masih dapat memakan waktu
CPU yang berharga, terutama pada koneksi yang aman.
Hal ini sangat buruk jika koneksi
tidak digunakan dalam 10 detik,
saat {i>browser<i} menutupnya, menyia-nyiakan
semua pekerjaan koneksi awal itu.
Secara umum,
coba gunakan <link rel="preload">,
karena ini merupakan penyesuaian
kinerja yang lebih komprehensif,
tetapi jangan simpan <link rel="preconnect"> di sabuk alat Anda untuk kasus ekstrem seperti:
- Kasus penggunaan: Mengetahui Asal, tetapi bukan Apa yang Anda Ambil
- Kasus penggunaan: Media Streaming
<link rel="dns-prefetch"> adalah jenis <link> lain yang terkait dengan koneksi.
Perintah ini hanya menangani pencarian DNS,
tetapi memiliki dukungan browser yang lebih luas, sehingga dapat berfungsi sebagai alternatif yang bagus.
Anda menggunakannya dengan cara yang sama persis:
<link rel="dns-prefetch" href="https://example.com" />.
Panduan khusus stack
Drupal
Menggunakan modul yang mendukung petunjuk resource agen pengguna agar Anda dapat menginstal dan mengonfigurasi petunjuk resource preconnect atau DNS.
Magento
Mengubah tata letak tema dan menambahkan petunjuk resource preconnect atau DNS.