4 × 100 op Lighthouse: zo bouwden we onze eigen website om

Een marketingbureau dat websites bouwt, wordt beoordeeld op zijn eigen website. Dat weten we. En eerlijk: onze site was niet meer de beste reclame voor wat we doen. Ze werkte, maar ze was gegroeid zoals veel websites groeien: een plugin hier, een uitzondering daar, en teksten die op vier plaatsen apart werden bijgehouden.

Door Nick De Jaeger · 21 oktober 2026 · 4min. lezen

4 × 100 op Lighthouse: zo bouwden we onze eigen website om

Deze maand zetten we een volledig vernieuwde versie live. Niet een nieuw jasje over de oude site, maar een ombouw van binnenuit. Het resultaat zie je hieronder, en in de rest van dit artikel leggen we uit hoe we daar kwamen.

Waar we vandaan kwamen

De oude website deed wat ze moest doen, maar elke aanpassing kostte meer tijd dan nodig. Ons team stond bijvoorbeeld op vier pagina’s apart in de code. Kwam er een collega bij, dan moest iemand vier keer hetzelfde aanpassen. Daarnaast draaiden er plugins voor zaken die we beter zelf in de hand houden: beveiliging, mail, cookies, doorverwijzingen.

Elke plugin brengt eigen scripts, eigen opmaak en eigen updates mee. Dat merk je aan de snelheid, en het maakt een site kwetsbaarder.

Wat we anders deden

Eén bron voor elk stuk inhoud

De belangrijkste keuze zit onder de motorkap: elk stuk inhoud bestaat maar één keer. Diensten, sectoren, cases en vacatures zijn elk een eigen type inhoud met hun eigen velden. Een case weet aan welke diensten ze gekoppeld is, en die dienst toont de case dan vanzelf terug.

Het team komt rechtstreeks uit de gebruikers van de website. Een nieuwe collega krijgt een account met een functietitel en een foto, en verschijnt meteen op elke pagina waar het team staat. Hetzelfde geldt voor veelgestelde vragen: je kiest een categorie, je typt ze niet over.

Pagina’s uit vaste bouwstenen

Elke pagina is opgebouwd uit secties: een raster, cijfers, een tijdlijn, een FAQ, een formulier. Die bouwstenen hebben een vaste vorm. Wie een pagina maakt, kiest de inhoud, niet de opmaak. Zo blijft de site consistent, ook na honderd aanpassingen. Een sectie die op meerdere pagina’s terugkomt, staat één keer in een bibliotheek en wordt overal hergebruikt.

Enkel de code die echt nodig is

Voor de opmaak gebruiken we Tailwind CSS. Bij elke wijziging bouwen we één compact stijlbestand met enkel de klassen die effectief op de site staan. Scripts laden uitgesteld, zodat de pagina eerst zichtbaar is.

We ruimden ook op. 87 beelden die nergens meer gebruikt werden, gingen weg (9,7 MB). De avatars van het team gingen van 2,3 MB naar 72 KB door ze om te zetten naar WebP. En van de plugins die enkel op de oude site stonden, ging er geen enkele mee naar de nieuwe.

Privacy zonder trucs

Onze cookiebanner is eigen code. Google Tag Manager, HubSpot en andere meetscripts laden pas nadat een bezoeker toestemming gaf. Trekt iemand die toestemming in, dan verdwijnen de cookies ook echt. Elke keuze wordt bewaard in een register, zonder IP-adres.

Toegankelijk voor iedereen

We liepen de site na op contrast, koppen, labels bij formulieren en linkteksten. “Lees meer” alleen zegt niets voor wie een schermlezer gebruikt, dus elke link vertelt waar ze naartoe gaat. Elk beeld kreeg een alt-tekst die beschrijft wat erop staat.

Duidelijk voor zoekmachines en AI

Elk type pagina geeft zoekmachines gestructureerde gegevens mee: een dienst is een Service, een case een Article met het team dat eraan werkte, een vacature een JobPosting. Daarnaast heeft de site een llms.txt, een korte wegwijzer voor AI-assistenten. Daarover schreven we eerder een artikel.

Een overstap zonder brokken

Een nieuwe website lanceren is het moment waarop het vaak misgaat: verdwenen pagina’s, kapotte links, formulieren die niet meer aankomen. Daarom bouwden we alles op een afgeschermde kopie van de site. Daar konden we testen zonder dat er een mail vertrok of een lead naar HubSpot ging.

Voor de overstap zelf maakten we een draaiboek met scripts. 110 oude adressen kregen een doorverwijzing naar hun nieuwe plaats. We testten 160 adressen van de oude site tegen de nieuwe, zodat een link uit Google of een oude nieuwsbrief nog altijd op de juiste pagina uitkomt. De eigenlijke wissel duurde een fractie van een seconde, en de oude site stond klaar om binnen een minuut terug te zetten. Dat was niet nodig.

Het resultaat

Lighthouse, het meetinstrument van Google, geeft de homepage op alle vier de onderdelen de maximale score: 100 op prestaties, 100 op toegankelijkheid, 100 op best practices en 100 op SEO. Ook de nieuwe test voor agentic browsing, die nagaat of AI-agents vlot met de site overweg kunnen, slaagt volledig: 3 op 3.

De SEO Analyzer van Rank Math komt op 99 op 100: 32 van de 34 tests geslaagd, 1 waarschuwing en 1 gefaalde test. Die pakken we de komende weken aan.

SEO Analyzer van Rank Math voor www.het-labo.be: score 99 op 100, 32 van de 34 tests geslaagd, 1 waarschuwing en 1 gefaalde test

Een kanttekening hoort erbij: een score is een momentopname. Lighthouse meet één pagina onder testomstandigheden, en een echte bezoeker op een trage verbinding beleeft het anders. Wat telt, is wat er gebeurt als je niets doet: blijft de site snel na een jaar nieuwe pagina’s, campagnes en collega’s? Daarom zit de winst vooral in de opbouw. Een site die uit vaste bouwstenen bestaat en elke inhoud maar één keer kent, veroudert veel trager.

Wat je hieruit kunt meenemen

Je hoeft je website niet volledig om te bouwen om vooruitgang te maken. Begin met drie vragen:

  • Staat dezelfde inhoud op meerdere plaatsen? Dan loopt ze vroeg of laat uit de pas.
  • Welke plugins doen iets wat je eigenlijk niet nodig hebt? Elke plugin minder is sneller en veiliger.
  • Laden je meetscripts pas na toestemming? Zo niet, dan is dat een risico, en ook een snelheidswinst die je laat liggen.

Benieuwd hoe jouw website scoort? Met onze gratis website check krijg je binnen een dag een overzicht van wat goed zit en wat beter kan.

Nick De Jaeger
Geschreven door
Design & Development

Gerelateerde artikels