Digital Transformation
Quicklink (Library Prefetch by GoogleChromeLabs)
TL;DR: Quicklink adalah library kecil dari GoogleChromeLabs yang memantau link di dalam viewport dan melakukan prefetch ke halaman tersebut hanya saat koneksi tidak sibuk dan tidak hemat data. Ia memberi efek instant navigation tanpa konfigurasi server, cocok untuk situs statis dan landing page.
Apa itu Quicklink?
Quicklink adalah library open source ukuran sekitar 1 KB yang mengotomatisasi prefetch untuk seluruh link yang masuk ke layar pengguna. Library ini menggunakan IntersectionObserver untuk mendeteksi link yang terlihat, lalu RequestIdleCallback untuk memastikan prefetch terjadi tanpa mengganggu rendering halaman aktif.
Repo resminya tersedia di GitHub GoogleChromeLabs/quicklink. Walaupun namanya mengandung "Google", ini bukan produk resmi Google, melainkan eksperimen Chrome team yang banyak diadopsi oleh tim performa. Quicklink jadi alternatif praktis untuk situs yang belum memakai [Speculation Rules API](/glosarium/speculation-rules-api).
Cara Kerja Quicklink
- Saat pengguna scroll, Quicklink mendeteksi link yang masuk viewport.
- Library memeriksa kondisi: koneksi 4G/5G, Save-Data tidak aktif, dan browser sedang idle.
- Jika lolos, library mengirim request prefetch dengan prioritas rendah.
- Saat pengguna klik, browser memakai cache prefetch sehingga navigasi nyaris instan.
| Skenario | Perilaku Quicklink |
|---|---|
| Pengguna mobile, jaringan lambat | Prefetch dilewati otomatis |
| Pengguna mengaktifkan Data Saver | Prefetch dilewati |
| Link mengarah ke domain berbeda | Default tidak diprefetch, kecuali di-allowlist |
| Halaman dengan banyak link | Prefetch hanya pada link yang terlihat di viewport |
Kenapa Penting?
Untuk web bisnis Indonesia yang sebagian besar pengunjungnya pakai jaringan 4G dengan kualitas variatif, Quicklink memberi dua keuntungan: navigasi yang terasa cepat dan respect terhadap pengguna dengan kuota terbatas. Library ini secara eksplisit menghormati Save-Data hint dan menyesuaikan perilaku berdasarkan tipe koneksi, sehingga tidak membakar bandwidth pengguna.
Quicklink juga bisa diintegrasikan ke website statis seperti blog Hugo, Astro, atau export Next.js. Untuk site yang punya banyak internal link relevan dan target LCP di bawah 2,5 detik, ini cara murah memperbaiki waktu navigasi tanpa migrasi besar-besaran.
Pertanyaan Umum
Apakah Quicklink masih relevan jika saya pakai Next.js?
Next.js sudah punya prefetch bawaan untuk komponen Link. Quicklink tetap berguna untuk link tradisional <a> di konten markdown atau halaman yang dirender di luar router Next.
Apakah Quicklink mempengaruhi data analytics?
Default-nya tidak menambah pageview karena prefetch hanya mengambil resource, bukan eksekusi script di tab aktif. Tetap pantau di Speculation Rules yang lebih agresif jika dipakai bersamaan.
Istilah Terkait