v147 · Origin Trial · Performance
Framework Integration Guide
Wire soft-navigation and interaction-contentful-paint observers into Vanilla, React, and Vue router roots while preserving native feature detection and fallback instrumentation.
Vanilla router shell
Route
navigationType
Observer payload
Navigate a route to see observer payloads.
Vanilla observer setup
React Router root
Route
navigationType
Observer payload
Navigate a route to see observer payloads.
React observer pattern
Vue Router root
Route
navigationType
Observer payload
Navigate a route to see observer payloads.
Vue observer pattern
Integration checkpoints
Feature detect.
Guard both
Guard both
PerformanceObserver and supportedEntryTypes before installing observers.Use ICP for soft-nav LCP.
Seed from
Seed from
largestInteractionContentfulPaint, then match later ICP entries by interactionId.Keep a fallback.
When the API is absent, use router hooks plus
When the API is absent, use router hooks plus
performance.mark() / performance.measure() and label the data as fallback.