Auteur
Google houdt al 1 jaar rekening met de ervaring van de gebruiker als factor voor positiebepaling in zijn onderzoeksresultaten. Les KPI's de webperformance que sont les Core Web Vitals sont depuis suivi de près par les responsables SEO. Intressons-nous aujourd'hui au Cumulative Layout Shift.
Les Kern Web Vitals (Signaux Web Essentiels in het Frans) evalueren de prestaties van een webpagina voor een internetgebruiker:
Wat is de cumulatieve verschuiving van de lay-out?
De CLS (Cumulative Layout Shift) meet dus de visuele stabiliteit van een pagina. Het meest bekende voorbeeld is dat van een mediasite, die van nature dicht en publicitair is. De titel en het begin van een artikel worden weergegeven, de internetter probeert ze te ontcijferen, maar op het moment dat hij klikt verschijnt er een publicitaire band. L'internaute est donc amené vers une site tiers non souhaité, il lui faut faire marche arrière pour revenir à son article, et être vigilant à ne pas re-cliquer sur le bandeau surprise.
Cumulatieve verschuiving van de lay-out optimaliseren - Google - Google Maps https://web.dev/optimize-cls/
Omdat de situatie op moderne websites heel normaal is, is het logisch dat Google een indicateur de mesure heeft ingevoerd, om uitgevers van websites aan te moedigen dit te verbeteren.
Hoe te meten?
C'est une métrique composée de deux éléments :
In dit voorbeeld: het hoofdelement bedekt 50% van de monitor en vervangt 25%, hij gebruikt dus in totaal 75% van de monitor.
De CLS is dus : Oppervlakte x Afstand = 0,75 * 0,25 = 0,1875
On est donc dans le seuil d'Amélioration nécessaire pour que la page concernée soit considérée comme dépourvue de CLS
Eenvoudiger nog, de Google webperformance tools maken het mogelijk om de CLS van een pagina te achterhalen: PageSpeed Insights (site tiers) en Lighthouse (module du navigateur Google Chrome). De beste bron van gegevens blijft natuurlijk degene die de echte gegevens van gebruikers weergeeft, zoals Search Console. Dans le rapport des Signaux Web Essentiels, il est relevé le nombre de pages considérées comme Lentes ou nécessitant une amélioration, et chaque KPI dispose de son rapport.
Men identificeert dus gemakkelijk de pagina's die het meest beïnvloed zijn, gegroepeerd onder gelijksoortige pagina's (gabarit / template).
Hoe kan ik de CLS verbeteren?
Bonne nouvelle, plus de nous donner le maximum de données de mesure, Google nous gidsen om eventuele visueel instabiele problemen op te lossen.
Er worden verschillende scenario's besproken:
Het geval dat afbeeldingen worden opgeladen na de paginastructuur is courant op elk type site, vooral in e-commerce (fiches of listes de produits).
In het volgende voorbeeld wordt de naam van het product als eerste geladen, daarna volgen de afbeeldingen van het product. Deze verwijderen de namen die al geladen zijn, waardoor de pagina instabiel wordt tijdens het laden.
Het is mogelijk om deze handeling te voorkomen door zones te definiëren die gereserveerd zijn voor deze afbeeldingen, voordat u ze oplaadt.
Een van de mogelijke methoden is het aangeven van de afmetingen van de afbeeldingen, de navigators kunnen vervolgens de ruimte aanpassen door de verhouding tussen de grootte en de hoogte te berekenen (aspect-ratio).
Het is ook mogelijk om direct een aspectratio aan te geven in de CSS om deze toe te passen op een categorie vergelijkbare afbeeldingen.
We merken op dat deze verbetering de scores van de betreffende website aanzienlijk heeft verbeterd tijdens de productie ervan: van een CLS van 0,178 is de score nu 0,002. En van de 26% bezoekers die beïnvloed zijn door een visuele instabiliteit van de site, zijn er nu 1,27% (gegevens uit de Search Console, die de prestaties weergeven van de gebruikers van de site).
