Definitieve Soft Navigations origin-test start in Chrome 147.

Barry Pollard
Michal Mocny

Gepubliceerd: 20 april 2026

Chrome is van plan om de Soft Navigations API, waarmee we eerder hebben geëxperimenteerd, later dit jaar uit te brengen. Ter voorbereiding daarop bieden we nog één testversie aan, die loopt van Chrome 147 tot en met Chrome 149. Deze testversie verwerkt feedback uit eerdere tests in de verwachte uiteindelijke versie van de API. We moedigen website-eigenaren die geïnteresseerd zijn in deze functie aan om de verwachte uiteindelijke versie van de API nog een laatste keer te testen voordat deze wordt uitgebracht.

Wat zijn soft navigations?

Bij 'soft navigation' onderschept JavaScript een navigatie (bijvoorbeeld het klikken op een link) en werkt de inhoud van de bestaande pagina bij in plaats van een nieuwe pagina te laden, terwijl de URL in de adresbalk wel wordt bijgewerkt. Voor gebruikers lijkt dit hetzelfde als conventionele navigatie, maar vanuit het perspectief van de browser blijft de pagina dezelfde als de originele pagina.

De noodzaak van de Soft Navigation API

De Soft Navigations API is een voorgestelde API voor het detecteren van soft navigations die gebruikt worden in Single Page Application (SPA)-websites. Omdat er bij een soft navigation geen daadwerkelijke paginanavigatie plaatsvindt, moet JavaScript handmatig bepaalde acties uitvoeren die normaal gesproken bij een navigatie zouden plaatsvinden. Sommige acties, zoals het beheren van de navigatiegeschiedenis, zijn mogelijk met de huidige API's. Andere acties, zoals het meten van Core Web Vitals , zijn echter niet mogelijk voor deze navigaties.

De Soft Navigation API maakt het mogelijk om soft navigations te observeren. Hoewel de JavaScript-code die de soft navigation initieert (meestal een JavaScript-framework) weet wanneer een navigatie plaatsvindt, is andere JavaScript-code die door de site wordt gebruikt (bijvoorbeeld analytics-scripts) en de browser zelf zich daar niet van bewust.

Kernwebgegevens en SPA's

Een van de belangrijkste drijfveren achter de Soft Navigation API is het meten van essentiële webstatistieken voor SPA's (Single Page Applications). Essentiële webstatistieken worden zowel door de browser gemeten (om te verschijnen in tools zoals het Chrome User Experience Report ) als door website-eigenaren die gebruikmaken van Real User Monitoring (RUM)-oplossingen.

JavaScript-frameworks kunnen bepaalde aspecten van de Core Web Vitals voor SPA's meten. Met name Interaction to Next Paint (INP) en Cumulative Layout Shift (CLS) zijn gebaseerd op primitieven (respectievelijk de Event Timing API en de Layout Instability API ) die over elke tijdsperiode kunnen worden gemeten om deze statistieken te berekenen. Andere statistieken, zoals Largest Contentful Paint (LCP), worden echter alleen door de browser gegenereerd – op basis van paginanavigatie – en worden pas definitief vastgesteld na interactie .

Hoe de API het meten van essentiële webstatistieken voor SPA's mogelijk maakt

De Soft Navigation API introduceert twee nieuwe prestatieverbeteringen:

  • Een SoftNavigationEntry item dat wordt gegenereerd wanneer aan alle vereisten voor softnavigatie is voldaan. Dit item bevat een interactionId voor de interactie die de softnavigatie heeft veroorzaakt, een unieke navigationId , een name die is ingesteld op de nieuwe URL en verschillende laadtijden die kunnen worden gebruikt om de eerste weergave van de inhoud van de softnavigatie te meten.
  • Een InteractionContentfulPaint item waarmee meerdere, steeds groter wordende, inhoudelijke verfpatronen na interacties kunnen worden gemeten om LCP voor zachte navigaties te bepalen.

Deze nieuwe items kunnen worden waargenomen met behulp van een PerformanceObserver , respectievelijk met behulp van de soft-navigation en interaction-contentful-paint typen.

De API breidt ook elk van de prestatie-items largest-contentful-paint , interaction-contentful-paint , event-timing en layout-shift (en andere) uit met een identificatiecode, navigationId , die de navigatie vertegenwoordigt waarvoor het item bedoeld is. Omdat PerformanceObserver prestatie-items pas observeren wanneer de pagina inactief is, kan er enige tijd verstrijken tussen de gebeurtenis die het prestatie-item heeft aangemaakt en uw observatie ervan. Dit is met name het geval wanneer de pagina erg druk is, bijvoorbeeld tijdens soft-navigaties. Deze navigationId waarde helpt items aan de juiste navigatie toe te wijzen.

Sommige interaction-contentful-paint kunnen vóór de navigatie plaatsvinden, en sommige erna. In plaats van alle verfacties te moeten bijhouden die tot een zachte navigatie kunnen leiden, bevat de soft-navigation item een ​​item largestInteractionContentfulPaint verf, namelijk de grootste verfactie die tot dan toe is waargenomen.

Deze factoren maken het mogelijk om Core Web Vitals te meten aan de hand van:

  • LCP : largest-contentful-paint wordt gebruikt voor het laden van de pagina initieel, en de nieuwe interaction-contentful-paint en soft-navigation elementen voor soft-navigatie.
  • CLS : Het gebruik van layout-shift items en het segmenteren ervan op basis van de soft-navigation items voor soft-navigatie.
  • INP : Het gebruiken van event en het segmenteren ervan op basis van de soft-navigation voor soft-navigatie.
  • FCP : Gebruik van first-contentful-paint voor het laden van de eerste pagina en de details over de timing van het laden van de nieuwe soft-navigation items voor soft-navigatie.

Zie de Soft Navigations-documentatie voor meer informatie.

Hoe worden soft navigations geactiveerd?

De Soft Navigation API activeert een soft navigation wanneer het volgende gebeurt:

  • Er vindt een gebruikersinteractie plaats.
  • … wat resulteert in een zichtbare weergave van de inhoud voor de gebruiker,
  • … en er vindt een URL-update plaats.

De API kiest voor deze aanpak in plaats van een JavaScript-framework een 'soft navigation' te laten 'uitvoeren', of voort te bouwen op de Navigation API, om twee redenen:

  1. Ten eerste omvat dit alle bestaande SPA-locaties zonder dat daarvoor wijzigingen nodig zijn.
  2. Ten tweede zorgt het voor een consistent begrip van wat een zachte navigatie inhoudt, ongeacht hoe een framework of ontwikkelaar navigaties afhandelt.

Frameworks of ontwikkelaars kunnen de URL voor een soepele navigatie bijwerken, zelfs zonder gebruikersinteractie of een DOM-update die gebruikers als navigatie zouden beschouwen. Ze kunnen de URL ook op verschillende momenten bijwerken: aan het begin van de interactie, pas aan het einde wanneer deze is voltooid, of op elk moment daartussenin.

In plaats van te vertrouwen op framework- en ontwikkelaarskeuzes, zorgt het inbouwen van soft navigation-detectie in de browser voor een canonieke definitie die het mogelijk maakt om Core Web Vitals voor soft navigations op grote schaal te meten en deze metingen op grote schaal vergelijkbaar te maken.

Frameworks en ontwikkelaars kunnen de Soft Navigations API ook negeren en in plaats daarvan de onderliggende Event Timing- en Layout Instability-API's en de nieuwe InteractionContentfulPaint -prestatieparameter gebruiken om naar eigen inzicht aanvullende prestatiemetingen uit te voeren. We raden echter aan de API te gebruiken voor het meten van Core Web Vitals om consistente metingen mogelijk te maken op verschillende websites en met verschillende tools.

Hulp nodig bij het testen van de Soft Navigation API

We hebben uw hulp nodig om de Soft Navigations API te testen en te bepalen of deze correct aansluit op uw verwachtingen met betrekking tot het moment waarop een soft navigation plaatsvindt. Rapporteert de API soft navigations niet wanneer u ze wel als zodanig beschouwt? Of rapporteert de API juist te veel navigations die u niet als navigations beschouwt?

Wat is er veranderd sinds het laatste oorsprongsonderzoek?

De belangrijkste wijziging in deze nieuwste versie is het loskoppelen van InteractionContentfulPaint van de soft navigations om andere gebruiksscenario's voor die prestatieverhogende entry mogelijk te maken, en het toevoegen van het attribuut largestInteractionContentfulPaint aan de SoftNavigationEntry .

Vanuit het perspectief van de website bevat de API nu ook replaceState als soft navigation, omdat we uw feedback hebben gehoord dat dit in veel situaties belangrijk is om als navigatie te beschouwen. We horen graag van u of er nog andere gevallen zijn waarin de API een soft navigation niet herkent.

We hebben ook talloze andere verbeteringen aangebracht aan de implementatie. Voor degenen die precies willen weten wat er in de nieuwste versie is veranderd, is een gedetailleerd overzicht van alle wijzigingen te vinden in het Soft Navigations Changelog .

We willen dat de API zo nuttig mogelijk is en staan ​​open voor verdere aanpassingen om dat te bereiken. Wijzigingen zijn veel gemakkelijker door te voeren voordat de API gelanceerd wordt en websites afhankelijk worden van een implementatie. Daarom vragen we SPA-ontwikkelaars en iedereen die geïnteresseerd is in het meten van webprestaties voor deze websites om deze API te testen en feedback te geven.

Hoe te testen

De API kan lokaal worden getest met Chrome-vlaggen of commandoregelopties . Daarnaast kunt u de API in de praktijk testen met de Origin-proefversie ( lees meer over Origin-proefversies ).

Raadpleeg onze documentatie of de GitHub-repository voor meer technische details over de API, met name over hoe u de Core Web Vitals kunt meten .

Daarnaast is er een experimentele versie van de web-vitals-bibliotheek met soft navigation beschikbaar op GitHub en npm.

Voor een eenvoudigere test laat het paneel Prestaties van Chrome DevTools zien dat soft navigation in de prestatietraceringen wordt weergegeven vanaf Chrome 145, zelfs zonder dat de functie is ingeschakeld:

Een zachte navigatiemarkering in het Performance-paneel met een fragment van youtube.com.

Feedback

Feedback over de API kunt u melden als issues op GitHub , en bugs in de Chromium-implementatie via de issue-tracker van Chrome . Als u niet zeker weet in welke categorie uw feedback valt, hoeft u zich geen zorgen te maken. We ontvangen feedback het liefst op beide plekken en we zullen de issues op beide plaatsen beoordelen en doorverwijzen naar de juiste locatie.