CLS-metoden används för att mäta i vilken grad innehållet på webbsidan förskjuts eller rör sig under hela sidrenderingscykeln, eller, med andra ord, för att mäta hur stabil webbplatsens visuella utseende är.
Det finns förmodligen många gånger i ditt liv då du har bevittnat med egna ögon hur frustrerande det är att kunna klicka på ett objekt i en meny och av misstag klicka på en annons, vilket sedan tar dig till en tredjepartswebbplats, och hur frustrerande det är när innehållet på webbsidan ändras mitt i en interaktion. Naturligtvis är layoutförändringarna också irriterande för användarna. De kan dock också orsaka mer betydande problem för webbutgivare, inklusive höga avvisningsfrekvenser och brott mot deras annonspolicyer på grund av oavsiktliga klick på grund av layoutförändringar.
Dessutom, eftersom Google anser att CLS är en av de tre " Core Web Vitals ", kan ett lågt CLS-poäng negativt påverka den totala poängen för Core Web Vitals, vilket resulterar i att användaren får ett underkänt betyg. Som en del av de senaste ändringarna av Googles sökalgoritm rankas webbplatser som får ett godkänt betyg på Core Web Vitals-bedömningen mer gynnsamt i sökresultaten.
Det finns ett direkt samband mellan att förbättra CLS-poängen, förbättra den övergripande användarupplevelsen, potentiellt förbättra Googles ranking och öka Googles organiska trafik.
Hur mäts kumulativ layoutförskjutning?
När ett element som är synligt i visningsporten av någon anledning ändrar sin startposition, kommer den förändringen att registreras. Därför skulle det anses vara instabilt om det ändrade sin startposition. Det är viktigt att notera att det bara är möjligt att skapa en layoutförskjutning om ett synligt element flyttas till en annan plats på sidan på grund av att något händer på den sidan, och inte om ett nytt element eller ett befintligt element växer eller krymper.
En CLS-poäng består av två specifika mått utformade för att spåra layoutförskjutningar: anslagsfraktioner och avståndsfraktioner. Dessa två mått används för att bestämma CLS-poängen. Anslagsfraktionen mäter hur instabila element påverkar visningsporten mellan två bildrutor genom att kombinera det ursprungliga elementet och förskjutningen som ett förhållande som kan jämföras med visningsportens totala synliga område mellan de två bildrutorna. När det gäller ett instabilt element som rör sig horisontellt eller vertikalt representerar avståndsfraktionen det avstånd som elementet har rört sig runt visningsporten (antingen horisontellt eller vertikalt).
Hur kan du förbättra ditt CLS-poäng?
För att minska instabila element/förskjutningsbeteende, här är några rekommendationer:
- Olika webbsidor kan få olika CLS-poäng beroende på webbplatsens struktur. Till exempel kan CLS-poäng för artikelsidor vara högre än för startsidan. Därför är det första steget att mäta CLS-poängen för alla webbplatsens primära sidmallar.
- Bilder och videor bör alltid ha attributen width och height. Skapa responsiva bilder med definierade bildförhållanden.
- Alternativt kan CSS-bildförhållanderutor användas för att reservera det utrymme som behövs för elementen. Under laddningsprocessen säkerställer detta att webbläsaren allokerar lämplig mängd utrymme i dokumentet.
- Annonsvisning kan bidra avsevärt till layoutförändringar om placeringarna inte är korrekt optimerade.
- Lägg inte till dynamiskt innehåll ovanför redan laddat innehåll, förutom som svar på användarinteraktioner, i vilket fall layouten kommer att ändras.
Snabba upp WordPress prestanda med våra webbplatsoptimeringstjänster !
