CLS nima va u arizalarga qanday ta’sir qiladi
CLS (Cumulative Layout Shift) — Core Web Vitals tarkibidagi ko‘rsatkich bo‘lib, sahifaning vizual barqarorligini baholaydi. U foydalanuvchi hech narsa qilmagan paytda elementlar joyidan siljiganini qayd etadi: tepadagi rasm yuklangach matn pastga tushadi, banner chiqqach forma suriladi.
Biznes uchun bu aniq yo‘qotish. Instagram yoki Meta reklamasidan kelgan mijoz ko‘pincha telefonda va beqaror mobil internetda bo‘ladi. Tugma bosilayotgan paytda blok sakrasa, odam boshqa joyni bosadi, raqamni noto‘g‘ri maydonga kiritadi yoki sahifani yopib qo‘yadi. Reklama uchun pul to‘langan, ariza esa yo‘qolgan. Bundan tashqari, Core Web Vitals sahifa tajribasi signallariga kiradi, shuning uchun barqarorlik SEO uchun ham ahamiyatli.
CLS sahifa siljishi qanday hisoblanadi
Har bir siljish ikki jihatdan baholanadi: ekranning qancha qismi siljidi va qanchaga uzoqlikka. Siljishlar oynalarga guruhlanadi, yakuniy natijaga tashrif davomidagi eng yomon oyna olinadi. Qiymat o‘lchov birligisiz beriladi.
Yaxshi natija — 0,1 va undan past, yomon natija — 0,25 dan yuqori, oradagi qiymatlar «yaxshilash kerak» deb hisoblanadi. Foydalanuvchi harakatidan darhol keyingi o‘zgarishlar, masalan, akkordeonning bosilganda ochilishi, hisobga olinmaydi: odam buni kutadi. Faqat kutilmagan sakrashlar sanaladi.
Baho haqiqiy foydalanuvchilar ma’lumotiga asoslanadi, shuning uchun natijalarni Search Console va PageSpeed Insights’da ko‘rish mumkin.
Asosiy olti sabab va ularning yechimi
Ko‘p hollarda muammo shu oltitadan biri bo‘ladi. Avval aniq sababni toping, keyin nuqtaviy tuzating.
- O‘lchamsiz rasmlar. Brauzer qancha joy ajratishni bilmaydi va rasm yuklangach matnni pastga suradi. Har bir img uchun width va height yozing yoki CSS’da aspect-ratio bering, moslashuvchanlik saqlanadi.
- Embedlar. Video, xarita, sharhlar vidjeti, tashqi forma asosiy kontentdan keyin yuklanadi. Konteynerlarga oldindan qat’iy balandlik yoki nisbat bering.
- Banner va bildirishnomalar. «Yetkazib berish chegirmasi» tasmasi yoki cookie oynasi kontentni itarib tushirsa, CLS oshadi. Ularni kontent ustida ko‘rsating yoki joyini oldindan ajrating.
- Veb-shriftlar. Zaxira shrift asosiy shriftga almashganda qatorlar uzunligi o‘zgaradi. Asosiy shriftni oldindan yuklang, zaxirasini o‘lchami yaqin qilib tanlang.
- Skript qo‘shadigan bloklar. «O‘xshash mahsulotlar», tavsiyalar, reklama bloklari sahifa o‘rtasiga keyin qo‘shilib, pastdagilarni suradi. Joyini zaxiralang yoki birinchi ekrandan pastga joylang.
- Animatsiyalar. Balandlik, kenglik yoki chetlanishni o‘zgartiradigan animatsiya qo‘shni elementlarni suradi. Harakat uchun transform ishlating.
Manbani topish: bosqichma-bosqich
«Sayt sakraydi» degan umumiy gap dasturchiga yordam bermaydi. Aniq ma’lumotni bir soatda yig‘ish mumkin.
- PageSpeed Insights’da kerakli manzilni oching va diagnostikadagi siljigan elementlar ro‘yxatini ko‘ring.
- Mobil versiyani alohida tekshiring: tor ekranda siljishlar yaqqolroq, mobil tashrifchilar esa ko‘pchilik saytlarda ko‘proq.
- Chrome DevTools’da Performance yozuvini yoqib, yuklanishni yozing va shkaladagi siljish belgilarini toping.
- Tarmoqni sekinlashtirib, nima boshqalardan kechroq paydo bo‘lishini kuzating, odatda aybdor shu.
- Telefon ekranidan qisqa video yozing: sakrash lahzasi har qanday tavsifdan aniqroq.
- Natijani yozib qo‘ying: sahifa, qurilma, element, sabab. Shunda tuzatish tezroq bo‘ladi.
Laboratoriyada yaxshi, Search Console’da yomon: nega
Tez-tez uchraydigan holat: test yashil natija beradi, Search Console esa sahifalar guruhini muammoli deb belgilaydi. Laboratoriya asosan yuklanishni ko‘radi, dala ma’lumotlari esa butun tashrifni qamrab oladi.
Siljishlar sahifani aylantirganda, cookie’ga rozilikdan keyin, mahsulotlar ro‘yxati qo‘shilganda yoki internet sekin bo‘lganda paydo bo‘ladi. Shuning uchun sahifani odamdek tekshiring: oxirigacha aylantiring, cookie’ni qabul qiling, filtrlarni oching, ro‘yxat to‘liq yuklanishini kuting. Viloyatlarda internet sustroq bo‘lgani uchun tashrifchilar ko‘rgan holat Toshkentdagi ofis tarmog‘idagidan farq qilishi mumkin.
Tuzatishdagi odatiy xatolar
Birinchi xato — faqat bosh sahifani tuzatish. Siljishlar shablonlarda yashaydi: mahsulot kartochkasi, blog maqolasi, xizmat sahifasi. Shablonni tuzatish yuzlab manzilni birdan tuzatadi.
Ikkinchisi — faqat kompyuterda tekshirish. Uchinchisi — kodda rasmlarga o‘lcham berib, kontent menejer muharrir orqali qo‘shgan rasmlarni unutish: ular yana o‘lchamsiz keladi. To‘rtinchisi — test paytida bannerni o‘chirib, keyin qaytarish. Beshinchisi — darhol natija kutish: Search Console’da ma’lumotlar haqiqiy tashrif bo‘yicha yig‘iladi, shuning uchun o‘zgarish kechikib ko‘rinadi.
Misol: onlayn do‘kon va xizmat sahifasi
Toshkentda elektronika do‘koni sayt va Telegram orqali sotadi, deylik. Mahsulot kartochkasida tepada nisbati belgilanmagan rasm, uning ostida narx va «Bir bosishda sotib olish» tugmasi, yanada pastda esa skript «Sizga yoqishi mumkin» blokini qo‘shadi. Rasm yuklanguncha tugma bir joyda turadi, keyin siljiydi. Xaridor bosadi, bo‘sh joyga yoki qo‘shni elementga tushadi va Uzum yoki OLX’dagi raqobatchiga ketadi.
Yechim sodda: galereyaga nisbat berish, tavsiyalar blokiga minimal balandlik belgilash va uni asosiy kontent ostiga tushirish. Klinika yoki studiyaning xizmat sahifasida ham shunday: forma tepasida aksiya tasmasi paydo bo‘lsa, odam telefon raqamini boshqa maydonga kiritib qo‘yadi.
Nazorat ro‘yxati va keyingi qadam
Dizayndagi har bir o‘zgarishdan oldin ro‘yxatni ko‘rib chiqing va asosiy sahifa turlarini telefonda tekshiring. Search Console hisobotini muntazam kuzating: CLS ko‘pincha yangi blok yoki vidjet qo‘shilgandan keyin paydo bo‘ladi.
Buni o‘zingiz qilishni xohlamasangiz, markdev jamoasi sayt uchun SEO optimizatsiya doirasida shunday tekshiruvlarni o‘tkazadi: sahifani siljitayotgan elementlarni topamiz va dasturchi uchun tushunarli vazifa tayyorlaymiz. Saytingiz haqida yozing, qaysi joydan boshlashni birga hal qilamiz.
- Barcha rasm va videolarda o‘lcham yoki nisbat bor
- Iframe, xarita va vidjetlar uchun joy ajratilgan
- Banner va bildirishnomalar kontentni surmaydi
- Asosiy shrift oldindan yuklanadi, zaxirasi tanlangan
- Dinamik bloklar ko‘rinib turgan kontent tepasiga qo‘shilmaydi
- Animatsiyalar transform orqali qilingan
- Har o‘zgarishdan keyin mobil versiya tekshiriladi
Ko‘p beriladigan savollar
CLS qanday qiymat yaxshi hisoblanadi?
0,1 va undan past. 0,25 dan yuqori yomon, oradagisi yaxshilashni talab qiladi. Baho haqiqiy foydalanuvchilar ma’lumotiga asoslanadi.
CLS Google’dagi o‘rinlarga ta’sir qiladimi?
Core Web Vitals sahifa tajribasi signallariga kiradi, ammo kontentning dolzarbligi muhimroq. Biroq barqaror maket mijoz tugmani bosishi va formani to‘ldirishiga bevosita ta’sir qiladi.
Tugma yoki akkordeon bosilgandan keyingi siljish hisoblanadimi?
Yo‘q. Foydalanuvchi harakatidan darhol keyingi o‘zgarishlar hisobga olinmaydi, chunki odam buni kutadi. Muammo kutilmagan sakrashlarda.
PageSpeed yaxshi, Search Console yomon ko‘rsatsa nima qilish kerak?
Laboratoriya yuklanishni ko‘radi, dala ma’lumotlari esa butun tashrifni. Sahifani aylantirib, cookie’ni qabul qilib, ro‘yxatlarni yuklab qo‘lda tekshiring.
Kichik biznes saytlarida CLS ko‘pincha nimadan chiqadi?
O‘lchamsiz rasmlar, aksiya va cookie bannerlari, kechikib yuklanadigan vidjetlar va shriftlardan. Mahsulot kartochkasi va xizmat sahifasi shablonidan boshlang.
Dasturchiga vazifani qanday berish kerak?
Sahifa, qurilma, siljiyotgan element va sababni yozing, diagnostikadagi elementlar ro‘yxati va telefondan olingan videoni biriktiring. Tuzatgandan keyin shu holatda qayta tekshirish oson bo‘ladi.
Vazifangizni bepul tahlil qilamiz
Kontaktingizni qoldiring — 15 daqiqalik qo‘ng‘iroqda arizalar qayerda yo‘qolayotganini va birinchi navbatda nima qilish kerakligini ko‘rsatamiz.