LCP: sahifaning asosiy elementi tezroq chiqishi uchun nima qilish

Largest Contentful Paint — Core Web Vitals’ning bir qismi bo‘lgan ko‘rsatkich. U sahifa ochilgandan boshlab ko‘rinadigan qismdagi eng katta element — odatda katta rasm, video muqovasi yoki katta matn bloki — ekranda paydo bo‘lguncha qancha vaqt o‘tganini o‘lchaydi. Google yaxshi natija sifatida LCP’ni 2,5 soniyagacha deb belgilagan.

Qaysi element LCP

Har bir sahifada boshqacha bo‘ladi:

• Bosh sahifada — katta banner yoki birinchi ekrandagi fotosurat
• Maqolada — sarlavha yoki asosiy rasm
• Mahsulot sahifasida — mahsulot fotosurati

Qaysi element ekanini Lighthouse hisobotida yoki brauzer dasturchi vositalarining Performance bo‘limida ko‘rish mumkin. Optimallashtirishni shu elementdan boshlang.

LCP to‘rt qismdan iborat

1. Server javobi — brauzer birinchi baytni qancha vaqtda oladi
2. Resursni yuklashni boshlashdagi kechikish — brauzer rasmni qachon «ko‘radi»
3. Resursni yuklash — rasm og‘irligi va tarmoq
4. Chizish — element ekranga chiqishiga nima xalaqit beradi

Har bir qism alohida muammo va alohida yechimga ega.

Server javobi

• Sahifalarni keshlash
• Yaxshi xosting va server joylashuvi auditoriyaga yaqin
• Statik fayllar uchun CDN
• Ortiqcha qayta yo‘naltirishlarni olib tashlash

Asosiy rasmni tezlashtirish

• Rasmni zamonaviy formatda va kerakli o‘lchamda bering — telefon uchun kichikroq versiya
• Asosiy rasmga kechiktirib yuklashni qo‘llamang
• Rasmga yuqori yuklash ustuvorligini bering
• Rasm CSS foni sifatida emas, oddiy img elementi sifatida bo‘lsin — brauzer uni tezroq topadi
• Rasm skript orqali qo‘shilmasin

Shriftlar va stillar

Agar LCP elementi matn bo‘lsa, shriftlar muhim:

• Shriftlarni oldindan yuklang
• Shrift yuklanguncha zaxira shrift bilan matnni ko‘rsating
• Ko‘rinadigan qism uchun zarur stillarni birinchi navbatda yuklang

Skriptlar

Sahifani bloklovchi skriptlar chizishni kechiktiradi. Chat vidjetlari, analitika va boshqa uchinchi tomon skriptlarini kechiktiring yoki asinxron yuklang.

Slayderlar

Bosh sahifadagi slayder ko‘pincha LCP’ni yomonlashtiradi: bir nechta katta rasm, skript bilan boshqarish. Imkon bo‘lsa, bitta statik banner bilan almashtiring.

Qanday tekshirish

• PageSpeed Insights — haqiqiy foydalanuvchilar va laboratoriya ma’lumotlari
• Search Console — Core Web Vitals hisoboti sahifa guruhlari bo‘yicha
• Lighthouse — LCP elementi va tavsiyalar

O‘zgarishdan keyin haqiqiy ma’lumotlar yangilanishi uchun vaqt kerak — bir kunda natija kutmang.

Konstruktor va CMS’larda

Tilda, WordPress yoki Bitrix’da LCP ko‘pincha shablon va plaginlarga bog‘liq. Birinchi ekrandagi katta videofon, bir nechta shrift oilasi va ko‘p vidjetlar — eng tez-tez uchraydigan sabablar. Dizaynni o‘zgartirishdan oldin bitta tajriba qiling: birinchi ekranni soddalashtirilgan versiyasi bilan sinab ko‘ring va ko‘rsatkich qanday o‘zgarishini solishtiring.