Studi Kasus Felicia Tan: Pakai Navigation Preload Pangkas Time to First View dari 1,4 Detik ke 320 ms di 2026

TL;DR: Personal brand Felicia Tan punya Progressive Web App yang mengalami delay 1,4 detik setiap user kembali dari background. Setelah mengaktifkan Navigation Preload di Service Worker, time to first view turun ke 320 ms. Bundle JavaScript dan strategi cache tidak diubah, hanya satu baris konfigurasi.

Saat Felicia Tan memutuskan jadikan portfolionya sebagai PWA full offline di awal 2026, target utamanya adalah pengalaman seperti app native untuk klien yang sering buka tutup browser. Implementasi Service Worker via Workbox jalan lancar, tapi muncul masalah baru, setiap user kembali dari background atau tab lain, halaman idle 1 sampai 2 detik sebelum konten muncul.

Tracking lewat Real User Monitoring menunjukkan akar masalahnya. Service Worker harus restart booting setiap kali browser membersihkan memori. Selama booting, semua navigasi menunggu.

Diagnosa Lewat RUM

Kami pasang web-vitals.js dengan custom event untuk mengukur waktu antara klik link dan render konten. Hasil baseline di 28 hari pertama Maret 2026:

Pattern jelas. Resume dari background, yang seharusnya cepat, justru paling lambat. Penyebabnya: Service Worker restart dari nol, dan fetch handler menunggu worker siap sebelum lanjut.

Apa yang Kami Lakukan

Solusi-nya satu fitur: Navigation Preload. Fitur ini membiarkan browser mengirim request ke origin paralel saat service worker masih booting.

Aktifkan di activate event:

self.addEventListener('activate', (event) => {
  event.waitUntil(self.registration.navigationPreload.enable());
});

Lalu di fetch event, pakai event.preloadResponse:

self.addEventListener('fetch', (event) => {
  event.respondWith((async () => {
    const preload = await event.preloadResponse;
    if (preload) return preload;
    // fallback cache atau network
  })());
});

Total kode tambahan: 12 baris. Tidak ubah strategi cache, tidak ubah komponen, tidak ubah arsitektur App Router. Dukungan browser sudah Baseline luas per 2024, jadi tidak butuh feature detection berlebihan. Detail di dokumentasi MDN Navigation Preload.

Hasil Terukur

Dampak paling besar di resume from background, tapi kejutannya cold navigation juga ikut turun karena ada efek paralelisasi pada request awal. Drop-off rate halaman portfolio anjlok hampir setengah, dan ini langsung berdampak ke konversi inquiry klien personal branding.

Kenapa Banyak PWA Belum Pakai

Dari beberapa audit Vito Atmo di proyek client, sebagian besar implementasi Service Worker pakai template Workbox default tanpa cek Navigation Preload. Padahal Workbox sudah mendukung lewat opsi konfigurasi. Banyak tim developer mengira optimasi PWA sudah selesai setelah cache strategy jalan, padahal ada bottleneck booting yang tidak terdeteksi tanpa RUM khusus.

Felicia Tan sendiri awalnya berpikir masalahnya di sisi hosting atau ukuran bundle. Setelah audit pakai pattern serupa studi kasus CWV Attribution Yuanita Sekar, ketahuan bottleneck-nya di service worker booting.

Catatan Penting

Hasil ini spesifik untuk PWA yang dikontrol Service Worker. Situs biasa tanpa SW tidak akan merasakan dampak Navigation Preload. Angka di tabel di atas bervariasi tergantung perangkat, koneksi, dan strategi cache. Range realistis berdasarkan praktik Vito Atmo di 4 proyek serupa: penurunan resume time 60 sampai 80 persen.

Implementasi salah, terutama tidak ada fallback if (preload), bisa bikin halaman blank saat preload gagal. Selalu uji di staging dengan network throttling 3G dan offline mode.

Pertanyaan Umum

Apakah Navigation Preload bisa dipakai tanpa Workbox?

Bisa. Kode di atas vanilla Service Worker. Workbox hanya wrapper yang mempermudah.

Apakah cocok untuk situs e-commerce besar?

Cocok dan sangat dianjurkan, terutama kalau situs sudah PWA. Dampak di halaman kategori dan detail produk biasanya lebih besar dari portfolio.

Apa risiko kalau salah implementasi?

Halaman blank saat preload gagal. Selalu pakai fallback if (preload) return preload; else return cache or fetch.

Apakah dukungan browser sudah aman?

Per April 2026, Baseline luas di Chrome 59+, Edge 79+, Firefox 99+, Safari 16+. Hampir semua perangkat aktif Indonesia masuk.

Penutup

Navigation Preload adalah contoh klasik fitur web modern yang berdampak besar tapi sering dilewatkan. Untuk personal brand atau bisnis yang serius main PWA di Indonesia, fitur ini wajib aktif. Cek bagian aktif Service Worker Anda hari ini, kemungkinan besar masih default tanpa preload.