"To answer this question, I built a comparison project testing different navigation strategies: Standard HTML navigation: Traditional anchor tags. Experiment link Next.js SPA navigation: Client-side routing. Experiment link Speculation Rules + CSS View Transitions: Experiment link Speculation Rules + Next.js Loading UI: Experiment link Quicklink + CSS View Transitions: Experiment link Quicklink + Next.js Loading UI: Experiment link Source Code: https://github.com/ale-grosselle/view-transition-comparisonDemo homepage: https://view-transition-comparison.vercel.app/"
"The experiment simulates a real-world e-commerce scenario: A listing page displaying multiple products Product detail pages that load when clicking an item Products stored locally with a simulated 500ms loading delay to make differences visible. How I Measured Performance Beyond "my personal" visual observation, I used three key metrics to evaluate user experience: 1. TTFB (Time To First Byte) The standard web metric measuring how long it takes to receive the first byte of data after requesting a page."
A comparison project evaluates multiple navigation strategies for Next.js applications, including standard HTML anchors, Next.js client-side SPA routing, Speculation Rules with CSS View Transitions, Speculation Rules with Next.js Loading UI, Quicklink with CSS View Transitions, and Quicklink with Next.js Loading UI. The test uses a simulated e-commerce scenario with a listing page, product detail pages, and locally stored products with a 500ms artificial loading delay to make differences visible. Performance assessment uses three key metrics, including TTFB (Time To First Byte) and a custom Transition Time metric that measures visual transition duration, to quantify perceived navigation smoothness.
Read at DEV Community
Unable to calculate read time
Collection
[
|
...
]