De uitdaging
Wishfy verkoopt zoekzichtbaarheid, technische builds en meertalige contentstrategie. Onze eigen site moest alle drie bewijzen — tegelijkertijd. Geen shortcuts, geen "de kinderen van de schoenmaker"-excuses. Als we geen perfecte Lighthouse-score konden leveren in vier talen op een hostingbudget van $9/maand, hadden we geen recht om klanten te vertellen dat we het voor hen konden.
De briefing was simpel: bouw een marketingsite die 100/100/100/100 scoort op Lighthouse (Performance, Accessibility, Best Practices, SEO), vier talen bedient vanaf één domein, laadt in minder dan een seconde op 3G en bijna niets kost om te hosten.
De aanpak
We kozen Astro 5 als framework — static-first, standaard nul JavaScript, content collections met type-safe schema's. Styling draait op Tailwind CSS v4 met een custom design-token-laag die elke kleur, spacing-waarde en typografische schaal mapt naar CSS custom properties. Eén tokenbestand stuurt het hele visuele systeem aan.
De contentarchitectuur gebruikt Astro's content collections met locale-prefixed directories: `services/en/seo.mdx`, `work/nl/building-wishfy-ai.mdx`. Elke entry heeft een `translationKey` die hetzelfde stuk koppelt over talen heen, waardoor hreflang-generatie mogelijk is zonder apart mappingbestand.
Belangrijke keuzes
Standaard nul JS. Geen React, geen Vue, geen hydration islands. Elke pagina wordt geleverd als pure HTML en CSS. Interactieve componenten (de mobiele nav-toggle, het contactformulier) gebruiken minimale inline scripts — minder dan 2 KB totaal over de hele site.
Keystatic CMS. Content-editors krijgen een local-first Git-backed CMS zonder hostingoverhead. Geen database, geen auth-service, geen maandelijkse factuur. Content leeft in MDX-bestanden die samen met code worden geversioned.
llms.txt vanaf dag één. Elke taal krijgt zijn eigen `/[lang]/llms.txt` endpoint dat Wishfy's diensten, methodologie en entiteitsrelaties beschrijft in platte tekst. Dit is geen bijzaak — het is een first-class route die wordt gegenereerd tijdens de build.
Token-gestuurd design. Eén TypeScript-tokenbestand definieert het merk: kleuren, radii, schaduwen, spacing, typografie. Wijzig één waarde en de hele site wordt bijgewerkt. Geen zoektocht door CSS-bestanden.
Het resultaat
De site lanceerde met perfecte Lighthouse-scores in alle vier talen op zowel mobiel als desktop. Totale build-output: statische HTML, CSS custom properties, nul client-side JavaScript-bundels. Hosting draait op Cloudflare Pages voor $9/maand met wereldwijd CDN, automatische HTTPS en een TTFB onder 50ms wereldwijd.
Zes weken van eerste commit tot productie. Vier talen. Eén domein. Nul compromissen.