CLS: sahifa yuklanayotganda nega «sakraydi» va buni qanday tuzatish

Cumulative Layout Shift — Core Web Vitals’dagi barqarorlik ko‘rsatkichi. U sahifadagi elementlar kutilmaganda qanchalik siljishini o‘lchaydi. Foydalanuvchi matnni o‘qiyotganda yoki tugmani bosmoqchi bo‘lganda kontent birdan pastga tushsa — bu siljish. Google yaxshi qiymat sifatida 0,1 va undan kamini belgilagan.

Nima uchun muhim

• Foydalanuvchi noto‘g‘ri tugmani bosadi — masalan, «Bekor qilish» o‘rniga «Tasdiqlash»
• O‘qilayotgan joy yo‘qoladi
• Sayt sifatsiz va bezovta qiluvchi tuyuladi
• Core Web Vitals sahifa tajribasi signallarining bir qismi

Asosiy sabablar

O‘lchamsiz rasmlar. Brauzer rasm qancha joy egallashini bilmaydi va u yuklanganda pastdagi kontentni suradi.

Kechikib qo‘shiladigan bloklar. Reklama bannerlari, cookie oynalari, aksiya tasmalari, chat vidjetlari — kontent tepasiga keyinroq qo‘shiladi.

Veb-shriftlar. Zaxira shrift o‘rniga asosiy shrift yuklanganda matn o‘lchami o‘zgaradi va qatorlar siljiydi.

Iframe va embedlar. Video, xarita va ijtimoiy tarmoq postlari o‘lchami oldindan belgilanmagan.

Animatsiyalar. Elementlar o‘lchami yoki joylashuvi orqali harakatlantiriladi.

Qanday tuzatish

Rasmlar va videolar uchun joy ajrating. HTML’da kenglik va balandlik atributlarini ko‘rsating yoki CSS’da tomonlar nisbatini belgilang. Shunda brauzer joyni oldindan ajratadi.

Dinamik bloklar uchun joy. Banner yoki vidjet bo‘ladigan joyga oldindan minimal balandlik bering. Bildirishnomalarni kontent tepasiga emas, ekran pastiga qotirilgan holda chiqaring.

Shriftlarni boshqarish. Asosiy shriftlarni oldindan yuklang va zaxira shriftni o‘lchami bo‘yicha asosiyga yaqinroq tanlang.

Animatsiyalarni to‘g‘ri qilish. Harakat uchun transform xossasidan foydalaning — u boshqa elementlarni surmaydi.

Embedlar. Video va xarita konteyneriga qat’iy nisbat bering.

Foydalanuvchi harakati bilan siljish

Agar element foydalanuvchi bosgandan keyin darhol o‘zgarsa — masalan, akkordeon ochiladi — bu CLS’ga hisoblanmaydi. Muammo — kutilmagan siljishlar.

Qayerda tekshirish

• PageSpeed Insights — haqiqiy foydalanuvchilar ma’lumotlari va laboratoriya testi
• Search Console — Core Web Vitals hisobotida muammoli sahifa guruhlari
• Lighthouse — siljishga sabab bo‘lgan elementlar ro‘yxati
• Brauzer dasturchi vositalari — Performance yozuvida siljishlar belgilanadi

Qayerda ko‘p uchraydi

• Bosh sahifadagi slayder rasmlari
• Maqolalar ichidagi rasmlar, ayniqsa kontent menejeri qo‘shgan
• Mahsulot kartochkalari ro‘yxati
• Sarlavha ustidagi aksiya tasmasi
• Mobil versiyadagi cookie oynasi

Muntazam nazorat

CLS ko‘pincha yangi blok yoki vidjet qo‘shilgandan keyin paydo bo‘ladi. Har bir dizayn o‘zgarishidan keyin asosiy sahifa turlarini telefonda tekshiring va Search Console hisobotini oyiga bir marta ko‘rib chiqing.

Dasturchiga vazifa qanday beriladi

Umumiy «CLS’ni tuzating» emas, aniq misol bilan: qaysi sahifa, qaysi qurilma, qaysi element siljiydi va nima sababdan. Lighthouse hisobotidagi siljigan elementlar ro‘yxatini va telefon ekranidan qisqa video yozuvini biriktiring. Shunda muammo tezroq topiladi va tuzatilgandan keyin xuddi shu holatda qayta tekshirish oson bo‘ladi.