Cumulatieve layoutverschuiving (CLS)

Cumulative Layout Shift meet visuele instabiliteit door te kwantificeren hoeveel zichtbare content onverwacht verschuift gedurende de levensduur van een pagina. Het is een van Google's Core Web Vitals en, in tegenstelling tot laad- en responsiviteitsmetingen, is het een eenheidsloze score in plaats van een tijdsduur. De score wordt berekend op basis van het percentage van het zichtbare gebied dat door een verschuiving wordt beïnvloed en de afstand die de content heeft afgelegd. Google hanteert een drempelwaarde van 0.1 of lager, wat overeenkomt met het 75e percentiel van de daadwerkelijke gebruikerservaring.

Het gedrag dat het vastlegt, is herkenbaar voor iedereen die wel eens op een link heeft geklikt en vervolgens een advertentie erboven zag verschijnen waardoor de pagina naar beneden werd geduwd, of die een alinea begon te lezen die plotseling versprong doordat een ander lettertype verscheen. Naast irritatie leidt dit in de praktijk tot misklikken: content die verschuift tussen het moment dat een gebruiker besluit te klikken en het moment dat hij of zij daadwerkelijk klikt, resulteert in de verkeerde actie. Op een e-commerce- of bankomgeving kan dit leiden tot een verkeerde aankoop, een verkeerde verwijdering of een onbedoelde navigatie.

De oorzaken zijn goed gedocumenteerd en meestal eenvoudig te voorkomen. Afbeeldingen en video's zonder expliciete afmetingen veroorzaken een herberekening van de tekstweergave (reflow) tijdens het laden, omdat de browser niet van tevoren de juiste ruimte kan reserveren. Advertenties, embeds en iframes die zonder gereserveerde container in de tekstweergave worden geplaatst, duwen de inhoud naar beneden. Webfonts die wisselen van een fallback met afwijkende afmetingen veroorzaken een herberekening van de tekstweergave. Inhoud die dynamisch boven bestaande inhoud wordt ingevoegd, zoals banners, notificaties en toestemmingsverklaringen, verschuift alles eronder. Animaties die lay-outeigenschappen wijzigen in plaats van transformaties en transparantie, veroorzaken een herberekening van de tekstweergave bij elk frame.

De bijbehorende oplossingen behoren tot de goedkoopste beschikbare oplossingen voor prestatieoptimalisatie. Het instellen van breedte- en hoogtekenmerken of een beeldverhouding voor media reserveert ruimte vóór het laden. Het toewijzen van vaste containers voor advertenties en embeds voorkomt dat invoeging content verdringt. Het afstemmen van fallback-lettertypekenmerken op het weblettertype en het gebruik van geschikte strategieën voor het laden van lettertypen vermindert herberekeningen bij het wisselen van pagina's. Het invoegen van dynamische content onder de vouw of in overlays in plaats van boven bestaande content voorkomt de meest storende categorie. Door alleen transformatie en transparantie te animeren, wordt beweging buiten het lay-outpad gehouden.

Metingen vereisen aandacht voor de sessie als geheel, en niet alleen voor de laadtijd van de pagina. De meetwaarde wordt verzameld gedurende de hele levensduur van de pagina, inclusief verschuivingen die optreden tijdens scrollen en interactie. Dit betekent dat een pagina die bij de eerste laadbeurt goed scoort, toch een lage score kan behalen vanwege lazy-loading content die zonder gereserveerde ruimte binnenkomt. Verschuivingen die plaatsvinden binnen een kort tijdsbestek na een gebruikersinteractie worden buiten beschouwing gelaten, omdat content die beweegt als reactie op een bewuste actie verwacht wordt en niet storend is.

Toestemmingsverklaringen en promotionele banners verdienen bijzondere aandacht, omdat ze laat worden ingevoegd, meestal buiten het hoofdontwikkelingsproces worden beheerd en vaak content verdringen. Een banner die na het renderen bovenaan het document verschijnt, duwt alles naar beneden precies op het moment dat een bezoeker begint te lezen of op een link klikt. Door dergelijke elementen als overlays te presenteren die niet deelnemen aan de lay-out, of door er ruimte voor te reserveren voordat ze worden gerenderd, wordt het probleem opgelost zonder ze te verwijderen. Omdat deze componenten vaak door marketing- of juridische teams via tools van derden worden geconfigureerd, vereist de oplossing meestal overleg tussen verschillende afdelingen in plaats van alleen een codewijziging.

Omdat de oorzaken meestal in sjablonen, advertentie-integraties en ingebedde elementen van derden zitten in plaats van in één enkel component, vereist de oplossing doorgaans coördinatie tussen de teams die hiervoor verantwoordelijk zijn. In de praktijk is dit standaard. webprestaties werk, en het is een van de gebieden waar de link met commerciële resultaten het meest direct is, aangezien lay-outinstabiliteit op een product- of afrekenpagina leidt tot onbedoelde klikken en afhaken, wat een UX-audit Dit zal zich manifesteren als gebruiksproblemen zonder dat de onderliggende technische oorzaak noodzakelijkerwijs wordt vastgesteld.