CLS — beregn ét layout-skifts score
Hvor meget straffer et enkelt layout-hop din Cumulative Layout Shift-score?
Cumulative Layout Shift (CLS) måler uventede layout-forskydninger, fx når et billede uden fast størrelse skubber indhold ned. Et enkelt skifts score er defineret af web.dev som impact fraction (hvor stor en andel af skærmen der påvirkes) ganget med distance fraction (hvor langt det bevæger sig, som andel af den største skærmdimension). Brug beregneren til at forstå, hvor meget ét bestemt element-hop vejer i den samlede CLS-score.
Formel
layout-skiftets score = impact fraction × distance fraction
impact fraction = påvirket areal ÷ (viewport-bredde × viewport-højde)
distance fraction = flytningsafstand ÷ største viewport-dimension
CLS-tærskler (web.dev): god ≤ 0,1, kan forbedres ≤ 0,25, dårlig > 0,25
Den samlede CLS for en side er summen af de enkelte skifts scores inden for en session-vindue — dette er én enkelt hændelses bidrag, ikke sidens fulde CLS.
Vejledende
Resultatet er vejledende og et hjælpeværktøj til overslag og læring. Det erstatter ikke projektering, gældende normer og lovgivning eller en autoriseret fagpersons konkrete vurdering. Kontrollér altid mod kilden (web.dev — Cumulative Layout Shift (CLS), Core Web Vitals (Google)) og de faktiske forhold på opgaven. Se kilder & forbehold.
Næste skridt
Farvekontrast (WCAG)
Er kontrasten mellem tekstfarve og baggrundsfarve høj nok til at være tilgængelig?
Skærmens pixeltæthed (PPI)
Hvor skarp er en skærm reelt — og hvornår bør du designe med 2x/3x-billeder?
Sidens downloadtid og LCP-vurdering
Hvor lang tid tager det at hente siden på en typisk forbindelse — og består den Googles LCP-krav?
CSS Grid — antal kolonner (auto-fill/minmax)
Hvor mange kolonner får du automatisk med en given container-bredde og minimumsbredde pr. element?
SLA-oppetid → tilladt nedetid
Hvor meget nedetid tillader en given oppetids-garanti reelt pr. måned eller år?
Adgangskode-entropi og brute-force-tid
Hvor svær er en adgangskode reelt at gætte, baseret på længde og tegnsæt?
API rate-limit — hvor lang tid tager mine kald?
Hvor lang tid tager det at gennemføre X API-kald inden for en rate limit?
Hosting-trafik og databehov pr. måned
Hvor meget datatrafik bruger en hjemmeside reelt, og holder den sig inden for hostingplanens grænse?
Freelance timepris og projektpris
Hvad skal du tage i timen som freelance webudvikler, og hvad koster et konkret projekt?
Responsivt billede — nødvendig filbredde (srcset)
Hvor bred skal billedfilen reelt være, når skærmens pixel-tæthed tælles med?
WCAG — er det klikbare mål stort nok?
Lever en knap eller et link op til WCAG's minimumsstørrelse for klikbare mål?
SEO — titel og meta-beskrivelse: er den for lang?
Bliver din title-tag eller meta-beskrivelse afskåret i Googles søgeresultater?