Sneller dan een klik

Sneller dan een klik

Sneller dan een klik Jaren lang waren Single Page Apps de manier om een site snel aan te laten voelen met een rijke experience. Vanaf nu is de volgende pagina al geladen voordat jij hebt geklikt. Native in de browser.

Edwin Bos Lead Frontend Developer bij Cream https://www.linkedin.com/in/ebos/

Een klein stukje geschiedenis

1991 - 2006

26 augustus 2006 r r

2010 - 2014 r r Frameworks voor Single Page Apps (SPA) r

Single Page Apps Instant navigatie Zware initiële load Transities tussen pagina’s SEO is veel extra werk JS-state tussen views Router en state management Voelt als een native app moet je allemaal zelf bouwen Hydration mismatches, memory leaks, stale state

Juni 2015 r ES6

Afgelopen 10 jaar Dialog & Popover bfcache Native CSS Nesting loading=“lazy” CSS Anchor Positioning Scroll Driven Animations Container Queries Speculation Rules Web Components View Transitions :has() Color Functions

bfcache

” ” Bfcache bevriest een hele pagina in het geheugen zodra je ervan wegnavigeert, zodat de browser bij terug/vooruitnavigatie direct kan herstellen, zonder nieuwe requests of een volledige reload

Zonder bfcache

Met bfcache

Chrome-gebruiksdata laat zien dat 1 op de 10 navigaties op desktop en 1 op de 5 op mobiel een back- of forward-navigatie is Source: https://web.dev/articles/bfcache

Cache Control Verwijder “Cache-control: no-store” header Resource: https://docs.hyva.io/hyva-themes/performance/bfcache.html

Wat kan er nou fout gaan?

Dialog sluiten Javascript

Aantal cart-items updaten Javascript

Chrome Sinds 2025 ook met “no-store” bfcache Vertrouw er niet op dat Chrome “Cachecontrol: no-store” negeert Een pagina komt niet uit de bfcache als een cookie wijzigt bfcache werkt niet in andere browsers Resource: https://docs.hyva.io/hyva-themes/performance/bfcache.html

Snelle back- en forward-navigatie Maar wat als de gebruiker de pagina nog niet heeft bezocht?

Speculation Rules

” geprefetcht of geprerenderd moeten worden, op basis van regels die je zelf de nieert, zodat de volgende pagina al klaarstaat zodra de gebruiker klikt fi ” Met Speculation Rules vertel je de browser vooraf welke links

Zonder speculation rules

Speculation Rules De standaard

Met speculation rules

Voorbij de standaard

Eagerness-niveaus Je kunt meerdere eagernesstypes toevoegen in één speculation ruleset Conservative Moderate Eager Immediate

Meerdere actietypes Je kunt meerdere actietypes toevoegen in één speculation ruleset Prefetch Prerender

Zonder speculation rules

Met speculation rules

Scrollen naar dezelfde positie Javascript

Met SP + scroll position

Doe dit niet

Nu is het snel Maar heeft het ook animaties?

View Transitions

” ” Met View Transitions genereert de browser automatisch een geanimeerde overgang tussen twee DOM-states, door een voor- en na-snapshot te maken en die via CSS te animeren

@view-transition CSS

Slide animation CSS

Nu is het razendsnel én met een super experience Instant navigatie Transities tussen pagina’s JS-state tussen views Voelt als een native app Allemaal native in de browser

Thank you