Kumulatiivne paigutusnihe (CLS)

Mis on kumulatiivne paigutusnihe (CLS)?

Cumulative Layout Shift (CLS) on Google'i poolt välja töötatud Core Web Vitals mõõdik, mis mõõdab veebilehe visuaalset stabiilsust. See mõõdab kõigi ootamatute paigutusnihkete muutuste kogusummat, mis toimuvad kogu lehe eluea jooksul. Ülesehituse nihked toimuvad siis, kui nähtav element muudab oma positsiooni ühest renderdatud kaadrist teise.

Kuidas CLSi mõõdetakse

CLS-parameetrid ulatuvad 0-st, mis tähendab, et nihkumist ei toimu, kuni väärtusteni üle 0, mis viitavad erineva astme ebastabiilsusele. Valem võtab arvesse iga nihke mõjuosa ja kauguseosa, arvutades, kui palju elemendid liiguvad ja kui suure osa vaateaknast nad katavad.

CLS-punktide tõlgendamine

• Hea: 0 - 0.1
• Vajab parandamist: 0.1 - 0.25
• Kehv: üle 0,25

Miks on CLS oluline?

CLS on kasutajakogemuse seisukohalt kriitilise tähtsusega, kuna ootamatud paigutuse muutused võivad põhjustada kasutaja pettumust. Näiteks kui kasutaja on klõpsamas nupule ja paigutus muutub, mistõttu ta klõpsab tahtmatult midagi muud, võib see põhjustada kehva kasutajakogemuse ja potentsiaalset konversioonide kaotust.

Puuduliku CLS-i sagedased põhjused

1. Pildid ilma mõõtmeteta:

   • Piltide lisamine HTML-i ilma nende laiust ja kõrgust määramata võib põhjustada paigutuse nihkeid, kuna brauser ei tea, kui palju ruumi algselt eraldada.

2. Reklaamid, Embedid ja Iframe'id ilma mõõtmeteta:

   • Need elemendid võivad laaduda dünaamiliselt ja põhjustada paigutuse nihkeid, kui nende mõõtmeid ei ole eelnevalt kindlaks määratud.

3. Dünaamiliselt sisestatud sisu:

   • Sisu lisamine olemasoleva sisu kohal DOMis võib lükata elemente alla, põhjustades nihkeid.

4. FOIT/FOUT'i põhjustavad veebifontid:

   • Flash of Invisible Text (FOIT) ja Flash of Unstyled Text (FOUT) võivad põhjustada paigutuse muutusi, kui veebilehitseja laadib veebifonte.

Parimad praktikad CLS-i minimeerimiseks

1. Piltide ja videote suuruse atribuutide lisamine:

   • Määrake alati piltide ja videote laius ja kõrgus HTML-is, et enne nende laadimist oleks paigutusele ruumi reserveeritud.

2. Reklaamide ja embedite jaoks ruumi reserveerimine:

   • Kasutage CSS-i, et määrata reklaamišahtide, iframe'ide ja embed'ide mõõtmed, et vältida paigutuse nihkumist nende laadimisel.

3. Vältige sisu dünaamilist sisestamist olemasoleva sisu kohale:

   • Lisage uus sisu alla voldi või konteinerite sisse, millel on juba reserveeritud koht.

4. Kasutage fontide laadimisstrateegiaid:

   • Kasutage font-display CSS-omadust, et kontrollida veebifontide kuvamist ja minimeerida FOIT/FOUT-ist tingitud nihkeid.

5. Kasutage CSS Transform animatsioonide jaoks:

   • Kasutage ülemise, alumise, vasakpoolse või parempoolse elemendi asemel omadust transform, et animeerida elemente ilma paigutuse nihkumisteta.

Kokkuvõte

Kumulatiivne paigutusnihe (CLS) on oluline mõõdik stabiilse ja visuaalselt atraktiivse kasutajakogemuse tagamisel. Mõistes tegureid, mis aitavad kaasa paigutuse nihkumistele, ja rakendades parimaid tavasid nende minimeerimiseks, saate parandada oma veebilehe CLS-skoori ja suurendada üldist kasutajate rahulolu.

Lisateavet CLS-i ja teiste Core Web Vitals'i parandamise kohta leiate Google'i Web Vitals'i dokumentatsioonist.