Den kumulative layoutændring er en Core Web Vital- indikator, der evaluerer, i hvilken grad en side bevarer sin visuelle konsistens. Antallet af uventede layoutændringer uden at brugeren interagerer med webstedet bestemmer niveauet af visuel stabilitet. Hver gang sidens indhold ændres, anses layoutet for at være ændret, selvom det ikke er fordi du har klikket på et link eller noget lignende.
Den samlede score for det kumulative layoutskift bestemmes ved at lægge alle disse skift sammen.
Hvad er kumulativ layoutforskydning?
Forsinkelse i indlæsningen af fotos er den mest udbredte form for CLS- brugere rapporterer. Det er almindelig praksis, at teksten indlæses før medieelementerne. Derudover ændres websidens struktur, efter at alle grafiske komponenter er blevet fuldstændigt indlæst. Disse hændelser finder sted uanset om du scroller eller ej.
Det kan være svært at se, hvornår en hjemmeside har en høj CLS-score, når den er færdig med at indlæse. Hjemmesidens kompleksitet og mængden af medieindhold øger brugernes risiko for at støde på ændringer i layoutet.
Reducer kumulativ layoutforskydning i WordPress?
Brug af Google Web Vitals CLS-debuggeren er den mest effektive metode til at bestemme, hvilke komponenter der er ansvarlige for dit websteds høje CLS-score. Den præsenterer dig for en GIF, der illustrerer alle de roterende elementer på dit websted. De fleste høje CLS-scorer kan tilskrives annoncer og medieaktiver. Du skal optimere hver komponent for at hæve din CLS-score.
Til dette formål er følgende nogle metoder, der kan bruges til at forbedre CLS-scoren på dit websted:
1. Tilføj dimensionsattributter til alle mediefiler
Da din webbrowser skal vurdere størrelsen på dit billede og layoutretningen, efter det er indlæst, kan risikoen for et layoutskift stige, hvis du uploader medieaktiver med ukendte attributter. Store fotos og filer af høj kvalitet har en større chance for at opleve et af disse scenarier end mindre. Tilpas størrelsen på billeder i WordPress Media Editor.
2. Sørg for, at skrifttyper indlæses lokalt
Under indlæsning af skrifttypen skal teksten forblive synlig. Derfor er det første, der skal gøres for at nå dette mål, at sikre, at skrifttyper indlæses lokalt i stedet for at blive hentet fra websteder, der er tredjepartshostede.
3. Undgå FOIT og FOUT
"flash of invisible text" (FOIT) opstår, når der ikke er angivet en alternativ skrifttype. Som følge heraf vil brugerne se et tomt område, hvor teksten normalt ville være, mens deres webbrowser forsøger at indlæse skrifttypen eller finde en alternativ skrifttype.
I en periode kendt som et flash of unstyled text (FOUT), vil din webbrowser bruge sin standard fallback-skrifttype, indtil den kan indlæse den skrifttype, du har valgt. For at afhjælpe dette kan du tilføje attributten font-display: switch.
Du kan læse flere artikler som denne på Seahawk Media Blog.
