Studi Kasus Felicia Tan: Pasang Service Worker Pangkas Repeat Visit Load dari 2,4 ke 0,3 Detik 2026

TL;DR: Service worker adalah skrip yang berjalan di background browser untuk caching aset dan menyajikan halaman dari penyimpanan lokal tanpa request ke server. Saat dipasang di website personal branding Felicia Tan dengan strategi cache-first untuk aset statis dan stale-while-revalidate untuk HTML, waktu muat repeat visit turun dari 2,4 ke 0,3 detik. Bounce rate halaman portfolio turun 31 persen dalam 45 hari.

Saat pertama kali mengaudit website Felicia Tan, seorang stylist editorial yang fokus membangun personal branding di Instagram dan Pinterest, masalahnya bukan visitor baru. First visit p75 LCP-nya sudah di 1,8 detik. Yang bermasalah adalah pola kunjungan kedua dan ketiga: data Google Analytics menunjukkan 38 persen pengunjung melihat lebih dari 3 sesi dalam 14 hari, tapi waktu muat sesi kedua justru lambat (2,4 detik) karena tidak ada cache yang efektif.

Saya memutuskan pasang service worker dengan strategi caching yang dirancang khusus untuk pola repeat visitor. Hasilnya signifikan dalam 45 hari, dan tulisan ini mendokumentasikan keputusan, implementasi, dan hasilnya secara terbuka.

Konteks Awal: Apa yang Tidak Bekerja

Felicia memakai Next.js 15 dengan static generation. Aset statis (CSS, JS, font) sudah dilayani via CDN Vercel. HTTP cache-control standar diatur ke max-age 31536000 untuk aset hash dan no-cache untuk HTML. Secara teori sudah optimal.

Masalahnya: browser tetap melakukan request validasi ke server di setiap kunjungan untuk mengecek HTML berubah atau tidak. Round-trip ini, walau singkat (rata-rata 280 ms dari Jakarta ke server US-East), terasa pada repeat visit karena tidak ada paint cepat.

Strategi Caching yang Dipilih

Tiga jenis aset, tiga strategi berbeda:

Strategi ini diimplementasikan dengan Workbox, library Google yang menyediakan API tingkat tinggi untuk service worker tanpa harus menulis fetch handler manual.

Implementasi: Tiga File Saja

Service worker didaftarkan di komponen layout root setelah window load, supaya tidak mengganggu first paint:

// app/sw-register.tsx
"use client";
import { useEffect } from "react";

export function SwRegister() {
  useEffect(() => {
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", () => {
        navigator.serviceWorker.register("/sw.js");
      });
    }
  }, []);
  return null;
}

File public/sw.js dibangun dari Workbox CLI dengan konfigurasi tiga route. Ukuran akhir service worker setelah minifikasi 12 KB, terhitung kecil. Selengkapnya pada dokumentasi resmi Workbox Strategies.

Hasil Pengukuran 45 Hari

Metrik dipantau via Field Data CrUX dan Vercel Analytics. Sebelum service worker (baseline 14 hari sebelum deploy) vs setelah service worker (terbaru 45 hari):

First visit hampir tidak berubah, sesuai prediksi karena service worker tidak aktif sampai sesi kedua. Yang berubah drastis adalah repeat visit dan metrik downstream seperti engagement dan konversi.

Pelajaran yang Layak Dicatat

Service worker bukan solusi untuk masalah first paint. Kalau bounce rate visitor baru tinggi, perbaiki dulu LCP awal, ukuran bundle, dan CLS. Service worker baru relevan ketika data Google Analytics menunjukkan returning visitor di atas 25 persen.

Hal lain yang sering dilupakan: service worker harus punya skema versioning yang jelas. Tanpa itu, deployment baru bisa terjebak di cache versi lama, dan pengguna melihat konten outdated berhari-hari. Workbox menangani versioning otomatis lewat skipWaiting dan clientsClaim, dengan trade-off update segera setelah halaman dimuat ulang.

Pertanyaan Umum

Apakah service worker bisa dipakai untuk semua website?

Tidak ideal. Untuk website transaksional (e-commerce, banking), strategi cache HTML harus sangat hati-hati supaya pengguna tidak melihat stok atau saldo yang sudah berubah. Untuk portfolio, blog, atau konten editorial, service worker sangat cocok.

Berapa lama service worker bertahan di browser?

Selama pengguna tidak menghapus storage browser secara manual. Cache bisa di-evict oleh browser saat storage hampir penuh, tapi service worker registration sendiri persisten.

Apakah service worker mempengaruhi SEO?

Tidak langsung. Googlebot tidak menjalankan service worker, jadi rendering server side tetap krusial. Tapi efek tidak langsungnya signifikan: engagement meningkat, bounce turun, pogo sticking berkurang, yang semua adalah sinyal positif untuk SEO.

Penutup

Service worker tetap salah satu teknik paling underrated untuk performa website konten. Investasi waktu satu hari untuk implementasi awal, hasilnya bertahan permanen dan kompound dengan pertumbuhan repeat visitor. Untuk personal brand seperti Felicia yang membangun audience loyal, ini adalah leverage besar.