Bagian Peluang dalam 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.
Meningkatkan 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 membuat koneksi ke origin lain, dan Anda ingin prosesnya dimulai sesegera mungkin.
Membangun koneksi sering kali memerlukan waktu yang signifikan di jaringan yang lambat, terutama dalam hal koneksi yang aman, karena mungkin melibatkan pencarian DNS, pengalihan, dan beberapa perjalanan pulang pergi ke server akhir yang menangani permintaan pengguna.
Menangani semua ini sebelumnya dapat membuat aplikasi Anda terasa jauh lebih cepat bagi pengguna tanpa memengaruhi penggunaan bandwidth secara negatif. Sebagian besar waktu dalam membuat koneksi dihabiskan untuk menunggu, bukan bertukar data.
Memberi tahu browser tentang niat Anda semudah menambahkan tag link ke halaman Anda:
<link rel="preconnect" href="https://example.com">
Tindakan ini memungkinkan browser mengetahui bahwa halaman tersebut bermaksud
untuk terhubung ke example.com dan mengambil konten dari sana.
Perlu diingat bahwa meskipun <link rel="preconnect"> cukup murah, <link rel="preconnect"> masih dapat menghabiskan waktu CPU yang berharga, terutama pada koneksi yang aman.
Hal ini sangat buruk jika koneksi tidak digunakan dalam waktu 10 detik,
karena browser akan menutupnya, sehingga menyia-nyiakan semua upaya koneksi awal tersebut.
Secara umum,
coba gunakan <link rel="preload">,
karena ini adalah penyesuaian performa yang lebih komprehensif,
tetapi tetap gunakan <link rel="preconnect"> dalam toolset Anda untuk kasus ekstrem seperti:
- Kasus penggunaan: Mengetahui Dari Mana, tetapi tidak Mengetahui Apa yang Anda Ambil
- Kasus penggunaan: Streaming Media
<link rel="dns-prefetch"> adalah jenis <link> lain yang terkait dengan koneksi.
Metode ini hanya menangani pencarian DNS,
tetapi memiliki dukungan browser yang lebih luas, sehingga dapat berfungsi sebagai penggantian yang baik.
Anda menggunakannya dengan cara yang sama persis:
<link rel="dns-prefetch" href="https://example.com" />.
Panduan khusus stack
Drupal
Petunjuk resource Preconnect atau dns-prefetch dapat ditambahkan dengan menginstal dan mengonfigurasi modul yang menyediakan fasilitas untuk petunjuk resource agen pengguna.
Magento
Ubah tata letak tema Anda dan tambahkan petunjuk resource preconnect atau DNS prefetch.