Den kumulativa layoutförskjutningen är en Core Web Vital som utvärderar i vilken grad en sida bibehåller sin visuella konsistens. Antalet oväntade layoutändringar utan att användaren interagerar med webbplatsen avgör nivån av visuell stabilitet. Varje gång sidans innehåll ändras anses layouten ha ändrats, även om det inte beror på att du klickade på en länk eller något liknande.
Den totala poängen för den kumulativa layoutförskjutningen bestäms genom att lägga ihop alla dessa förskjutningar.
Vad är kumulativ layoutförskjutning?
Fördröjning i laddningen av foton är den vanligaste typen av CLS- användare rapporterar. Det är vanligt att texten laddas före medieelementen. Dessutom ändras webbsidans struktur efter att alla grafiska komponenter har laddats helt. Dessa händelser inträffar oavsett om du skrollar eller inte.
Det kan vara svårt att avgöra när en webbplatssida har en hög CLS-poäng. Webbplatsens komplexitet och mängden medieinnehåll ökar användarnas risk att stöta på layoutändringar.
Minska kumulativ layoutförskjutning i WordPress?
Att använda Google Web Vitals CLS-felsökaren är den mest effektiva metoden för att avgöra vilka komponenter som är ansvariga för din webbplats höga CLS-poäng. Den presenterar en GIF som illustrerar alla roterande element på din webbplats. De flesta höga CLS-poäng kan tillskrivas annonser och medieresurser. Du måste optimera varje komponent för att höja din CLS-poäng.
För detta ändamål kan följande metoder användas för att förbättra CLS-poängen på din webbplats:
1. Lägg till dimensionsattribut till alla mediefiler
Eftersom din webbläsare behöver bedöma storleken på din bild och layoutens orientering efter att den har laddats, kan risken för en layoutförskjutning öka om du laddar upp mediefiler med okända attribut. Stora foton och filer av hög kvalitet har större chans att drabbas av ett av dessa scenarier än mindre. Ändra storlek på bilder i WordPress medieredigerare.
2. Se till att teckensnitten laddas lokalt
Under inläsningen av typsnittet bör texten förbli synlig. Därför är det första man måste göra för att uppnå detta mål att se till att typsnitten laddas lokalt snarare än att de hämtas från webbplatser som tredjepartsvärdtypsnitt.
3. Undvik FOIT och FOUT
"flash of invisible text" (FOIT) uppstår när ett reservteckensnitt inte anges. Som ett resultat ser användarna ett tomt område där texten vanligtvis skulle vara medan deras webbläsare försöker ladda teckensnittet eller hitta ett alternativt teckensnitt.
Under en period som kallas FOUT (flash of unstyled text) kommer din webbläsare att använda sitt standardalternativ tills den kan ladda det teckensnitt du valt. För att åtgärda detta kan du lägga till attributet font-display: switch.
Du kan läsa fler artiklar som denna på Seahawk Media Blog.
