Cumulative Layout Shift (CLS)
De Core Web Vital genaamd Cumulative Layout Shift meet in welke mate de layout van een pagina verschuift tijdens het laden. CLS is samen met Largest Contentful paint (LCP) en First Input Delay (FID) de drie belangrijkste metrics waarmee Google gebruikerservaring meet. LCP meet de laadsnelheid en FID het reactievermogen van de pagina. Tegenwoordig zijn deze drie onderdelen ontzettend belangrijk voor een goede score in de zoekmachine. Tijdens het laden van een pagina worden de layout-elementen in een bepaalde volgorde zichtbaar. Dit kan ervoor zorgen dat de positie van deze elementen tijdens het laden opeens verandert. Wanneer dit gebeurt kan dat zorgen voor een slechte page experience. Voorbeelden van layout fouten tijdens het laden zijn:
- Iets was eerst zichtbaar en valt tijdens het laden buiten beeld waardoor de gebruiker moet scrollen om bij dit element te komen
- Een element verschuift net wanneer de gebruiker op iets wil klikken waardoor hij/zij onbedoeld op iets anders klikt
Het CLS meten
Om de Cumulative Layout Shift te meten kijkt Google naar twee dingen:
- Hoe vaak de layout verschuift
- Hoe groot deze verschuivingen zijn
Een goede CLS score betekent dat 75% van de paginabezoekers een layout shift ervaren van 0,1 seconden of lager. Bij een score van 0,25 seconden is de Cumulative Layout Shift ‘slecht’. Je kan het CLS meten op je website met een Cumulative Layout Shift test. In het onderdeel ‘site vitaliteit’ in Google Search Console staat aangegeven welke pagina’s een layout shift bezit. Je kan ook PageSpeed Insight gebruiken of layout shifts te ontdekken op je website.
Een vertraagd element bij Cumulative Shift kan bestaan uit het laden van een advertentie, het langzaam laden van fonts en afbeeldingen die nog zichtbaar moeten worden of veranderen van formaat. Functionele verschuivingen tellen juist niet mee bij het CLS, deze kunnen juist gunstig zijn voor de gebruikerservaring omdat de gebruiker deze zelf initieert. Denk hierbij aan het openen van een hamburgermenu of drop-down menu waarbij er navigatie verschijnt. Om Cumulative Layout Shift op te lossen of te voorkomen moet je:
- De grootte van afbeeldingen en video’s instellen
- Een laadindicator laten zien
- Fonts sneller laten inladen
- (Banner) advertenties plaatsen op de pagina
