BVDNET · Eigen project
Deze site: losse blokken die ik apart kan aanpassen
Deze site bestaat uit losse blokken die ik stuk voor stuk kan vervangen of tegen elkaar kan testen. De homepage kan daardoor veranderen zonder dat de rest opnieuw gebouwd wordt.
- Soort project
- Eigen project
- Mijn rol
- Eigenaar, ontwerp en ontwikkeling
- Status
- Website online
- Doorlooptijd
- Doorlopend sinds december 2025
- Teamgrootte
- 1
- De vraag
- Een studiosite moet kunnen veranderen wanneer het werk en de prioriteiten veranderen.
- Het resultaat
- Los te vervangen secties, met een eigen omgeving om ontwerpvarianten te beoordelen.
De vraag
Een studiosite is nooit af: er komt werk bij, de nadruk verschuift, een sectie blijkt niet te werken. Bij de meeste sites betekent elke wijziging dat iemand in de code moet, met risico voor pagina's die er niets mee te maken hebben. Deze homepage bestaat daarom uit losse blokken die ik afzonderlijk kan vervangen of tegen elkaar kan testen — acht blokken, negen varianten. Aanpassen kost daardoor dagen in plaats van weken.
Een website van een studio is nooit af. Er komt werk bij, de nadruk verschuift, een sectie blijkt in de praktijk niet te doen wat je hoopte. Bij de meeste sites betekent elk van die wijzigingen dat er iemand in de code moet, en dat het risico zich uitstrekt tot pagina's die er niets mee te maken hebben.
Dat is precies de reden dat sites verouderen: niet omdat de eigenaar niets wil veranderen, maar omdat elke verandering een klein project wordt. Ik wilde een homepage waar dat niet zo is.
Kernproblemen
- Elke wijziging aan één sectie raakt in principe de hele pagina
- Ontwerpkeuzes worden beredeneerd in plaats van bekeken
- Prestaties verslechteren geleidelijk zonder dat iemand het merkt
- Wat er verandert is niet terug te draaien zonder de rest te raken
Randvoorwaarden
- Alles wat ik hier doe moet ik ook aan een klant kunnen uitleggen
- Geen verzonnen bewijs: lege secties blijven leeg tot er iets echts staat
Achtergrond van het project
Dit is mijn eigen site, en dat zeg ik erbij. Er zit geen klant achter die tevreden was — wat het laat zien is hoe ik werk als niemand meekijkt, en waarom ik bij klanten voor dezelfde opzet kies.
Mijn aanpak en keuzes
Elke band is een los blok met een eigen dossier. De hero, de diensten, het werk, de werkwijze, de calculator: elk daarvan is apart gedefinieerd, inclusief welke varianten er bestaan en welke er in productie draait. Acht blokken, negen varianten. Een blok vervangen raakt de rest niet.
Varianten bekijken in plaats van beredeneren. Er is een aparte werkomgeving waarin ik varianten naast elkaar zet. Een ontwerpkeuze die je in een tabel beredeneert, is een andere keuze dan een die je hebt gezien.
Prestaties zijn een meetpunt, geen gevoel. Er liggen budgetten vast voor laadtijd en visuele stabiliteit, en er wordt gemeten tegen een vastgelegde ondergrens. Gaat het achteruit, dan blijkt dat uit de meting en niet uit een onderbuikgevoel.
Geen gefabriceerd bewijs. Zolang er geen echte klantquotes zijn, rendert de sectie met klantreacties helemaal niet — in plaats van dat er iets in staat wat erop lijkt. Dezelfde regel geldt voor cijfers: wat ik niet kan tonen, schrijf ik niet op.
Technische verdieping
Gebruikte technologie
- Next.js
- React
- TypeScript
- Sanity
- next-intl
- Vercel
- Playwright
- Vitest
Wat het opleverde
Het eerlijke antwoord op ‘is het snel’: beter, en nog niet goed genoeg. De gemeten laadtijd van het grootste element ging van 7,7 naar 4,9 seconden — een verbetering van 36% — en de tijd dat de pagina niet reageerde daalde met 81%. Die 4,9 seconden zit nog steeds in de categorie ‘slecht’ volgens de norm waar ik zelf tegen meet, en dat staat ook zo in mijn eigen meetbestand.
Ik zet het er toch bij, want dit is precies het soort getal dat de meeste sites weglaten. Verder draaien er 992 unit-tests in 92 bestanden en 200 end-to-end-tests in 17 bestanden als vangnet bij wijzigingen.
- Laadtijd grootste element
- 36% sneller, nog niet goed genoeg
- 7,7 seconden → 4,9 seconden
- Tijd dat de pagina niet reageert
- 81% minder
- 70 milliseconden → 13 milliseconden
- Geautomatiseerde tests
- Vangnet bij wijzigingen
- 0 → 992 unit + 200 end-to-end
Opgeleverd
- 8 losse blokken met 9 varianten
- Laadtijd 36% verbeterd, blokkeertijd 81% omlaag
- 992 unit-tests en 200 end-to-end-tests
- Secties zonder echt bewijs blijven leeg
Uitkomsten
- Een sectie vervangen raakt de rest van de pagina niet
- Ontwerpvarianten worden bekeken in plaats van beredeneerd
- Secties zonder echt bewijs renderen niet, in plaats van gevuld te worden met iets dat erop lijkt
- Achteruitgang in snelheid blijkt uit een meting, niet uit een gevoel
Wat ik ervan meeneem
Lessen
- Blokken die je los kunt vervangen, maken van een aanpassing een klus van dagen; dat is vooral een kostenargument
- Een ontwerpkeuze die je hebt gezien is een andere keuze dan een die je hebt beredeneerd
- Een eerlijk slecht cijfer publiceren is geloofwaardiger dan het weglaten
- Liever een lege sectie dan gefabriceerd bewijs
De opzet met losse blokken is inmiddels de standaard voor klantprojecten: het is de reden dat een site kan meegroeien met het bedrijf zonder dat er telkens opnieuw gebouwd moet worden.