Wat is progressive enhancement bij webontwikkeling?
Progressive enhancement is een ontwikkelstrategie waarbij je eerst een werkende website bouwt met alleen HTML en content, en daarna CSS en JavaScript toevoegt als verbeterlagen. Elke bezoeker krijgt minimaal een functionerende pagina, ongeacht browser, netwerk of ondersteuning voor JavaScript. Werkt CSS of JavaScript niet, dan blijft de kernfunctionaliteit intact. Het is het tegenovergestelde van graceful degradation, waarbij je start met de volledige ervaring en afbouwt bij problemen.
Progressive enhancement is een bouwstrategie waarbij een website start met een basisversie die overal werkt, en vervolgens laag voor laag extra functionaliteit toevoegt.
Bij progressive enhancement redeneer je vanaf de basis: wat heeft een bezoeker minimaal nodig om de content te lezen en de belangrijkste actie te voltooien? Die basisversie bouw je eerst, en pas daarna voeg je stijl en interactie toe.
De drie lagen
Progressive enhancement werkt met drie opeenvolgende lagen. De eerste laag is HTML: gestructureerde, semantische content die op zichzelf leesbaar en bruikbaar is, ook zonder opmaak. De tweede laag is CSS, die de content visueel aantrekkelijk en overzichtelijk maakt. De derde laag is JavaScript, die interactiviteit toevoegt zoals filters, animaties of dynamische updates. Elke laag mag wegvallen zonder dat de onderliggende laag onbruikbaar wordt.
Waarom dit praktisch nog steeds telt
De aanname dat “iedereen tegenwoordig JavaScript heeft” klopt niet altijd in de praktijk. Scripts falen door een typefout elders op de pagina, een netwerktimeout tijdens het laden, een strenge adblocker, of een oude smart-tv-browser. Bij progressive enhancement zorgt zo’n storing niet voor een kapotte pagina, maar hooguit voor het verlies van een extra laag comfort.
Ook zoekmachines en AI-crawlers profiteren hiervan. Een pagina die zijn kerninhoud al in de HTML heeft staan, is beter te indexeren dan een pagina die volledig leeg is totdat JavaScript de content injecteert. Dat raakt direct aan SEO en aan GEO, de vindbaarheid in AI-antwoorden.
Een concreet voorbeeld: een zoekformulier
Bouw een zoekformulier eerst als gewone HTML <form> met een action en method="GET", die bij submit gewoon naar een resultatenpagina navigeert. Dat werkt overal, ook zonder JavaScript. Voeg daarna JavaScript toe die het formulier onderschept, de resultaten ophaalt via een API-call en de pagina bijwerkt zonder herlaad. Werkt het script niet, dan valt de gebruiker automatisch terug op de normale paginanavigatie in plaats van een lege pagina te zien.
Relatie met performance en toegankelijkheid
Progressive enhancement en Core Web Vitals versterken elkaar. Een pagina die al zijn content in de eerste HTML-response heeft staan, laadt sneller zichtbaar (LCP) en verschuift minder tijdens het laden (CLS), omdat er geen client-side rendering nodig is om de basisinhoud te tonen.
Hetzelfde geldt voor toegankelijkheid: semantische HTML zonder afhankelijkheid van JavaScript werkt beter samen met schermlezers en andere hulptechnologie. Wie progressive enhancement toepast, bouwt dus vaak automatisch mee aan een toegankelijkere en snellere site.
Hoe framework-keuzes dit beïnvloeden
Niet elk modern framework past dit principe standaard toe. Volledig client-side gerenderde single-page applicaties tonen vaak een lege pagina totdat JavaScript is geladen en uitgevoerd. Frameworks die server-side rendering of statische generatie als uitgangspunt nemen, zoals Astro, bouwen de HTML al compleet op de server en voegen JavaScript alleen toe waar interactie echt nodig is.
Bij websites op maat van Stuurboard BI kiezen we bewust voor deze aanpak: de basisstructuur werkt altijd, en interactiviteit is een verbetering, geen vereiste.
Onze tip: Test je site een keer met JavaScript uitgeschakeld in de browserinstellingen. Werkt de navigatie nog, blijft de content leesbaar, kun je nog een formulier versturen? Dat is een snelle praktijktest voor hoe robuust je progressive enhancement daadwerkelijk is.
Veelgestelde vragen
Wat is het verschil tussen progressive enhancement en graceful degradation?
Progressive enhancement start bij de basisversie (alleen HTML) en voegt daar CSS en JavaScript aan toe als verbeteringen. Graceful degradation werkt andersom: je bouwt eerst de volledige, rijke ervaring en zorgt daarna dat de site niet volledig breekt als iets ontbreekt. Progressive enhancement geeft doorgaans een robuustere basis, omdat de kernfunctionaliteit nooit afhankelijk is van de aanwezigheid van geavanceerde technologie.
Betekent progressive enhancement dat ik geen JavaScript mag gebruiken?
Nee. Je gebruikt JavaScript net zo goed, maar niet als vereiste voor de basisfunctionaliteit. Een formulier werkt bijvoorbeeld al met een gewone HTML-submit, en JavaScript voegt daar validatie, een soepelere interactie of een dynamische update zonder paginaherlaad aan toe. Valt JavaScript weg door een netwerkfout, een adblocker of een oude browser, dan blijft het formulier bruikbaar.
Is progressive enhancement nog relevant nu bijna iedereen JavaScript ondersteunt?
Ja, om een andere reden dan vroeger. Het gaat niet meer alleen om browserondersteuning, maar om netwerkfouten, trage verbindingen, scripts die falen door een fout elders op de pagina, en zoekmachines of AI-crawlers die content lezen zonder JavaScript uit te voeren. Progressive enhancement maakt een site veerkrachtiger tegen al deze praktische scenario's, niet alleen tegen oude browsers.
Hoe pas ik progressive enhancement toe in een modern framework?
Kies waar mogelijk voor server-side rendering of statische generatie, zodat de HTML al compleet is voordat JavaScript laadt. Bouw kernfunctionaliteit zoals navigatie, formulieren en content-weergave zodat ze werken zonder client-side JavaScript, en voeg interactiviteit toe via hydration of losse scripts. Frameworks als Astro passen dit principe standaard toe door alleen JavaScript te laden waar het echt nodig is.