Uji coba origin Navigasi Lembut Akhir dimulai di Chrome 147

Barry Pollard
Michal Mocny

Dipublikasikan: 20 April 2026

Chrome berencana meluncurkan Soft Navigations API yang sebelumnya telah kami uji tahun ini. Sebagai persiapannya, kami menawarkan satu uji coba origin lagi yang dimulai di Chrome 147 hingga Chrome 149. Uji coba ini menggabungkan masukan dari uji coba sebelumnya ke dalam bentuk akhir API yang diharapkan. Kami mendorong pemilik situs yang tertarik dengan fitur ini untuk melakukan pengujian akhir terhadap bentuk akhir API yang diharapkan sebelum dirilis.

Apa itu navigasi ringan?

"Navigasi ringan" terjadi saat JavaScript mencegat navigasi (misalnya, mengklik link) dan memperbarui konten di halaman yang ada, bukan memuat halaman baru, sementara URL tetap diperbarui di kolom URL. Bagi pengguna, ini tampak sama dengan navigasi konvensional, tetapi dari perspektif browser, halaman tersebut tetap merupakan halaman asli.

Kebutuhan akan Soft Navigation API

Soft Navigations API adalah API yang diusulkan untuk mendeteksi navigasi ringan yang digunakan situs Aplikasi Halaman Tunggal (SPA). Karena tidak ada navigasi halaman yang sebenarnya terjadi untuk navigasi ringan, JavaScript harus mengelola tindakan tertentu secara manual yang biasanya terjadi untuk navigasi. Beberapa tindakan, seperti pengelolaan histori navigasi, dapat dilakukan dengan API saat ini. Namun, tindakan lain, seperti mengukur Data Web Inti, tidak dapat dilakukan untuk navigasi ini.

Soft Navigation API memungkinkan pengamatan navigasi ringan. Meskipun JavaScript yang memulai navigasi ringan (biasanya framework JavaScript) mengetahui kapan navigasi terjadi, JavaScript lain yang digunakan oleh situs (misalnya, skrip Analytics), dan browser itu sendiri tidak akan mengetahuinya.

Data Web Inti dan SPA

Salah satu pendorong utama untuk Soft Navigation API adalah untuk memungkinkan pengukuran Core Web Vitals untuk SPA. Core Web Vitals diukur oleh browser (untuk muncul di alat seperti Laporan Pengalaman Pengguna Chrome), dan oleh pemilik situs menggunakan solusi Pemantauan Pengguna Nyata (RUM).

Framework JavaScript dapat mengukur beberapa aspek Data Web Inti untuk SPA. Khususnya Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS) didasarkan pada primitif (Event Timing API dan Layout Instability API masing-masing) yang dapat diukur di seluruh rentang waktu untuk menghitung metrik tersebut. Namun, metrik lain seperti Largest Contentful Paint (LCP) hanya dikeluarkan oleh browser—berdasarkan navigasi halaman dan diselesaikan setelah interaksi.

Cara API memungkinkan pengukuran Core Web Vitals untuk SPA

Soft Navigation API memperkenalkan dua entri performa baru:

  • Entri SoftNavigationEntry yang dipancarkan saat semua persyaratan navigasi lembut terpenuhi. Hal ini mencakup interactionId untuk interaksi yang menyebabkan navigasi ringan, navigationId unik, dan name yang ditetapkan ke URL baru dan berbagai waktu paint yang dapat digunakan untuk mengukur first contentful paint navigasi ringan.
  • Entri InteractionContentfulPaint yang memungkinkan pengukuran beberapa paintful content berukuran semakin besar setelah interaksi untuk mengukur LCP untuk navigasi lembut.

Entri baru ini dapat diamati menggunakan PerformanceObserver menggunakan jenis soft-navigation dan interaction-contentful-paint.

API ini juga memperluas setiap entri performa largest-contentful-paint, interaction-contentful-paint, event-timing, dan layout-shift (dan lainnya) untuk menyertakan ID, navigationId, yang mewakili navigasi entri tersebut. Karena PerformanceObserver tidak mengamati entri performa hingga halaman tidak ada aktivitas, beberapa waktu dapat berlalu antara peristiwa yang membuat entri performa, dan pengamatan Anda terhadapnya. Hal ini terutama berlaku saat halaman sangat sibuk, misalnya, selama navigasi ringan. Nilai navigationId ini membantu mengatribusikan entri ke navigasi yang benar.

Beberapa entri interaction-contentful-paint dapat terjadi sebelum navigasi, dan beberapa setelahnya. Daripada harus melacak semua paint yang dapat menghasilkan navigasi lembut, entri soft-navigation mencakup entri largestInteractionContentfulPaint yang merupakan paint terbesar yang terlihat hingga saat ini.

Bersama-sama, hal ini memungkinkan Data Web Inti diukur untuk:

  • LCP: Menggunakan largest-contentful-paint untuk pemuatan halaman awal dan entri interaction-contentful-paint dan soft-navigation baru untuk navigasi ringan.
  • CLS: Menggunakan entri layout-shift dan mengirisnya berdasarkan entri soft-navigation untuk navigasi ringan.
  • INP: Menggunakan entri event dan mengelompokkannya berdasarkan entri soft-navigation untuk navigasi ringan.
  • FCP: Menggunakan first-contentful-paint untuk pemuatan halaman awal dan detail waktu paint pada entri soft-navigation baru untuk navigasi ringan.

Untuk mengetahui detail selengkapnya, lihat dokumentasi Navigasi Lembut.

Bagaimana navigasi ringan dipicu?

Soft Navigation API memicu navigasi ringan saat hal berikut terjadi:

  • Terjadi interaksi pengguna,
  • … yang menghasilkan gambar konten yang terlihat oleh pengguna,
  • … dan pembaruan URL terjadi.

API ini menggunakan pendekatan ini, bukan membiarkan framework JavaScript "memancarkan" navigasi ringan, atau membangun di atas Navigation API karena dua alasan:

  1. Pertama, ini mencakup semua situs SPA yang ada tanpa memerlukan perubahan apa pun pada situs tersebut.
  2. Kedua, fitur ini memungkinkan pemahaman yang konsisten tentang apa yang merupakan navigasi ringan, terlepas dari cara framework atau developer menangani navigasi.

Framework atau developer dapat memperbarui URL untuk navigasi ringan meskipun tanpa interaksi pengguna atau update DOM yang akan dianggap sebagai navigasi oleh pengguna. Mereka juga dapat memperbarui URL pada waktu yang berbeda: di awal interaksi, hanya di akhir saat selesai, atau pada status di antaranya.

Daripada mengandalkan pilihan framework dan developer, membangun deteksi navigasi lembut ke dalam browser menetapkan definisi kanonis yang memungkinkan pengukuran Data Web Inti untuk navigasi lembut dalam skala besar dan membuat pengukuran ini dapat dibandingkan dalam skala besar.

Framework dan developer juga dapat mengabaikan Soft Navigations API dan menggunakan Event Timing API, Layout Instability API, dan entri performa InteractionContentfulPaint baru yang mendasarinya untuk mengukur metrik performa tambahan sesuai pilihan mereka. Namun, sebaiknya gunakan API untuk mengukur Core Web Vitals agar pengukuran yang konsisten dapat dilakukan di seluruh situs dan alat.

Bantuan yang diperlukan untuk menguji Soft Navigation API

Kami memerlukan bantuan Anda untuk menguji Soft Navigations API dan menentukan apakah API tersebut cocok dengan ekspektasi Anda terkait kapan navigasi ringan terjadi. Apakah API gagal melaporkan navigasi ringan saat Anda menganggapnya telah terjadi? Sebaliknya, apakah API melaporkan navigasi yang berlebihan yang tidak Anda anggap sebagai navigasi?

Apa yang telah berubah sejak uji coba origin terakhir

Perubahan utama dalam iterasi terbaru ini adalah memisahkan InteractionContentfulPaint dari navigasi sementara untuk memungkinkan kasus penggunaan lain untuk entri performa tersebut, dan atribut largestInteractionContentfulPaint tambahan ke SoftNavigationEntry.

Dari perspektif situs, API kini juga menyertakan replaceState sebagai navigasi ringan karena kami mendengar masukan Anda bahwa hal ini penting untuk dipertimbangkan sebagai navigasi dalam banyak situasi. Kami ingin mengetahui kasus lain saat API tidak mengenali navigasi sementara.

Kami juga telah melakukan banyak peningkatan lainnya pada penerapan. Bagi yang ingin mengetahui secara pasti apa yang telah berubah dalam iterasi terbaru, histori mendetail dari semua perubahan dapat ditemukan di Log Perubahan Navigasi Lembut.

Kami ingin API ini bermanfaat semaksimal mungkin dan kami terbuka terhadap perubahan lebih lanjut untuk mewujudkannya. Perubahan jauh lebih mudah diterapkan pada API sebelum diluncurkan dan situs mulai bergantung pada penerapan. Oleh karena itu, kami meminta developer SPA dan pihak yang tertarik untuk mengukur performa web untuk situs ini agar menguji API ini dan memberikan masukan tentangnya.

Cara menguji

API dapat diuji secara lokal dengan opsi command line atau flag Chrome. Selain itu, Anda dapat mengujinya di lapangan dengan uji coba asal (pelajari lebih lanjut uji coba asal).

Lihat dokumentasi kami atau repositori GitHub untuk mengetahui detail teknis selengkapnya tentang API, terutama cara mengukur Data Web Inti.

Selain itu, versi navigasi lembut eksperimental dari library web-vitals tersedia di GitHub dan npm.

Untuk pengujian yang lebih sederhana, panel Performa Chrome DevTools menampilkan navigasi ringan dalam rekaman aktivitas Performa mulai Chrome 145, bahkan tanpa mengaktifkan fitur:

Penanda nav lunak di panel Performa dengan rekaman aktivitas dari youtube.com.

Masukan

Masukan tentang API harus diajukan sebagai masalah di GitHub, dan laporkan bug pada penerapan Chromium di pelacak masalah Chrome. Jika Anda tidak yakin kategori masukan yang mana, jangan terlalu khawatir. Kami lebih memilih menerima masukan di kedua tempat tersebut, dan kami akan memilah masalah di kedua tempat tersebut serta mengalihkannya ke lokasi yang tepat.