CLS van 0,4 naar 0,06 in een booking flow voor vakanties
De layout shifts zaten in de booking flow, en de meeste gebeurden na de eerste page load.
Een single page application met een booking flow die schoof
Prijsvrij is een Nederlandse reissite: zoeken, vergelijken en een vakantie boeken. De hele site is een single page application, en hetzelfde team runt Prijsvrij.be en D-reizen.
Ik werkte twee dagen van vier uur op locatie. De eerste dag deed ik de audit. Op dag twee liep ik de resultaten door met het team en legde ik stap voor stap uit hoe ze de meest urgente problemen het eerst konden fixen.
Het eerste scherm, de booking flow en de kliks
De meeste layout shifts ontstonden bij soft navigations: de app wisselt content zonder een nieuwe pagina te laden. Een Lighthouse-run van de homepage ziet die nooit. Echte bezoekers die door een boeking klikken wel, en CrUX telt die shifts mee op de URL die ze als eerste openden.
Eind maart 2026 leverde ik de audit op. Op 15 april liep ik die in Den Bosch door met hun developers, en een week later online. CLS was het lastigste onderdeel, met meer oorzaken dan gebruikelijk in een setup als deze. Hun developers fixten het op alle drie de sites, en in mei ging desktop-CLS op alle drie op groen.
Op een ochtend in juni mailde hun front-end lead me. Hij had de afgelopen weken aan prijsvrij.nl gesleuteld op basis van de CoreDash-data via de koppeling met Claude Code, en de grafieken gingen de goede kant op. Kon D-reizen er ook in? Binnen een uur stonden D-reizen en Prijsvrij.be allebei in CoreDash.
Hierna is INP aan de beurt. Toen ik er eind juni naar keek, herkende ik het patroon: ik heb het vaak genoeg gezien. Een beproefd stappenplan fixt het, als je elke stap maar precies goed uitvoert. Daarmee pak je het grootste deel aan. Pas daarna worden de onderliggende problemen zichtbaar, en die zijn altijd kleiner. Dus stelde ik voor om meer hands-on te werken: kleine, chirurgische wijzigingen, minder theorie, meer doen. In juli zaten we bij hen op kantoor, inclusief lunch, en we blijven elk kwartaal afspreken.
In de vakanties loopt de mobiele LCP op, doordat veel verkeer komt van mensen die zelf op vakantie zijn. Die blijft ruim onder de 2,5 seconden en daalt inmiddels alweer.
Een laadanimatie verplaatst de layout shift alleen maar
De animatie leek de wachttijd op te vangen. De shift kwam op het moment dat die plaatsmaakte voor de vluchtgegevens.
Tracking in de klik kost je elke klik
Een tag in de click handler draait voordat het scherm kan veranderen. Verplaats je die tot na de update, dan ziet de bezoeker eerst het resultaat en draait de tag alsnog.
Een single page application blijft veranderen
Elke release voegt componenten en tags toe die de vorige check nooit heeft gezien. Daarom kom ik elk kwartaal terug.
Layout shifts in een single page app die Lighthouse nooit ziet?
Stuur me de URL van je booking- of checkout flow en ik klik erdoorheen zoals een bezoeker dat doet, inclusief soft navigations.
Of bekijk consultancy. Meer resultaten op mijn klantenpagina.
