Soft Navigation di SPA: Cara Marketer Indonesia Mengukur Core Web Vitals di Halaman yang Tidak Pernah Reload

TL;DR: Soft Navigation adalah perpindahan halaman di Single Page Application yang dilakukan tanpa full page reload. Sejak 2024, Chrome mulai mendukung Soft Navigation API yang memungkinkan Core Web Vitals diukur ulang setiap kali pengguna berpindah view. Tanpa pengukuran ini, marketer sering melihat skor LCP yang misleading karena hanya halaman pertama yang dihitung.

Dalam beberapa proyek website klien yang dibangun dengan Next.js dan React Router, saya melihat pola yang sama: halaman pertama mendapat skor Core Web Vitals hijau, tetapi setelah pengguna berpindah ke halaman lain dalam aplikasi, pengalaman menjadi lambat dan tidak terukur. Ini bukan masalah kecil. Pada dashboard Atmo (LMS internal) misalnya, sebagian besar interaksi pengguna terjadi setelah halaman pertama, sehingga metrik Core Web Vitals halaman pertama tidak mewakili pengalaman sesungguhnya.

Marketer yang hanya membaca laporan dari Lighthouse atau Google PageSpeed Insights tanpa memahami konteks Soft Navigation berisiko mengambil kesimpulan yang salah. Per April 2026, Chrome sudah memberikan dukungan eksperimental Soft Navigation API untuk membantu mendeteksi pola ini.

Kenapa SPA Bermasalah dengan Pengukuran CWV

SPA seperti Next.js, Nuxt, atau Remix umumnya menggunakan client-side routing. Saat pengguna mengklik link, framework hanya mengganti komponen di DOM tanpa memuat ulang halaman. Hasilnya cepat secara persepsi, tetapi alat ukur standar Core Web Vitals seperti field data CrUX hanya menghitung LCP pada navigasi awal. Halaman berikutnya tidak masuk hitungan.

Implikasinya bagi marketer: skor di Search Console bisa terlihat baik, tetapi pengalaman pengguna sesungguhnya buruk pada deeper pages. Hal ini terutama relevan untuk e-commerce dengan filter produk, dashboard SaaS, dan portal media yang banyak menggunakan client-side navigation.

Cara Soft Navigation API Bekerja

Soft Navigation API memberi sinyal ke browser bahwa terjadi perpindahan halaman walaupun tidak ada full reload. Browser kemudian me-reset metrik LCP, INP, dan CLS untuk view berikutnya. Marketer dan developer dapat melihat metrik per soft navigation, bukan hanya satu kali per session.

Untuk implementasi, developer perlu menambah heuristic seperti setAttribute pada elemen yang menandai navigasi atau menggunakan library web-vitals attribution versi terbaru.

Studi Kasus: Vetmo Pet Care Dashboard

Saat membangun dashboard Vetmo untuk owner klinik hewan, kami menggunakan Next.js dengan banyak transisi client-side antara halaman jadwal, rekam medis, dan billing. Pada audit awal, Lighthouse memberi skor CWV hijau. Setelah kami aktifkan Soft Navigation API dan kirim metrik ke endpoint logging, ternyata halaman rekam medis memiliki LCP 3,8 detik, jauh di atas threshold 2,5 detik.

Diagnosa penyebabnya: render daftar 200 baris rekam medis tanpa virtualisasi pada transisi soft navigation. Setelah menambah virtualisasi dan code splitting per route, LCP soft navigation turun ke kisaran 1,9 detik. Ini contoh nyata bahwa pengukuran soft navigation membuka blind spot yang tidak terlihat di field data konvensional.

Apa yang Bisa Dilakukan Marketer

Pertama, minta tim developer mengaktifkan instrumentasi soft navigation jika website berbasis SPA. Kedua, baca laporan Real User Monitoring per route, bukan agregat. Ketiga, prioritaskan optimasi pada route yang paling banyak diakses setelah landing.

Marketer tidak perlu menulis kode, tetapi perlu paham metriknya. Tanpa pemahaman ini, optimasi sering salah sasaran. Misalnya tim memperbaiki LCP halaman pertama padahal yang merusak konversi adalah lambatnya halaman checkout setelah pengguna berpindah dari katalog.

Pertanyaan Umum

Apakah semua website perlu Soft Navigation API?

Tidak. Hanya website yang menggunakan client-side routing seperti SPA. Website tradisional dengan full page reload tidak terpengaruh.

Apakah Soft Navigation API sudah jadi faktor ranking?

Per April 2026 belum jadi faktor ranking eksplisit, tetapi Google sudah mengindikasikan bahwa pengukuran CWV ke depan akan mempertimbangkan soft navigation. Tim yang siap lebih awal akan unggul.

Bagaimana cara mengetahui website saya SPA atau bukan?

Coba klik link di website. Jika URL berubah tanpa loading bar browser muncul, kemungkinan besar itu SPA dengan client-side navigation.

Penutup

Pengukuran Core Web Vitals di SPA tidak boleh berhenti di halaman pertama. Soft Navigation API membuka jendela ke pengalaman sesungguhnya pengguna setelah mereka menjelajahi website. Marketer yang ingin meningkatkan konversi pada deeper pages perlu meminta tim developer mengaktifkan instrumentasi ini. Pengalaman halaman pertama yang baik tidak menjamin pengalaman halaman ketiga sama baiknya.