Een advertentieblok veroorzaakt layoutverschuiving

Layoutverschuiving heeft meer oorzaken dan advertenties. Afbeeldingen zonder afmetingen, webfonts en ingevoegde banners geven hetzelfde effect. Ga daarom niet meteen aan de slag met het advertentieblok, maar stel de diagnose op basis van wat je ziet.

Volgens de MDN-uitleg over webprestaties gaat performance niet alleen over laadtijd, maar ook over hoe vloeiend inhoud zich gedraagt tijdens gebruik. De pagina noemt onder meer soepel scrollen en responsieve knoppen. Layoutverschuiving wordt daar niet apart behandeld, maar het sluit aan bij het idee dat de ervaring tijdens gebruik telt, niet alleen de laadtijd.

1. Open de pagina op een telefoonbreedte en een desktopbreedte.
2. Laad de pagina meerdere keren en kijk naar welk element eerst op zijn plaats staat en welk daarna beweegt.
3. Noteer per pagina: welk element verschuift, welk element wordt weggeduwd en of de contactknop daartussen zit.
4. Test ook met een vertraagde verbinding in de ontwikkelaarstools van je browser. Zo zie je laat ladende blokken beter.

Zie je dat de verschuiving pas gebeurt wanneer het advertentieblok verschijnt, dan heb je je hoofdverdachte. Zie je dat niet, zoek dan verder bij afbeeldingen of fonts voordat je de advertentie aanpast.

Een advertentieblok heeft minstens drie toestanden: nog niet geladen, gevuld en niet gevuld (er komt geen advertentie). De meeste fouten ontstaan omdat de ontwerper alleen de gevulde staat heeft gezien.

Maak voor elke plaatsing een klein overzicht met drie schermafbeeldingen of notities:

• Leeg bij laden: hoeveel hoogte neemt het blok in vóór de inhoud binnenkomt?
• Gevuld: welke hoogte heeft de grootste advertentie die je advertentiepartner kan leveren?
• Niet gevuld: blijft de ruimte staan of klapt het blok in? Inklappen is zelf ook een verschuiving.

Vraag je advertentiepartner of redacteur welke formaten voor die plaatsing kunnen verschijnen. Die lijst bepaal je niet zelf, en ze kan wijzigen. Bewaar ze bij je overdrachtsnotitie.

Reserveren betekent dat de pagina vooraf weet hoeveel plek het blok nodig heeft. Welke keuze past, hangt af van hoeveel formaten er mogelijk zijn.

Voor de technische uitvoering gebruik je opmaakregels die een minimale hoogte of vaste verhouding vastleggen. Hoe je dat precies in jouw CMS of thema instelt, hangt van de installatie af. Laat de beheerder dit bevestigen.

Dit voorbeeld is verzonnen en bevat alleen invoer en verwachte controles.

Stel: een dienstenpagina heeft bovenaan een kop, daaronder een advertentieblok en daaronder een alinea met een contactknop. De partner kan twee formaten leveren: een lage banner en een hoger blok. Op mobiel staat de knop onder de eerste scherminhoud.

Invoer: twee mogelijke formaten, plaatsing boven de contactknop, soms geen advertentie.

Beslissing: volgens de matrix hierboven is dit het risicogeval. Je kiest tussen het blok onder de knop verplaatsen of de hoogte van het grootste formaat reserveren.

Verwachte controles na aanpassing:

1. Bij laden blijft de knop op dezelfde plek staan voor en na het verschijnen van de advertentie.
2. Bij een lege respons klapt het blok niet in.
3. Bij het lage formaat blijft de gereserveerde ruimte bewust zichtbaar leeg of neutraal gevuld.
4. Dezelfde drie controles op een smalle schermbreedte.

Wat dit in meetwaarden oplevert, weet je pas na je eigen meting. Daar doe je geen voorspelling over.

Een aanpassing is pas klaar als je ze kunt herhalen. Zet de volgende lijst in je overdrachtsdocument zodat een collega of bureau dezelfde test kan uitvoeren.

• Pagina's en plaatsingen die zijn aangepast, met de gekozen gereserveerde afmetingen.
• De lijst met mogelijke advertentieformaten en de datum waarop je ze hebt nagevraagd.
• Testbreedtes: minstens één smal en één breed scherm.
• Testomstandigheden: normale en vertraagde verbinding, met en zonder gevulde advertentie.
• Resultaat per test: knop blijft staan, ja of nee.
• Wat je niet kon testen, bijvoorbeeld formaten die alleen af en toe verschijnen.

Het leerplatform Learn Performance van web.dev bespreekt onder meer het kritieke renderpad en hoe resources de laadtijd van een pagina beïnvloeden. Dat is algemene achtergrond: de cursus beschrijft niet specifiek hoe je ruimte voor advertentieblokken reserveert. Bespreek met je ontwikkelaar of het blok laat of vroeg wordt ingeladen, naast de ruimtereservering zelf.

Een knop die wegspringt is niet alleen hinderlijk. Voor wie een toetsenbord, schermvergroting of trage motoriek gebruikt, is een verschuivende interface extra lastig. De tutorials van W3C WAI zijn bedoeld om inhoud bruikbaar te maken voor mensen met een beperking en tegelijk beter voor iedereen. Gebruik ze als aanvulling bij je controle, maar ze vervangen geen volledige toegankelijkheidsaudit.

Houd ook de grenzen van deze procedure in de gaten. Je test op je eigen apparaten en verbindingen. Echte bezoekers gebruiken andere combinaties, en advertentiepartners kunnen formaten wijzigen zonder dat jij het merkt. Plan daarom een herhaalcontrole wanneer je advertentiecode, thema of partner verandert.

Wil je eerst weten welke publiek zichtbare signalen je website nu geeft? Je kunt die laten bekijken via Marketing Scan. Een publieke scan meet wat van buitenaf zichtbaar is en bewijst niet hoe je pagina's technisch zijn opgebouwd, dus de bovenstaande controles blijven je eigen werk.