A presentation at Cream Meetup - Frontend Performance in in Berkel en Rodenrijs, Netherlands by Edwin Bos
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
for free. You
can too.