Test af Cumulative Layout Shift (CLS)
SEOptimer's Cumulative Layout Shift-test viser din sides CLS i forhold til Googles grænseværdier ved hjælp af Googles egne feltdata fra rigtige besøgende.
SEO-audit af ethvert website på få sekunder
+ Omfattende SEO-/GEO-værktøjer til alle funktioner
Kør over 100 kontroller af dit website inden for on-page SEO, brugervenlighed, ydeevne, sociale medier og links. Nu med GEO i alle rapporter. SEOptimer tilbyder også søgeordsanalyse, rangsporing, backlinkanalyse og en komplet webcrawler.
Om kumulativ layoutforskydning
Hvad er kumulativ layoutforskydning?
Kumulativ layoutforskydning måler, hvor meget siden flytter sig, mens den indlæses. Hver gang et synligt element springer til en ny position, uden at den besøgende har forårsaget det, registreres forskydningen, og resultaterne lægges sammen.
Det er den metrik, der har det mest velkendte symptom: Du rækker ud efter et link og trykker på noget andet, fordi en annonce eller et billede blev indlæst ovenover og skubbede siden ned.
I modsætning til de to andre måles den ikke i tid. Det er et forholdstal, der beskriver, hvor meget af skærmen der flyttede sig, og hvor langt det flyttede sig, hvilket er grunden til, at tallene er små, og at en score på 0,1 allerede repræsenterer en synlig ændring.
Hvad tæller som en god CLS?
Google betragter 0,1 eller mindre som god, 0,1 til 0,25 som noget, der skal forbedres, og alt over 0,25 som dårlig ved den 75. percentil af indlæsninger af sider i den virkelige verden.
Layoutskift, som den besøgende selv forårsager, tæller ikke med. Åbning af en harmonika eller lukning af et banner flytter siden på legitim vis, og kun bevægelser inden for et halvt sekund efter en interaktion undskyldes, hvilket omtrent svarer til det tidsrum, hvor en person tilskriver bevægelsen sin egen handling.
Dette er normalt den mest opnåelige af de tre. Hvor LCP og INP kræver performancearbejde, løses de fleste layoutskift ved at reservere plads, hvilket er en ændring af markup frem for arkitekturen.
Hvad forårsager normalt layoutskift?
- Billeder og videoer uden attributter for bredde og højde, så der ikke reserveres plads, før de indlæses.
- Annoncer og indlejret indhold, der indsættes i en container uden en fastsat størrelse.
- Webskrifttyper, der indlæses i en anden størrelse end fallback-skrifttypen og får teksten til at flytte sig.
- Bannere, meddelelser og cookiebjælker, der indsættes over eksisterende indhold.
- Indhold, der indsættes af et script, efter at siden allerede er blevet gengivet.
Mønstret bag dem alle er det samme: Noget indlæses sent og optager plads, som der ikke var afsat plads til. Alt nedenunder skubbes ned, og det, som den besøgende var ved at trykke på, flytter sig.
Sådan forbedrer du det
- Angiv bredde og højde for alle billeder og videoer, så browseren reserverer pladsen.
- Giv annoncepladser og indlejrede elementer en fast minimumsstørrelse, også når de er tomme.
- Forudindlæs vigtige skrifttyper, og tilpas reservemetrikkerne, så skrifttypeudskiftningen ikke udløser et nyt layoutflow.
- Indsæt bannere og meddelelser under det eksisterende indhold, eller læg dem ovenpå i stedet for at skubbe indholdet.
- Reserver plads til alt, hvad et script tilføjer senere.
- Vær opmærksom på mobilvisningen, hvor en smal kolonne kan forvandle en lille forskydning til en stor.
Hvad dette værktøj kontrollerer
CLS-testen læser Googles feltdata for siden – målinger indsamlet fra rigtige besøgende i Chrome – og viser, hvordan den klarer sig i forhold til tærsklerne ovenfor.
Hvis der ikke vises noget resultat, er der ikke nok trafik til siden til, at Google kan rapportere om det. Layoutforskydning er den eneste metric, du pålideligt kan finde manuelt imens: Indlæs siden på en telefon med en langsom forbindelse, og se, hvad der flytter sig.
For de to andre metrics eller alle tre samlet skal du bruge Core Web Vitals-test.
Hvad kan du gøre som det næste
De fleste layoutforskydninger skyldes billeder og assets, der indlæses sent. Kontrollér billedoptimering på siden, hvor meget den fylder med websidens filstørrelse-kontrollen, og hvordan den opfører sig på en telefon med mobilresponsiv-testen.
Omfattende SEO-værktøjskasse med over 55 værktøjer
Tjek sidetitler, metabeskrivelser, overskrifter, Schema, Core Web Vitals, SSL og robots.txt. Generér metatags, sitemaps og .htaccess-regler, minificér CSS, JS og HTML, og udarbejd tekster med vores AI-skriveværktøjer – øjeblikkeligt og gratis.
Yderligere læsning
Se Mere
Core Web Vitals: What are They? How are They Crucial to SEO?
You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...