Above the fold

Een bezoeker landt op je homepage en beslist binnen drie seconden of hij blijft. Wat hij in die paar tellen ziet, zonder ook maar één keer te scrollen, bepaalt of hij wegklikt of doorleest. Die eerste zone heet above the fold.

Hieronder ontdek je waar de term vandaan komt, waarom hij vandaag nog telt en hoe je deze ruimte slim invult voor zowel je bezoekers als zoekmachines.

Van krantenpapier naar webdesign

De term komt uit de krantenwereld. Een krant ligt opgevouwen in het rek, en alleen de bovenste helft is meteen leesbaar. Daar zetten redacteurs de kop die mensen overtuigt om de krant op te pakken.

Op het web werkt het identiek. Above the fold is alles wat een bezoeker ziet zonder te scrollen, oftewel binnen de zichtbare viewport van zijn scherm. Op een laptop is dat anders dan op een smartphone, en daar zit meteen de complexiteit.

Waarom above the fold nog steeds telt

Een hardnekkige mythe zegt dat de vouw niet meer bestaat omdat iedereen scrolt. Mensen scrollen inderdaad, maar pas nadat ze beslist hebben dat een pagina relevant is. Die beslissing valt bovenaan.

Onderzoek van Nielsen Norman Group toont al jaren dat de aandacht sterk afneemt onder de vouw. De eerste schermhoogte krijgt het leeuwendeel van de focus, en wat daar staat, bepaalt je bouncepercentage en conversie.

Voor SEO komt er nog een laag bij. Google meet via Largest Contentful Paint hoe snel het grootste element boven de vouw verschijnt. Dat cijfer telt mee in de Core Web Vitals, en dus in je rankings.

Wat hoort er thuis above the fold?

Niet alles verdient een plek in de eerste viewport. Wat je hier zet, moet de bezoeker in één oogopslag een antwoord geven op drie vragen: waar ben ik, wat kan ik hier, en waarom zou me dat boeien.

• Een logo en navigatie zodat bezoekers herkennen waar ze landen.
• Een headline met je value proposition: één zin die zegt wat je doet en voor wie.
• Een ondersteunende subkop of korte uitleg.
• Eén duidelijke call-to-action, geen vijf knoppen door elkaar.
• Een hero image, video of visual die het verhaal versterkt in plaats van afleidt.

Mobile first: de vouw is kleiner dan je denkt

In Vlaanderen komt meer dan de helft van het webverkeer via mobiel. Op een gemiddeld smartphonescherm is de zichtbare zone amper 600 pixels hoog, vaak nog minder na adresbalk en notch.

Test je hero-sectie altijd op een echt toestel, niet alleen in de browserweergave van je designtool. Een knop die op desktop perfect zichtbaar is, kan op mobiel net onder de vouw verdwijnen.

Lees ook: mobile first design als vertrekpunt voor je layout

Snelheid: above the fold mag nooit lazy laden

De grootste valkuil bij above the fold optimalisatie is lazy loading van je hero image. Dat lijkt logisch om snelheid te winnen, maar het vertraagt net het element dat Google meet voor LCP.

Geef je hero image het attribuut loading='eager' en gebruik fetchpriority='high'. Preload je belangrijkste lettertypen en vermijd grote JavaScript-bundels die de eerste render blokkeren.

Reserveer ook expliciet ruimte voor afbeeldingen via width- en height-attributen. Zo voorkom je layout shifts, een ander Core Web Vital dat je ranking beïnvloedt.

Above the fold in een AI-zoekwereld

Met AI Overviews en Google’s SGE wordt de eerste viewport nog belangrijker. AI-modellen halen vaak de kernboodschap uit het bovenste deel van je pagina om antwoorden samen te stellen.

Een heldere headline, een directe value proposition en een gestructureerde opbouw helpen niet alleen menselijke bezoekers, maar ook de modellen die jouw pagina interpreteren voor generatieve zoekresultaten.

Lees ook: hoe user experience en first impression samenhangen

Open je homepage op je telefoon en kijk wat je ziet zonder te scrollen. Staat je belofte er, en weet een vreemde binnen drie seconden waar hij moet klikken? Zo niet, weet je waar je morgen begint.