Waar komt de term above the fold vandaan?
Een krant ligt dubbelgevouwen in het rek. Above the fold betekent in het Engels dan ook: in het bovenste deel van een krantenpagina. Online gebruik je de term voor het bovenste deel van een webpagina, het stuk dat je op je scherm ziet als je de pagina opent.
Waar de vouw op een website ligt, verschilt per bezoeker. Op een telefoon past er meestal minder in het eerste beeld dan op een breed beeldscherm. Google raadde in 2012 al aan om te bekijken hoe je site eruitziet bij verschillende schermresoluties. Alles onder de vouw heet below the fold.
Wat zegt Google over above the fold?
Op 19 januari 2012 kondigde Google een aanpassing aan die naar de opmaak van een pagina keek: het page layout-algoritme. Gebruikers klaagden dat ze na een klik eerst langs een rij advertenties moesten scrollen. Pagina’s met weinig zichtbare inhoud boven de vouw, of met dat stuk grotendeels gevuld met advertenties, konden daardoor lager scoren.
De aanpassing raakte geen sites die boven de vouw in normale mate advertenties plaatsten. Volgens Google was het effect merkbaar bij minder dan 1% van de zoekopdrachten wereldwijd. Bij die oude blogpost verwijst Google nu naar de documentatie over page experience. Daarin staan vragen als: leiden advertenties af van de hoofdinhoud, en zien bezoekers makkelijk wat de hoofdinhoud is? Meer daarover lees je bij UX.
Above the fold en laadsnelheid
Wat boven de vouw staat, wil je zo snel mogelijk tonen. Largest Contentful Paint meet wanneer het grootste zichtbare element in beeld staat. Dat element staat dus in het eerste beeld en kan een afbeelding, tekstblok of video zijn.
web.dev raadt aan om afbeeldingen in het eerste beeld niet uit te stellen met lazy loading. Dat geldt vooral voor de afbeelding die de LCP bepaalt. Gebruik loading="lazy" alleen voor afbeeldingen buiten het eerste beeld:
<!-- boven de vouw: direct laden -->
<img src="kamer-zeezicht.jpg" alt="Kamer met zeezicht" width="800" height="600">
<!-- lager op de pagina: lazy laden -->
<img src="ontbijt.jpg" loading="lazy" alt="Ontbijt op het terras" width="800" height="600">Voorbeeld: de bovenkant van een boekingspagina
Een bed and breakfast op Texel bekijkt de eigen boekingspagina op een telefoon. Boven de vouw staan alleen een grote fotoslider en een cookiebanner. Wie wil weten wat een nacht kost, moet eerst scrollen.
De B&B zet de naam, de prijs per nacht en een knop ‘Beschikbaarheid bekijken’ bovenaan. De eerste foto laadt direct, de rest van de fotogalerij pas later met lazy loading. Daarna controleert de eigenaar de pagina op een paar telefoons en een laptop, omdat de vouw overal anders valt.
Veelgestelde vragen over Above the fold
Wat betekent above the fold?
Above the fold betekent boven de vouw. Online bedoel je daarmee het deel van een pagina dat je ziet zonder te scrollen. Bij kranten gaat het om het bovenste deel van de pagina.
Hoe hoog is de fold op een website?
Er is geen vaste hoogte. De vouw ligt op elk scherm ergens anders, afhankelijk van het apparaat en de schermresolutie. Bekijk je pagina daarom op meerdere schermformaten.
Wat is below the fold?
Below the fold is alles onder de vouw. Daar kom je pas als je naar beneden scrolt. Bij een krant is het de onderste helft van de pagina.