Kumulativni premik postavitve (CLS)

Kaj je kumulativni premik postavitve (CLS)?

Kumulativni premik postavitve (CLS) je metrika Core Web Vitals, ki jo je razvil Google za merjenje vizualne stabilnosti spletne strani. Meri seštevek vseh nepričakovanih premikov postavitve, do katerih pride v celotnem življenjskem obdobju strani. Do premikov postavitve pride, ko vidni element spremeni svoj položaj od enega do drugega izrisanega okvirja.

Kako se meri sistem CLS

Ocene CLS se gibljejo od 0, kar pomeni, da ni premikov, do vrednosti nad 0, ki kažejo na različne stopnje nestabilnosti. V formuli sta upoštevana delež udarca in delež razdalje vsakega premika, pri čemer se izračuna, za koliko se elementi premaknejo in koliko vidnega polja pokrivajo.

Interpretacija rezultatov CLS

• Dobro: 0 - 0,1
• Potrebne so izboljšave: 0.1 - 0.25
• Slabo: nad 0,25

Zakaj je sistem CLS pomemben?

CLS je ključnega pomena za uporabniško izkušnjo, saj lahko nepričakovani premiki postavitve povzročijo frustracije uporabnikov. Če na primer uporabnik namerava klikniti gumb in se postavitev spremeni, zaradi česar nenamerno klikne nekaj drugega, lahko to povzroči slabo uporabniško izkušnjo in morebitno izgubo konverzij.

Pogosti vzroki za slabo CLS

1. Slike brez dimenzij:

   • Vključitev slik v HTML brez navedbe njihove širine in višine lahko povzroči spremembe postavitve, saj brskalnik ne ve, koliko prostora naj na začetku dodeli.

2. Oglasi, vstavki in okvirji brez dimenzij:

   • Ti elementi se lahko dinamično nalagajo in povzročajo premike v postavitvi, če njihove dimenzije niso vnaprej določene.

3. Dinamično vnesena vsebina:

   • Dodajanje vsebine nad obstoječo vsebino v DOM lahko potisne elemente navzdol in povzroči premike.

4. Spletne pisave, ki povzročajo FOIT/FOUT:

   • Flash of Invisible Text (FOIT) in Flash of Unstyled Text (FOUT) lahko pri nalaganju spletnih pisav v brskalniku povzročita spremembe postavitve.

Najboljše prakse za zmanjševanje CLS

1. Vključite atribute velikosti v slike in videoposnetke:

   • Širino in višino slik in videoposnetkov vedno določite v jeziku HTML, da v postavitvi rezervirate prostor, preden se naložijo.

2. Rezervirajte prostor za oglase in vstavke:

   • S CSS določite dimenzije za oglasne reže, iframe in vstavke, da se izognete premikom postavitve pri nalaganju.

3. Izogibajte se dinamičnemu vnašanju vsebine nad obstoječo vsebino:

   • Dodajte novo vsebino pod pregibom ali v vsebinah, ki že imajo rezerviran prostor.

4. Uporabite strategije nalaganja pisave:

   • Uporabite lastnost font-display CSS za nadzor prikaza spletnih pisav in zmanjšanje premikov zaradi FOIT/FOUT.

5. Uporaba transformacije CSS za animacije:

   • Lastnost transformacije uporabite namesto lastnosti zgoraj, spodaj, levo ali desno, če želite animirati elemente, ne da bi povzročili premike postavitve.

Zaključek

Kumulativni premik postavitve (CLS) je pomemben kazalnik za zagotavljanje stabilne in vizualno privlačne uporabniške izkušnje. Z razumevanjem dejavnikov, ki prispevajo k premikom postavitve, in izvajanjem najboljših praks za njihovo zmanjšanje lahko izboljšate oceno CLS svoje spletne strani in povečate splošno zadovoljstvo uporabnikov.

Če želite več informacij o izboljšanju CLS in drugih osnovnih spletnih vitalizatorjev, si oglejte Googlovo dokumentacijo Web Vitals.