CLS en advertising: hoe voorkom je een negatieve score? 

Een afbeelding die knippert, een button die plots verschuift waardoor je op de verkeerde link klikt. Het verspringen van de content op een webpagina (Cumulative Layout Shift) is funest voor de gebruikerservaring en wordt sinds dit jaar zelfs ‘bestraft’ door Google. Zaak dus om hier wat aan te doen. Met name door de advertising setup onder de loep te nemen. Grote kans dat de banners op je website namelijk zorgen voor schuivende content.  

Google introduceerde de term Cumulative Layout Shift vorig jaar, toen het de Core Web Vitals aankondigde. Aan de hand van drie metrics gaat het vanaf mei 2021 de gebruikerservaring beoordelen en meenemen in de ranking van een website. Over die web vitals is al veel geschreven, dus ik benoem ze hier kort:   

• Largest Contentful Paint (LCP): Meet wanneer het grootste element in de viewport zichtbaar wordt. Het kan worden gebruikt om te bepalen wanneer de hoofdinhoud van de pagina is weergegeven op het scherm.
• First Input Delay (FID): Meet de vertraging tussen het moment waarop de gebruiker op iets klikt en de tijd dat de pagina op deze actie reageert en deze verwerkt.
• Cumulative Layout Shift (CLS): Hoe visueel stabiel is de pagina?

De laatste web vital (CLS) stelt dus vast of er onverwachts sprake is van een layoutverschuiving tijdens het laden en gebruiken van een pagina. Zo’n layoutverschuiving vindt plaats wanneer een visueel element van positie verandert van het ene rendered frame naar het volgende. Dat heeft vanaf mei dus een negatieve invloed de ranking van je website en is bovendien vervelend voor bezoekers, die na een aantal haperingen wellicht afhaken.

Google spreekt van een goede CLS-score onder de 0.1. Een pagina die tussen de 0.1 en 0.25 scoort heeft verbetering nodig. Boven 0.25 is sprake van een slechte score. De CLS-score van een webpagina kan via onderstaande tools berekend worden.

• Chrome extension
• Pagespeed insights 
• Webpagetest.org 
• Chrome dev tools -> Via Performance, of Lighthouse is te achterhalen welke elementen de verschuiving veroorzaken 

Wat advertising en CLS met elkaar te maken hebben

Er wordt momenteel nog in kaart gebracht welke elementen precies invloed uitoefenen op CLS. Maar dat advertising een rol speelt in de visuele stabiliteit van websites, staat vast. Daarom is het belangrijk dat we vanuit advertising toewerken naar een bepaalde mate van standaardisering, zodat ads een minimale invloed hebben op het functioneren van pagina’s.   

Zo ver zijn we echter nog niet. Als publisher zijn er ondertussen maatregelen die je kunt treffen om het effect van ads op CLS te minimaliseren. Een overzicht: 

1: Floating banners

Floating banners, fingerprints en sidebars hebben vaak een negatieve invloed op CLS. De invloed is afhankelijks van de grootte van het element. Een fingerprint zal dus weinig schaden, maar wordt wel meegerekend. Belangrijk is om de rich media-formaten (de interactieve media, zoals een meebewegende banner) onder de loep te nemen. Deze kunnen ertoe leiden dat je onbedoeld een slechte ranking krijgt. Op het moment dat een sticky banner in een fixed element zweeft zal het effect minimaal zijn en bovendien wordt het meebewegen van de banner dan niet meegenomen. 

2: Outstream video

De outstream player wordt meestal dynamisch geïnjecteerd in de pagina. Wanneer de player vanuit één pixel opent en weer dichtklapt, heeft dat een vrij grote invloed op de CLS. Een oplossing is om de outstream in een vast frame te laten verschijnen en verdwijnen. 

3: Minimum of fixed height

Hetzelfde geldt voor de div die geen minimum of fixed height hebben waarin de banners worden gepositioneerd. Een eenvoudige oplossing is om die wel toe te voegen. Dit kan overigens ook ingesteld worden op basis van screen width. Een prima uitgangspunt is om dezelfde size mapping aan te houden als het banner script. 

Het voordeel van de minimum height is dat er minder loze ruimte rondom banners te zien is. Bij deze methode is er echter nog altijd sprake van wat contentverschuiving. Dat is niet het geval bij fixed size, maar houd er rekening mee dat hierbij wel loze ruimte rondom de banner verschijnt. 

4: Consent managers en cookie bars

Ook de verplichte consent managers en cookiebars geven een negatief resultaat indien deze niet met fixed elementen of skeleton screens zijn opgebouwd. Het ideale scenario zou natuurlijk zijn dat deze elementen niet worden meegewogen bij een page scan. Maar of dat kan, moet nog blijken. 

Positief effect op advertising 

Het besluit van Google om CLS mee te laten wegen in de SEO-ranking dwingt de markt tot zelfreflectie: hoe functioneren mijn webpagina’s en advertenties? Al met al een hele welkome ontwikkeling. Het neveneffect hiervan is namelijk dat de user experience verbetert. Het wordt voor eindgebruikers een stuk prettiger om websites te bezoeken en de rol van advertising is daarin positiever. 

Over de auteur: Nick Giling is Head of Operations bij [M]media