Core Web Vitals va performance SEO'ga qanday ta'sir qiladi?

Savol

Core Web Vitals nima, nega Google ularni reytinglash omili sifatida ishlatadi va ularni qanday aniq frontend texnikalari bilan yaxshilash mumkin?

Qisqa javob

Core Web Vitals — bu Google'ning uchta metrikasi (LCP, INP, CLS), ular foydalanuvchi uchun sahifaning haqiqiy yuklanish tezligini, javob berish qobiliyatini va vizual barqarorligini o'lchaydi. Ular reytinglash algoritmiga rasman kiradi ("Page Experience" signali), shuning uchun boshqa sharoitlar teng bo'lganda sekin yoki "sakraydigan" sayt natijalarda tez raqobatchidan yutqazadi — va bu bevosita frontend dasturchisining javobgarlik zonasida.

Batafsil javob

Core Web Vitals'ning uchta metrikasi:

• LCP (Largest Contentful Paint) — eng katta ko'rinadigan elementning (odatda hero-rasm yoki sarlavha) chizilishigacha bo'lgan vaqt. Yaxshi ko'rsatkich — 2.5 soniyagacha. "Sezilgan yuklanish tezligini" o'lchaydi.
• INP (Interaction to Next Paint) — 2024-yil martidan FID'ni almashtirdi. Sessiya davomidagi barcha interaksiyalar bo'yicha foydalanuvchi harakati (bosish, tap, tugma bosish) va ekranda keyingi kadrning chizilishi orasidagi kechikishni o'lchaydi. Yaxshi ko'rsatkich — 200 msgacha. Interfeysning javob berish qobiliyatini aks ettiradi.
• CLS (Cumulative Layout Shift) — sahifa yuklanishi davomida elementlarning umumiy "kutilmagan" siljishi (masalan, o'lchamlari berilmagan rasm kech yuklanganda matn "sakraganida"). Yaxshi ko'rsatkich — 0.1gacha. Vizual barqarorlikni aks ettiradi.

Nega bu reytinglash omili: Google ochiq ravishda "Page Experience" (uning asosida Core Web Vitals yotadi) reytinglashda hisobga olinishini ta'kidlaydi, garchi kontentning tegishliligi baribir kuchliroq signal bo'lib qolsa ham. Amalda bu tie-breaker sifatida ishlaydi: ikki sahifaning tegishliligi solishtirma bo'lganda tezroq va barqarorroqi ustunlikka ega bo'ladi. Reytinglashga bevosita ta'siridan tashqari, yomon metrikalar bounce rate'ni oshiradi va konversiyani pasaytiradi — bu esa bilvosita xulq-atvor signallariga ham yomon ta'sir qiladi.

Har bir metrikani yaxshilashning aniq texnikalari:

LCP:

• Rasmlarni optimallashtirish — zamonaviy formatlar (WebP/AVIF), to'g'ri srcset/sizes, muhim LCP-rasmi uchun <link rel="preload">.
• CSR o'rniga SSR/SSG — kontent HTML'da darhol mavjud, gidratatsiyani kutmaydi.
• Rendering'ni bloklaydigan CSS/JS'ni kamaytirish (critical CSS, defer/async).
• Tez TTFB — serverda/CDN'da keshlash.

INP:

• Uzun JS-vazifalarni bo'laklash (code splitting, dynamic import()) — uzun tasklar main thread'ni bloklaydi va brauzerga foydalanuvchi kiritishiga javob berish imkonini bermaydi.
• Klientga yuboriladigan JS miqdori va og'irligini kamaytirish (masalan, server komponentlari, interaktivlik "orollarini" lazy gidratatsiya qilish).
• Qimmat event handler'lar uchun debounce/throttle.

CLS:

• Rasmlar va videolar uchun width/height (yoki aspect-ratio)ni aniq belgilash, brauzer yuklanishdan oldin joy zaxiralashi uchun.
• Bannerlar/reklama/asinxron yuklanadigan bloklar uchun oldindan joy zaxiralash.
• Allaqachon chizilgan kontent ustiga joy zaxiralamasdan yangi kontent qo'shishdan saqlanish (masalan, hammasini pastga suradigan cookie banneri).
• font-display: optional yoki swapni ehtiyotkorlik bilan ishlatish — shrift almashinuvi layout shift'ga (FOIT/FOUT) olib kelishi mumkin.

Misol

<!-- LCP: muhim rasmni preload qilish + to'g'ri o'lchamlar -->
<head>
  <link
    rel="preload"
    as="image"
    href="/img/hero.avif"
    fetchpriority="high"
  />
</head>
<body>
  <img
    src="/img/hero.avif"
    width="1200"
    height="600"
    fetchpriority="high"
    alt="Asosiy banner"
  />
  <!-- width/height oldindan berilgan — brauzer joy zaxiralaydi, CLS oshmaydi -->
</body>

// INP: code splitting — og'ir komponent faqat kerak bo'lganda yuklanadi,
// birinchi interaksiyada asosiy oqimni bloklamasdan
const HeavyChart = defineAsyncComponent(() =>
  import('~/components/HeavyChart.vue')
)

/* CLS: element kontenti yuklanishidan oldin joy zaxiralaymiz */
.ad-slot {
  min-height: 250px; /* banner uchun belgilangan balandlik */
}

Qo'shimcha savollar

• INP eskirgan FID'dan nimasi bilan farq qiladi va nega Google bu metrikani almashtirdi?
• Core Web Vitals'ni qanday o'lchash mumkin — laboratoriya (Lighthouse) va real maydon ma'lumotlari (CrUX)?
• LCP'ni tezlashtirishning qaysi texnikalari SSR'da, qaysilari esa faqat toza CSR'da ishlaydi?