De CLS-methode wordt gebruikt om te meten in hoeverre de inhoud van de webpagina verandert of verschuift gedurende de gehele levenscyclus van de paginarendering, ofwel om te meten hoe stabiel het visuele uiterlijk van de website is.
Waarschijnlijk heb je in je leven al vaak meegemaakt hoe frustrerend het is om in een menu op een item te klikken en per ongeluk op een advertentie te klikken, waardoor je naar een externe website wordt doorgestuurd. En hoe vervelend is het als de inhoud van een webpagina midden in een interactie verandert? Natuurlijk zijn die lay-outveranderingen ook irritant voor gebruikers. Maar ze kunnen ook grotere problemen veroorzaken voor webuitgevers, zoals een hoog bouncepercentage en schendingen van hun advertentiebeleid als gevolg van onbedoelde klikken door lay-outveranderingen.
Omdat Google CLS (Center for Live Analytics) beschouwt als een van de drie " Core Web Vitals ", kan een lage CLS-score een negatieve invloed hebben op de algehele Core Web Vitals-score, waardoor de gebruiker een onvoldoende krijgt. Als onderdeel van recente wijzigingen in het zoekalgoritme van Google worden sites die een voldoende score behalen op de Core Web Vitals-test gunstiger gerangschikt in de zoekresultaten.
Er bestaat een direct verband tussen het verbeteren van de CLS-score, het verbeteren van de algehele gebruikerservaring, mogelijk het verbeteren van de Google-ranking en het verhogen van het organische verkeer via Google.
Hoe wordt de cumulatieve lay-outverschuiving gemeten?
Wanneer een element dat zichtbaar is in de viewport om welke reden dan ook van startpositie verandert, wordt die verandering geregistreerd. Het wordt daarom als instabiel beschouwd als de startpositie verandert. Het is belangrijk om te weten dat een lay-outverschuiving alleen mogelijk is als een zichtbaar element naar een andere plaats op de pagina verplaatst wordt als gevolg van een gebeurtenis op die pagina, en niet als een nieuw element of een bestaand element groter of kleiner wordt.
Een CLS-score bestaat uit twee specifieke meetwaarden die zijn ontworpen om lay-outverschuivingen te volgen: impactfracties en afstandsfracties. Deze twee meetwaarden worden gebruikt om de CLS-score te bepalen. De impactfractie meet hoe instabiele elementen de viewport tussen twee frames beïnvloeden door het oorspronkelijke element en de verschuiving te combineren tot een verhouding die kan worden vergeleken met het totale zichtbare gebied van de viewport tussen de twee frames. In het geval van een instabiel element dat horizontaal of verticaal beweegt, vertegenwoordigt de afstandsfractie de afstand die dat element in de viewport heeft afgelegd (horizontaal of verticaal).
Hoe kun je je CLS-score verbeteren?
Om instabiele elementen/schommelend gedrag te verminderen, volgen hier enkele aanbevelingen:
- Afhankelijk van de structuur van uw website kunnen verschillende webpagina's een andere CLS-score krijgen. Zo kan de CLS-score voor artikelpagina's bijvoorbeeld hoger zijn dan die voor de homepage. De eerste stap is daarom het meten van de CLS-scores van alle primaire paginasjablonen van uw website.
- Afbeeldingen en video's moeten altijd breedte- en hoogte-attributen hebben. Maak responsieve afbeeldingen met gedefinieerde beeldverhoudingen.
- Als alternatief kunnen CSS-aspectratioboxen worden gebruikt om de benodigde ruimte voor de elementen te reserveren. Tijdens het laden zorgt dit ervoor dat de browser de juiste hoeveelheid ruimte in het document toewijst.
- Advertentieweergave kan aanzienlijk bijdragen aan verschuivingen in de lay-out als de plaatsing ervan niet optimaal is.
- Voeg geen dynamische content toe boven reeds geladen content, behalve als reactie op gebruikersinteracties. In dat geval zal de lay-out veranderen.
Verbeter de prestaties van je WordPress-website met onze site-optimalisatieservices !
