Hubungkan ke origin yang diperlukan

Bagian Peluang dalam laporan Lighthouse mencantumkan semua permintaan utama yang belum memprioritaskan permintaan pengambilan dengan <link rel=preconnect>:

Screenshot audit Preconnect ke origin yang diperlukan di Lighthouse

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 membangun koneksi ke origin lain, dan Anda ingin proses tersebut dimulai sesegera mungkin.

Membangun koneksi seringkali membutuhkan banyak waktu dalam jaringan yang lambat, terutama saat berhubungan dengan koneksi yang aman, karena hal ini mungkin melibatkan pencarian DNS, pengalihan, serta beberapa round trip ke server akhir yang menangani permintaan pengguna.

Memperhatikan semua hal ini sebelumnya dapat menjadikan aplikasi Anda terasa jauh lebih cepat bagi pengguna tanpa berdampak negatif terhadap penggunaan bandwidth. Sebagian besar waktu dalam membangun koneksi dihabiskan untuk menunggu, bukan melakukan pertukaran data.

Memberi tahu maksud Anda ke browser itu semudah menambahkan tag link ke halaman:

<link rel="preconnect" href="https://example.com">

Tindakan ini memungkinkan browser mengetahui bahwa halaman bermaksud terhubung ke example.com dan mengambil konten dari sana.

Perlu diingat bahwa meskipun <link rel="preconnect"> cukup murah, tindakan ini masih dapat menghabiskan waktu CPU yang berharga, terutama pada koneksi yang aman. Hal ini sangat buruk jika koneksi tidak digunakan dalam 10 detik, karena browser menutupnya, sehingga menyia-nyiakan semua hasil kerja koneksi pada awal waktu tersebut.

Secara umum, coba gunakan <link rel="preload">, karena ini adalah tweak performa yang lebih komprehensif, tetapi tetap simpan <link rel="preconnect"> di alat Anda untuk kasus ekstrem seperti:

<link rel="dns-prefetch"> adalah jenis <link> lain yang terkait dengan koneksi. Koneksi ini hanya menangani pencarian DNS, tetapi mendapatkan dukungan browser yang lebih luas, sehingga dapat berfungsi sebagai pengganti yang bagus. 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 dan tambahkan petunjuk resource preconnect atau DNS prefetch.

Resource