Hvad er Cumulative Layout Shift (CLS)? Forklaring af Cumulative Layout Shift-betydningen<\/h2>\n
Cumulative Layout Shift er et m\u00e5l for, hvor meget en side p\u00e5 dit websted uventet flytter sig rundt i l\u00f8bet af en brugers bes\u00f8g, som m\u00e5lt af Layout Instability API<\/a>, et standardiseret API til test af ydeevne<\/a>.<\/p>\n Cumulative Layout Shift (CLS) er et af de tre m\u00e5lepunkter i Googles Core Web Vitals-initiativ<\/a> sammen med Largest Contentful Paint (LCP) og First Input Delay (FID).<\/p>\n For at forst\u00e5 betydningen af Cumulative Layout Shift er det vigtigt at diskutere layoutforskydning i almindelighed.<\/p>\n Et layoutskifte opst\u00e5r, n\u00e5r indholdet p\u00e5 dit websted “flytter” eller “forskydes” uventet.<\/p>\n Eller i tekniske termer er det, n\u00e5r et element, der er synligt i visningsomr\u00e5det, \u00e6ndrer sin startposition mellem to frames.<\/p>\n Et almindeligt eksempel er, at du er i gang med at l\u00e6se en tekstblok … men s\u00e5 dukker der pludselig en annonce op, der indl\u00e6ses sent, og som skubber tekstindholdet nedad p\u00e5 siden.<\/p>\n Her er et andet eksempelbillede fra Google, der viser, hvordan dette kan ske:<\/p>\n Du er n\u00e6sten helt sikkert st\u00f8dt p\u00e5 layoutforskydninger, n\u00e5r du surfer rundt p\u00e5 nettet, selv om du ikke kender dem under det navn.<\/p>\n Et enkelt bes\u00f8g kan have flere separate layoutskift-h\u00e6ndelser. Derfor har m\u00e5lingerne for kumulativt layoutskift til form\u00e5l at indfange hele billedet ved at m\u00e5le det samlede antal uventede layoutskift p\u00e5 en side*.<\/p>\n *Den n\u00f8jagtige m\u00e5ling er lidt mere teknisk efter nogle \u00e6ndringer fra Googles side, men det er stadig den grundl\u00e6ggende id\u00e9. Hvis du er interesseret i de sm\u00e5 detaljer, kan du <\/em>l\u00e6s om det her<\/em><\/a>.<\/em><\/p>\n\n Hoved\u00e5rsagen til, at Cumulative Layout Shift er d\u00e5rligt, er, at det skaber en d\u00e5rlig brugeroplevelse<\/a> p\u00e5 dit websted.<\/p>\n I bedste fald er det let irriterende for dine bes\u00f8gende. I v\u00e6rste fald kan det f\u00e5 bes\u00f8gende til at udf\u00f8re handlinger, som de ikke \u00f8nsker at udf\u00f8re.<\/p>\n Forestil dig for eksempel, at en bruger \u00f8nsker at klikke p\u00e5 “Annuller”, men ved et uheld klikker p\u00e5 “Bekr\u00e6ft”, fordi et layoutskifte har flyttet knappernes position lige mens personen klikker.<\/p>\n Ud over at p\u00e5virke dine menneskelige bes\u00f8gendes oplevelse kan d\u00e5rlige score for kumulativ layoutforskydning ogs\u00e5 v\u00e6re en h\u00e6msko for dit websteds placering i s\u00f8gemaskinerne<\/a>.<\/p>\n Fra og med Googles opdatering af Page Experience<\/a> (som blev rullet ud i august 2021) bruger Google Core Web Vitals som en af sine SEO-rangeringsfaktorer. Da Cumulative Layout Shift er en del af Core Web Vitals, betyder det, at det kan p\u00e5virke dit websteds s\u00f8gepr\u00e6stationer<\/a>.<\/p>\n Hvis du l\u00f8ser eventuelle problemer med Cumulative Layout Shift p\u00e5 dit websted, vil det grundl\u00e6ggende set g\u00f8re det bedre for b\u00e5de menneskelige bes\u00f8gende og s\u00f8gemaskiner.<\/p>\n S\u00e5 – hvad kan v\u00e6re \u00e5rsag til Cumulative Layout Shift? Lad os d\u00e6kke det n\u00e6ste…<\/p>\n Her er en hurtig oversigt over de mest almindelige \u00e5rsager til layoutforskydning:<\/p>\n Vi vil g\u00e5 meget mere i dybden med disse problemer senere i dette indl\u00e6g, n\u00e5r vi viser dig, hvordan du l\u00f8ser hvert enkelt almindeligt problem.<\/p>\n Der findes en r\u00e6kke v\u00e6rkt\u00f8jer, som du kan bruge til at teste dit websteds Cumulative Layout Shift-score.<\/p>\n Cumulative Layout Shift er en del af Lighthouse-audit, s\u00e5 ethvert hastighedstestv\u00e6rkt\u00f8j, der bruger Lighthouse som en del af sin audit, vil indeholde CLS-data – dette omfatter PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools og mange andre popul\u00e6re testv\u00e6rkt\u00f8jer<\/a>.<\/p>\n Her er nogle af de bedste v\u00e6rkt\u00f8jer til test af Cumulative Layout Shift, der skiller sig ud for deres anvendelighed…<\/p>\n PageSpeed Insights<\/a> er et af de mest nyttige v\u00e6rkt\u00f8jer til at vurdere tilstanden af dit websteds layoutskifte, fordi det giver dig to datakilder:<\/p>\n Du kan ogs\u00e5 se data for b\u00e5de desktop og mobil ved at skifte mellem fanerne.<\/p>\n Bem\u00e6rk <\/strong>– laboratoriedataene kan kun m\u00e5le layoutforskydninger, der opst\u00e5r under indl\u00e6sningen af siden, s\u00e5 dine resultater for rigtige brugere kan v\u00e6re lidt h\u00f8jere, hvis du har layoutforskydninger, der opst\u00e5r efter indl\u00e6sningen af siden.<\/p>\n Chrome Developer Tools tilbyder nogle nyttige ressourcer<\/a> til b\u00e5de m\u00e5ling af CLS og fejlfinding af de enkelte layoutforskydninger, der forekommer p\u00e5 dit websted.<\/p>\n For det f\u00f8rste kan du k\u00f8re en Lighthouse-audit for at se dit sites CLS-score. S\u00e5dan g\u00f8r du:<\/p>\n Efter en kort ventetid b\u00f8r du se den almindelige Lighthouse-auditgr\u00e6nseflade (som ligner PageSpeed Insights meget).<\/p>\n I Chrome Developer Tools kan du dog ogs\u00e5 grave dybere i CLS med dens Rendering<\/strong>-analyse. Dette giver dig mulighed for at fremh\u00e6ve individuelle omr\u00e5der med layoutskift p\u00e5 dit websted, hvilket hj\u00e6lper dig med at fejlfinde dem.<\/p>\n S\u00e5dan g\u00f8r du:<\/p>\n Genindl\u00e6s nu den side, du vil teste, og Chrome b\u00f8r fremh\u00e6ve alle omr\u00e5der med layoutforskydninger ved hj\u00e6lp af en bl\u00e5 boks. Disse fremh\u00e6vninger vises p\u00e5 den faktiske side, mens indholdet indl\u00e6ses, og forsvinder, n\u00e5r skiftet er afsluttet.<\/p>\n Hvis fremh\u00e6velserne vises for hurtigt til, at du kan f\u00f8lge med, kan du s\u00e6nke hastigheden p\u00e5 dit websted og se det blive indl\u00e6st ramme for ramme ved hj\u00e6lp af fanen Ydeevne<\/strong>.<\/p>\n Mens Google Search Console<\/a> ikke giver dig mulighed for at k\u00f8re laboratorietests for at bestemme Cumulative Layout Shift, giver den dig en nem m\u00e5de at se problemer med Cumulative Layout Shift p\u00e5 dit websted, som m\u00e5lt ved hj\u00e6lp af Chrome UX-rapporten.<\/p>\n Fordelen ved at bruge Google Search Console<\/a> frem for andre v\u00e6rkt\u00f8jer er, at du hurtigt kan se problemer p\u00e5 hele dit websted i stedet for at teste side for side.<\/p>\n Her kan du se, hvordan du f\u00e5r vist potentielle problemer p\u00e5 dit websted:<\/p>\n Hvis det er relevant, vil Google fremh\u00e6ve URL’er<\/a> med problematiske scoringer for Cumulative Layout Shift.<\/p>\n Bem\u00e6rk<\/strong> – du vil kun se data her, hvis dit websted har tilstr\u00e6kkelig m\u00e5nedlig trafik til at blive inkluderet i Chrome UX-rapporten.<\/p>\n Som navnet antyder, genererer Layout Shift GIF Generator<\/a> en GIF af layoutforskydningerne p\u00e5 dit websted, s\u00e5 du kan se pr\u00e6cis, hvilket indhold der for\u00e5rsager problemer. Det giver dig ogs\u00e5 din score, selv om det ikke er v\u00e6rkt\u00f8jets hovedfokus.<\/p>\n Det eneste, du g\u00f8r, er at tilf\u00f8je den URL, du vil teste, og v\u00e6lge mellem mobil eller desktop. Derefter vil det generere en GIF-fil af dit websted med gr\u00f8nne fremh\u00e6vninger, der viser de n\u00f8jagtige elementer, der skifter.<\/p>\n Ved at se, hvilke elementer der skifter rundt og bidrager til din Cumulative Layout Shift-score, kan du vide pr\u00e6cis, hvor du skal fokusere, n\u00e5r det g\u00e6lder om at forbedre dit websteds score.<\/p>\n If\u00f8lge Googles Core Web Vitals-initiativ er en god score for Cumulative Layout Shift 0,1 eller mindre<\/strong>.<\/p>\n Hvis din score for Cumulative Layout Shift ligger mellem 0,1 og 0,25, definerer Google det som “behov for forbedring”.<\/p>\n Og hvis din Cumulative Layout Shift-score er over 0,25, definerer Google den som “d\u00e5rlig”.<\/p>\n Her er en grafik fra Googles Core Web Vitals-websted, der viser disse scorer visuelt:<\/p>\n Nu hvor du forst\u00e5r, hvad der sker med Cumulative Layout Shift, er det tid til at g\u00e5 over til nogle praktiske tips om, hvordan du kan rette Cumulative Layout Shift i WordPress.<\/p>\n Selvom disse tips kommer fra en WordPress-vinkel, er de alle universelle, og du kan anvende dem p\u00e5 andre v\u00e6rkt\u00f8jer til websideopbygning.<\/p>\n En af de mest almindelige \u00e5rsager til layoutforskydning er billeder med sen indl\u00e6sning, der flytter indholdet rundt, is\u00e6r hvis du bruger taktikker som lazy loading<\/a>.<\/p>\n For at undg\u00e5 dette kan du angive et billedes dimensioner i koden, n\u00e5r du indlejrer det. P\u00e5 den m\u00e5de vil den bes\u00f8gendes browser reservere denne plads, selv om billedet ikke er blevet indl\u00e6st endnu, hvilket betyder, at billedet ikke beh\u00f8ver at flytte indhold rundt.<\/p>\n Hvis du indlejrer billeder via WordPress-editoren (enten Gutenberg-blokeditoren<\/a> eller den klassiske TinyMCE-editor<\/a>), er der ingen grund til manuelt at angive billeddimensionerne, fordi WordPress g\u00f8r det automatisk for dig.<\/p>\n Det samme g\u00e6lder for popul\u00e6re side builder-plugins<\/a> som Elementor, Divi<\/a>, Beaver Builder osv.<\/p>\n Der kan dog opst\u00e5 problemer, hvis du manuelt indlejrer billeder ved hj\u00e6lp af din egen kode, hvilket kan ske, hvis du tilf\u00f8jer indhold til et plugin, redigerer dit child theme’s skabelonfiler<\/a> og s\u00e5 videre.<\/p>\n HTML-koden for en grundl\u00e6ggende billedindlejring ser s\u00e5ledes ud:<\/p>\n For at angive dimensionerne kan du tilf\u00f8je h\u00f8jde<\/strong>– og bredde<\/strong>parametre. Her er et eksempel p\u00e5, hvordan det kan se ud for et billede p\u00e5 600x300px:<\/p>\n Mange WordPress performance plugins<\/a> indeholder ogs\u00e5 funktioner til at automatisere dette, som f.eks. funktionerne Tilf\u00f8j manglende billeddimensioner<\/strong> i WP Rocket eller Perfmatters.<\/p>\n Ligesom med billeder skal du ogs\u00e5 angive dimensioner, n\u00e5r du tilf\u00f8jer videoer, iframes eller andre indlejringer.<\/p>\n De fleste hjemmesiders indlejringsv\u00e6rkt\u00f8jer b\u00f8r automatisk angive dimensioner for indlejringen.<\/p>\n Hvis du f.eks. kigger p\u00e5 YouTube’s indlejringskode<\/a>, kan du se, at den indeholder dimensioner:<\/p>\n Det samme g\u00e6lder for mange andre tjenester.<\/p>\n Men hvis din indlejringskode ikke angiver h\u00f8jde og bredde, kan du manuelt tilf\u00f8je disse dimensioner til indlejringskoden.<\/p>\n Problemer med indl\u00e6sning og optimering af skrifttyper kan v\u00e6re en anden almindelig kilde til layoutforskydninger via to potentielle problemer:<\/p>\n For at undg\u00e5 disse problemer skal du optimere den m\u00e5de, du indl\u00e6ser skrifttyper p\u00e5 dit websted (hvilket ogs\u00e5 kan have nogle fordele for webstedets ydeevne).<\/p>\n Ved at hoste skrifttyper lokalt og bruge preloading fort\u00e6ller du de bes\u00f8gendes browsere, at de skal prioritere indl\u00e6sning af brugerdefinerede skrifttypefiler h\u00f8jere.<\/p>\n Ved at indl\u00e6se skrifttypefiler f\u00f8r andre ressourcer kan du sikre, at skrifttypefilerne allerede er indl\u00e6st, n\u00e5r browseren begynder at gengive dit indhold, hvilket kan forhindre problemer med FOUT og FOIT.<\/p>\n Hvis du vil vide, hvordan du hoster skrifttyper lokalt i WordPress, kan du l\u00e6se vores komplette guide til at hoste skrifttyper lokalt i WordPress<\/a>.<\/p>\n Derfra kan du konfigurere forindl\u00e6sning af skrifttyper manuelt eller ved hj\u00e6lp af et plugin. De fleste ydelsesplugins indeholder muligheder for at forh\u00e5ndsindl\u00e6se skrifttyper, herunder WP Rocket, Perfmatters, Autoptimize<\/a> og andre.<\/p>\n Hvis du bruger Google Fonts<\/a>, kan du ogs\u00e5 bruge det gratis OMGF-plugin<\/a> til at hoste skrifttyperne lokalt og<\/em> forh\u00e5ndsindl\u00e6se dem.<\/p>\n Du kan ogs\u00e5 manuelt forudindl\u00e6se skrifttyper ved at tilf\u00f8je koden til <head><\/strong>-afsnittet p\u00e5 dit websted.<\/p>\n Her er et eksempel p\u00e5 koden – s\u00f8rg for at erstatte den med det faktiske navn\/placering af den skrifttypefil, du \u00f8nsker at forudindl\u00e6se:<\/p>\n Du kan tilf\u00f8je det direkte ved hj\u00e6lp af et WordPress-child theme<\/a> eller injicere det med wp_head hook<\/a> og et plugin som Code Snippets<\/a>.<\/p>\n CSS Font-Display-egenskaben<\/a> giver dig mulighed for at styre renderingsadf\u00e6rden for skrifttyperne p\u00e5 dit websted og undg\u00e5 FOIT.<\/p>\n I det v\u00e6sentlige giver den dig mulighed for at bruge en fallback-skrifttype i situationer, hvor din brugerdefinerede skrifttype ikke er indl\u00e6st endnu.<\/p>\n Der er to hovedmuligheder, som du kan bruge til at l\u00f8se CLS:<\/p>\n Med Swap <\/strong>skifter browseren altid<\/strong> til den tilpassede skrifttype, n\u00e5r den er indl\u00e6st.<\/p>\n Swap<\/strong> l\u00f8ser FOIT fuldst\u00e6ndigt, men det kan f\u00f8re til FOUT. For at minimere dette b\u00f8r du s\u00f8rge for, at fallback-skrifttypen bruger samme afstand som den brugerdefinerede skrifttype (i det mindste s\u00e5 meget som muligt). P\u00e5 den m\u00e5de vil det ikke f\u00f8re til layoutforskydninger, selv hvis skrifttypen \u00e6ndres, fordi afstanden vil v\u00e6re den samme.<\/p>\n Med Optional<\/strong> giver browseren den tilpassede skrifttype 100 ms til at indl\u00e6se. Men hvis den tilpassede skrifttype ikke er tilg\u00e6ngelig p\u00e5 det tidspunkt, vil browseren bare holde sig til fallback-skrifttypen og aldrig \u00e6ndre den til den tilpassede skrifttype for det p\u00e5g\u00e6ldende sidevisit(den vil bruge den tilpassede skrifttype for efterf\u00f8lgende sidevisit, da det er sandsynligt, at skrifttypefilen er blevet hentet og lagret i cache p\u00e5 det tidspunkt<\/em>).<\/p>\n Selv om Optional<\/strong> kan l\u00f8se b\u00e5de FOIT og FOUT, er ulempen, at den bes\u00f8gende m\u00e5ske sidder fast med fallback-skrifttypen til deres f\u00f8rste sidevisning.<\/p>\n Hvis du er fortrolig med at arbejde med CSS, kan du manuelt redigere Font-Display-egenskaben i dit child theme’s stylesheet.<\/p>\n Hvis du ikke f\u00f8ler dig fortrolig med at g\u00f8re det, kan du ogs\u00e5 finde nogle plugins, der kan hj\u00e6lpe dig:<\/p>\n Hvis du bruger Elementor<\/a>, indeholder Elementor ogs\u00e5 en indbygget indstilling til at g\u00f8re dette. G\u00e5 til Elementor \u2192 Indstillinger \u2192 Avanceret<\/strong>. Du kan derefter indstille rullemenuen Google Fonts Load<\/strong> lig med Swap eller Optional alt efter dine pr\u00e6ferencer:<\/p>\n Hvis al denne snak om preloading og Font-Display er en smule forvirrende, er en nem l\u00f8sning at bruge en systemskriftstabel i stedet for en brugerdefineret skriftstabel.<\/p>\n Selv om dette begr\u00e6nser dine designmuligheder, l\u00f8ser det fuldst\u00e6ndigt problemerne med Cumulative Layout Shift-skrifttyper, FOIT og FOUT. Desuden vil det ogs\u00e5 hj\u00e6lpe dit websted med at indl\u00e6se meget hurtigere.<\/p>\n Hvis du er interesseret i dette, kan du tjekke Brians vejledning til brug af en systemskriftstamme p\u00e5 WordPress<\/a>.<\/p>\n Hvis du bruger displayannoncer, er det vigtigt, at du reserverer plads til disse annoncer i koden p\u00e5 dit websted. Dette f\u00f8lger den samme id\u00e9 som at reservere plads til billeder, videoer og indlejringer.<\/p>\n Displayannoncer fortjener dog en s\u00e6rlig omtale, fordi det er meget almindeligt at have displayannoncer, der indl\u00e6ses sent, hvis du bruger nogen form for budteknologi. Det skyldes, at budteknologien skal bruge tid til at arbejde og finde ud af, hvilken annonce der skal vises.<\/p>\n Det kan ogs\u00e5 v\u00e6re et problem med automatiske AdSense-annoncer<\/a>, hvis du har dynamiske annoncepladser, fordi AdSense ud over problemet med budgivning ogs\u00e5 indl\u00e6ser annoncer i forskellige st\u00f8rrelser<\/a> (s\u00e5 du kender m\u00e5ske ikke annoncens st\u00f8rrelse p\u00e5 forh\u00e5nd).<\/p>\n Hvis du bruger et af de popul\u00e6re displayannonceringsnetv\u00e6rk<\/a> som Mediavine eller AdThrive, b\u00f8r de allerede tilbyde v\u00e6rkt\u00f8jer, der hj\u00e6lper dig med at undg\u00e5 layoutforskydninger med dine annoncer. Hvis du f.eks. \u00e5bner Mediavines annonceindstillinger<\/strong>, kan du aktivere en toggle til at optimere annoncer til CLS<\/strong>:<\/p>\n For at optimere AdSense for Cumulative Layout Shift er det lidt mere tricky.<\/p>\n En almindelig l\u00f8sning er at tilf\u00f8je et <div>-wrapper-element omkring hver annonceenhed, der angiver en minimumsh\u00f8jde ved hj\u00e6lp af CSS-egenskaben min-height <\/strong><\/a>. Du kan ogs\u00e5 bruge media queries til at \u00e6ndre minimumsh\u00f8jden baseret p\u00e5 en brugers enhed.<\/p>\n Google anbefaler, at du indstiller min-h\u00f8jden svarende til den st\u00f8rst mulige annoncest\u00f8rrelse. Selv om dette kan resultere i spildt plads, hvis der vises en mindre annonce, er det den bedste mulighed for at eliminere enhver risiko for, at der opst\u00e5r et layoutskifte.<\/p>\n N\u00e5r du opretter dette wrapper-element, skal du s\u00f8rge for at bruge et CSS-id i stedet for en klasse<\/a>, da AdSense ofte fjerner CSS-klassen fra overordnede objekter.<\/p>\n S\u00e5dan kan CSS’en se ud:<\/p>\n Og her er, hvordan AdSense-indlejringen kan se ud:<\/p>\n P\u00e5 frontend vil du nu se, at dit websted reserverer plads til annoncen, selv om den er tom:<\/p>\n Mange WordPress-websteder vil dynamisk injicere indhold til funktioner som f.eks. meddelelser om cookie samtykke, relateret indhold, e-mail opt-in-formularer<\/a> osv.<\/p>\n Selv om dette er fint at g\u00f8re, skal du v\u00e6re forsigtig med at undg\u00e5 at g\u00f8re det p\u00e5 en m\u00e5de, der for\u00e5rsager layoutforskydninger.<\/p>\n En god bedste praksis for webdesign<\/a> er her at aldrig at injicere indhold over<\/em> eksisterende indhold, medmindre brugeren specifikt har foretaget en interaktion (f.eks. ved at klikke p\u00e5 en knap).<\/p>\n Hvis du f.eks. tilf\u00f8jer en meddelelse om samtykke til cookies<\/a>, skal du ikke placere den \u00f8verst p\u00e5 siden, fordi det ville f\u00e5 indholdet til at blive skubbet nedad(medmindre du allerede har reserveret plads til banneret om samtykke til cookies<\/em>).<\/p>\n I stedet skal du vise meddelelsen nederst p\u00e5 siden, s\u00e5 du undg\u00e5r at flytte synligt indhold nedad.<\/p>\n Hvis du vil se, om dynamisk indhold er \u00e5rsag til problemet, kan du bruge visualiseringsv\u00e6rkt\u00f8jerne fra ovenfor (f.eks. Layout Shift GIF Generator<\/a>).<\/p>\n Hvis du kan se, at indhold fra et bestemt plugin udl\u00f8ser layoutforskydninger, kan du overveje at justere det p\u00e5g\u00e6ldende plugins indstillinger eller skifte til et andet plugin.<\/p>\n For eksempel er nogle plugins til cookietilladelse bedre end andre, n\u00e5r det g\u00e6lder layoutforskydninger, s\u00e5 det er v\u00e6rd at eksperimentere med forskellige plugins, hvis du har problemer.<\/p>\n Hvis du vil grave endnu dybere ned i plugin-adf\u00e6rd, kan du bruge et v\u00e6rkt\u00f8j til overv\u00e5gning af applikationspr\u00e6stationer<\/a>. Hvis du er hosted hos Kinsta, er Kinstas APM-v\u00e6rkt\u00f8j<\/a> gratis tilg\u00e6ngeligt i dit MyKinsta-dashboard<\/a>, eller du kan finde andre APM-v\u00e6rkt\u00f8jer<\/a>.<\/p>\n For at hj\u00e6lpe dig med at teste plugins kan du ogs\u00e5 bruge Kinstas staging sites<\/a> eller DevKinsta-v\u00e6rkt\u00f8jet til lokal udvikling<\/a>.<\/p>\n Hvis du bruger animationer p\u00e5 dit websted, kan disse v\u00e6re en anden almindelig synder for layoutforskydninger.<\/p>\n For at undg\u00e5 problemer med animationer, der for\u00e5rsager layoutforskydninger, b\u00f8r du bruge CSS Transform-funktionen<\/a> til animationer i stedet for andre taktikker:<\/p>\n Dette er mere et teknisk tip, s\u00e5 det er usandsynligt, at du har brug for at g\u00f8re dette, medmindre du tilf\u00f8jer din egen CSS. Hvis du vil vide mere, kan du l\u00e6se Googles side om CLS og animationer\/transitions<\/a>.<\/p>\n\n Hvis dit websted har en h\u00f8j score for Cumulative Layout Shift, er det vigtigt at rette op p\u00e5 det, b\u00e5de for at skabe en bedre oplevelse for dine menneskelige bes\u00f8gende og for at maksimere webstedets ydeevne i Googles s\u00f8geresultater.<\/p>\n To af de mest almindelige problemer er manglende dimensioner for billeder\/embeds og problemer med indl\u00e6sning af skrifttyper. Hvis du retter disse, b\u00f8r du v\u00e6re p\u00e5 vej til en meget bedre score.<\/p>\n Andre websteder skal m\u00e5ske g\u00e5 l\u00e6ngere og grave i indl\u00e6sning af annoncer, dynamisk indhold og animationer. Hvis du har sv\u00e6rt ved at implementere disse typer optimeringer selv, kan du overveje at samarbejde med et WordPress-bureau<\/a> eller en freelancer.<\/p>\n Hvis du vil vide mere om Core Web Vitals generelt, kan du l\u00e6se hele Kinsta-guiden til Core Web Vitals<\/a>.<\/p>\n Og hvis du vil have en WordPress-v\u00e6rt, der kan hj\u00e6lpe dig med at skabe et h\u00f8jtydende websted<\/a>, der klarer sig godt i Core Web Vitals, kan du overveje at bruge Kinstas administrerede WordPress-hosting<\/a> – vi migrerer dine WordPress-websteder gratis<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" K\u00e6mper du med problemer med Cumulative Layout Shift p\u00e5 dit websted? Eller er du ikke sikker p\u00e5, hvad Cumulative Layout Shift overhovedet betyder? Cumulative Layout Shift, …<\/p>\n","protected":false},"author":199,"featured_media":47900,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[739,733],"class_list":["post-47899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-brugererfaring","topic-seo-strategi"],"yoast_head":"\n![\"Et](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Hvorfor er Cumulative Layout Shift d\u00e5rligt?<\/h2>\n
Hvad er \u00e5rsagen til Cumulative Layout Shift?<\/h2>\n
\n
S\u00e5dan m\u00e5ler du Cumulative Layout Shift: Bedste testv\u00e6rkt\u00f8jer<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Cumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Chrome-udviklerv\u00e6rkt\u00f8jer<\/h3>\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"Rapporten](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Layout Shift GIF-generator<\/h3>\n
![\"V\u00e6rkt\u00f8jet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Hvad er en god Cumulative Layout Shift?<\/h2>\n
![\"Googles](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
S\u00e5dan retter du Cumulative Layout Shift i WordPress (eller andre platforme)<\/h2>\n
Angiv altid dimensioner for billeder<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nAngiv altid dimensioner for videoer, iframes og andre indlejringer<\/h3>\n
![\"Et](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Fasts\u00e6t og optimering af indl\u00e6sning af skrifttyper<\/h3>\n
\n
Host skrifttyper lokalt og indl\u00e6s skrifttyper p\u00e5 forh\u00e5nd<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nIndstil Font-Display til Optional eller Swap<\/h4>\n
\n
\n
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
For kompleks? Overvej en System Font Stack!<\/h4>\n
Reserver plads til annoncer (hvis du bruger Display Ads)<\/h3>\n
![\"Mediavine-optimering](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Et](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Indpakning](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Dit](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
V\u00e6r smart, n\u00e5r du dynamisk injicerer indhold med plugins<\/h3>\n
Brug CSS Transform-egenskaben til animationer, n\u00e5r det er muligt<\/h3>\n
\n
Opsummering<\/h2>\n