Kaip sumažinti CLS (Cumulative Layout Shift)
Cumulative Layout Shift matuoja, kiek jūsų puslapis netikėtai juda kraunantis. Tai rodiklis, kurį vartotojai jaučia labiausiai — mygtukas, pašokantis kaip tik jį paliečiant, ar pastraipa, nušokanti žemyn, kai pagaliau atsiranda paveikslėlis. Gera žinia: beveik kiekvieną išdėstymo šuolio priežastį galima išvengti.
Trumpai
Geras CLS rezultatas yra 0,1 ar mažiau. Sprendimai paprasti: visada nurodykite paveikslėlių ir vaizdo įrašų matmenis, rezervuokite vietą reklamoms bei įterpiniams prieš jiems įsikeliant, įkelkite šriftus be matomo perbraižymo ir niekada neįterpkite turinio virš to, ką vartotojas jau skaito. Kaip CLS dera į platesnį vaizdą, žiūrėkite Core Web Vitals paaiškinime.
Kodėl atsiranda išdėstymo šuoliai
Kai naršyklė pirmą kartą išdėsto puslapį, ji dar nežino dydžio išteklių, kurie neįsikėlė. Jei paveikslėlis atvyksta be rezervuotos vietos, viskas žemiau jo pastumiama, kad atsirastų vieta. CLS sudeda kiekvieną tokį netikėtą judesį. Tikslas — užtikrinti, kad naršyklė žinotų, kiek vietos reikia kiekvienam elementui, prieš jam įsikeliant.
Konkretūs sprendimai
1. Visada nurodykite paveikslėlių ir vaizdo įrašų matmenis
Kiekvienam <img> ir <video> nurodykite aiškius width ir height atributus. Modernios naršyklės jais naudojasi, kad rezervuotų tinkamą vietą ir išvengtų šuolio, net kol failas dar siunčiamas.
<img src="/img/photo.avif" width="800" height="450" alt="...">Esant šiems atributams, CSS taisyklė, pvz., height: auto, išlaiko paveikslėlį adaptyvų, kartu išsaugodama rezervuotą proporciją. Mūsų paveikslėlių optimizavimo vadovas matmenis aprašo išsamiau.
2. Rezervuokite vietą reklamoms, įterpiniams ir iframe
Reklamų vietos, socialinių tinklų įterpiniai ir iframe yra didžiausi CLS kaltininkai, nes įsikelia vėlai ir nenuspėjamo dydžio. Kiekvieną iš jų apgaubkite konteineriu su fiksuotu minimaliu aukščiu, atitinkančiu dažniausią dydį, kad aplinkinis turinys niekada nešoktų atsiradus įterpiniui.
.ad-slot { min-height: 280px; }3. Įkelkite šriftus be perbraižymo
Kai įsikelia individualus žiniatinklio šriftas, tekstas gali persibraižyti, jei atsarginio šrifto matmenys skiriasi. Naudokite font-display: swap, kad tekstas būtų iškart matomas, ir iš anksto įkelkite (preload) svarbiausius šriftus, kad sutrumpintumėte perjungimą. Pasirinkus panašaus dydžio atsarginį šriftą, sumažinamas bet koks šuolis, kai perimama tikrasis šriftas.
@font-face { font-family: "Inter"; font-display: swap; src: url(/fonts/inter.woff2); }4. Niekada neįterpkite turinio virš esamo
Įterpus juostą, slapukų pranešimą ar „jums taip pat gali patikti“ bloką puslapio viršuje po įkėlimo, viskas nustumiama žemyn — garantuotas šuolis. Jei būtina pridėti dinaminį turinį, rezervuokite jam vietą iš anksto arba įterpkite jį žemiau matomos srities, kur jis nenustums to, ką vartotojas skaito.
Dažniausios priežastys ir sprendimai
| Priežastis | Sprendimas |
|---|---|
| Paveikslėliai be matmenų | Pridėkite width ir height atributus |
| Vėlai kraunamos reklamos ir įterpiniai | Rezervuokite vietą su min-height |
| Šrifto perbraižymas | font-display: swap + preload |
| Įterptos juostos ir pranešimai | Rezervuokite vietą arba įterpkite žemiau matomos srities |
| Dinamiškai keičiami elementai | Naudokite transform, ne išdėstymo savybes |
transform savybe, o ne keisdami top, width ar margin. Transformacijos perkelia pikselius nesukeldamos išdėstymo perskaičiavimo, todėl niekada neprisideda prie CLS. Atlikite patikrą, kad pastebėtumėte judančius elementus.Dažniausiai užduodami klausimai
Koks yra geras CLS rezultatas?
0,1 ar mažiau yra „geras“. Nuo 0,1 iki 0,25 reikia gerinti, o virš 0,25 yra prastas. CLS yra bevienis rezultatas, ne laiko matas.
Ar animacijos skaičiuojamos kaip išdėstymo šuolis?
Tik jei jos judina aplinkinį turinį. Šuoliai, sukelti vartotojo veiksmo per 500 ms, neįskaitomi, o animacijos, naudojančios CSS transformacijas, neskaičiuojamos, nes nekeičia išdėstymo.
Kodėl mano CLS atrodo gerai lokaliai, bet kliūva realiomis sąlygomis?
Realūs vartotojai patenka į lėtesnius tinklus, kur paveikslėliai ir reklamos įsikelia vėliau, sustiprindami šuolius. Visada patvirtinkite realaus lauko duomenimis, o ne vienu greitu lokaliu testu.
Susiję vadovai
Kas yra TTFB (laikas iki pirmojo baito)?
Ką matuoja „laikas iki pirmojo baito“, kas laikoma geru rezultatu ir dažniausios lėto TTFB priežastys.
Skaityti →Našumas ir Core Web Vitals„Core Web Vitals“ paaiškinimas ne programuotojams
LCP, INP ir CLS paprastai — ką matuoja „Google“, kokios ribos ir kaip tai veikia reitingus.
Skaityti →Našumas ir Core Web VitalsKaip pagerinti LCP (Largest Contentful Paint)
Praktiniai, pagal svarbą sudėlioti žingsniai, kaip LCP sumažinti iki mažiau nei 2,5 sekundės.
Skaityti →Patikrinkite savo svetainę pagal šį vadovą
Atlikite nemokamą ScanOpsPro patikrą ir pažiūrėkite, kaip jūsų svetainė tvarkosi su pagrindais.
Atlikti nemokamą patikrą