Meskipun tujuan setiap orang adalah untuk mengurangi anggaran kinerja web, namun tetap perlu memanfaatkan layanan pihak ketiga. Saat menggunakan layanan ini, "Pencarian DNS" waktu dapat menghabiskan sebagian besar anggaran, bergantung pada jumlah layanan. Pemuatan ini memengaruhi berbagai aspek kecepatan halaman, termasuk First Contentful Paint (FCP).

Tujuan dari kedua konsep ini adalah untuk mengoptimalkan waktu koneksi pihak ketiga. Sebelum memahami perbedaan antara kedua konsep ini, perlu dipahami apa sebenarnya yang terjadi ketika permintaan pihak ketiga dibuat:

  1. Domain diselesaikan untuk mendapatkan alamat IP.
  2. Koneksi dibuat dengan server.
  3. Koneksi dienkripsi untuk memastikan keamanan.

Hierarki ini diulangi untuk setiap koneksi pihak ketiga. Di sinilah perbedaan antara preconnect dan dns-prefetch berperan.

  • Prakoneksi: Memastikan ketiga langkah yang disebutkan di atas telah dikonfigurasi sebelumnya.
  • Ambil DNS: Hanya berfungsi untuk mengubah nama domain menjadi alamat IP pada langkah pertama.

Seperti yang Anda lihat, prakoneksi lebih komprehensif dan bermanfaat. Namun, semuanya harus dibayar mahal. Menggunakan prakoneksi untuk semua koneksi Anda dapat berdampak negatif pada pengoptimalan laman Anda. Oleh karena itu, kamuAnda harus menggunakan prakoneksi hanya untuk koneksi penting dan menggunakan prefetch dns untuk semua koneksi pihak ketiga lainnya.

gambar-14.png
Sumber: https://web.dev/preconnect-and-dns-prefetch/

Ringkasan Penggunaan

Berdasarkan informasi di atas, berikut ringkasan singkat penggunaannya:

<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">

Kompatibilitas Browser

Saat mendiskusikan penggunaannya, penting juga untuk menyebutkan kompatibilitas browser. Kedua konsep yang berkaitan erat ini didukung secara luas oleh browser modern, namun penggunaannya tidak sepenuhnya tumpang tindih. Prakoneksi didukung oleh sekitar 97% browser, Sementara dns-prefetch didukung oleh 83% browser (per Juni 2024).

Kontribusi terhadap Anggaran Kinerja Web

  • Prakoneksi dapat memberikan peningkatan kecepatan total 100-500ms.
  • DNS-Prefetch dapat mempercepat setiap koneksi dengan 20-120ms.

Kami berencana untuk melakukan pengujian kami sendiri untuk memberikan contoh lokal yang lebih memuaskan.

Terakhir, saya ingin merekomendasikan dan memberi penghargaan pada blog Ceyhun Enki Aksan, yang telah memberikan kontribusi besar terhadap pemahaman saya saat mempersiapkan artikel ini: Blog Ceyhun Enki Aksan.