Kumulatīvā izkārtojuma nobīde (CLS)

Kas ir kumulatīvā izkārtojuma nobīde (CLS)?

Kumulatīvā izkārtojuma nobīde (CLS) ir Google izstrādāta Core Web Vitals metrika, lai novērtētu tīmekļa vietnes vizuālo stabilitāti. Tā nosaka visu negaidīto izkārtojuma izmaiņu kopsummu, kas notiek visā lapas darbības laikā. Izkārtojuma nobīdes notiek, kad redzams elements maina savu pozīciju no viena atveidotā kadra uz nākamo.

Kā tiek mērīta CLS

CLS rādītāji svārstās no 0, kas nozīmē, ka nav nobīdes, līdz vērtībām virs 0, kas norāda uz dažāda līmeņa nestabilitāti. Formulā tiek ņemta vērā katras nobīdes trieciena daļa un attāluma daļa, aprēķinot, cik ļoti elementi pārvietojas un cik lielu skatu laukuma daļu tie aizņem.

CLS rezultātu interpretācija

• Labi: 0 - 0,1
• Nepieciešami uzlabojumi: 0.1 - 0.25
• Slikti: virs 0,25

Kāpēc CLS ir svarīgs?

CLS ir ļoti svarīgs lietotāja pieredzei, jo negaidītas izkārtojuma izmaiņas var izraisīt lietotāja neapmierinātību. Piemēram, ja lietotājs gatavojas noklikšķināt uz pogas, bet izkārtojums mainās un lietotājs netīšām noklikšķina uz kādas citas pogas, tas var izraisīt sliktu lietotāja pieredzi un potenciālu konversiju zudumu.

Biežākie iemesli sliktam CLS

1. Attēli bez izmēriem:

   • Attēlu iekļaušana HTML, nenorādot to platumu un augstumu, var izraisīt izkārtojuma izmaiņas, jo pārlūkprogramma nezina, cik daudz vietas sākotnēji atvēlēt.

2. Reklāmas, ieliktņi un Iframe bez izmēriem:

   • Šie elementi var dinamiski ielādēties un izraisīt izkārtojuma izmaiņas, ja to izmēri nav norādīti iepriekš.

3. Dinamiski ievadīts saturs:

   • Pievienojot saturu virs esošā DOM satura, elementi var tikt nobīdīti uz leju, tādējādi radot nobīdes.

4. Tīmekļa fonti, kas izraisa FOIT/FOUT:

   • Flash of Invisible Text (FOIT) un Flash of Unstyled Text (FOUT) var izraisīt izkārtojuma izmaiņas, kad pārlūkprogramma ielādē tīmekļa fontus.

Labākā prakse CLS samazināšanai

1. Ietveriet attēlu un videoklipu lieluma atribūtus:

   • HTML failā vienmēr norādiet attēlu un videoklipu platumu un augstumu, lai rezervētu vietu izkārtojumā pirms to ielādes.

2. Rezervējiet vietu reklāmām un ieliktņiem:

   • Izmantojiet CSS, lai iestatītu reklāmas slotu, iframe un embed izmērus un izvairītos no izkārtojuma maiņām, kad tie tiek ielādēti.

3. Izvairieties no dinamiskas satura ievadīšanas virs esošā satura:

   • Pievienojiet jaunu saturu zem locījuma vai konteineros, kuros jau ir rezervēta vieta.

4. Izmantojiet fontu ielādes stratēģijas:

   • Izmantojiet font-display CSS īpašību, lai kontrolētu, kā tiek rādīti tīmekļa fonti, un samazinātu nobīdes, ko izraisa FOIT/FOUT.

5. Izmantojiet CSS transformāciju animācijām:

   • Lai animētu elementus, neizraisot izkārtojuma nobīdes, izmantojiet īpašību transformēt, nevis augšējo, apakšējo, kreiso vai labo daļu.

Secinājums

Kumulatīvais izkārtojuma nobīde (CLS) ir svarīgs rādītājs, lai nodrošinātu stabilu un vizuāli pievilcīgu lietotāja pieredzi. Izprotot faktorus, kas veicina izkārtojuma nobīdes, un ieviešot paraugpraksi, lai tās samazinātu, varat uzlabot savas tīmekļa vietnes CLS rādītāju un uzlabot vispārējo lietotāju apmierinātību.

Lai iegūtu vairāk informācijas par CLS un citu Core Web Vitals uzlabošanu, izpētiet Google Web Vitals dokumentāciju.