C l i c k O p t i m i z e

Core Web Vitals nədir? (Sadə dildə + real nümunələr)

  • Home
  • SEO
  • Core Web Vitals nədir? (Sadə dildə + real nümunələr)

Core Web Vitals (CWV) — saytın “istifadəçi rahatlığı”nı ölçən 3 əsas göstəricidir: səhifə nə qədər tez görünür (LCP), klikə nə qədər tez reaksiya verir (INP) və ekranda elementlər tərpənirmi (CLS). Aşağıda hər şeyi sadə dillə, real nümunələrlə və praktik addımlarla geniş izah etdim.

Bir baxışda Core Web Vitals göstəriciləri (xülasə)

  • LCP ≤ 2.5s → “Əsas görüntü tez gəlsin.”

  • INP ≤ 200ms → “Klikdən sonra tez cavab ver.”

  • CLS ≤ 0.1 → “Ekran tərpənməsin.”

Bənzətmə: Restoran. Menyu (LCP) tez gəlsə sifariş verirsən, kassir (INP) sürətli olsa növbə axır, oturduğun stol (CLS) hərəkət etməsə rahat yeyirsən.

Bu meyarları ölçmək üçün aşağıdakı linkə keçid edə bilərsiniz: https://pagespeed.web.dev/

Core Web Vitals
Core Web Vitals

Niyə bu qədər vacibdir?

  • SEO: Google istifadəçi təcrübəsini siqnal kimi nəzərə alır.

  • Satış/lead: Yüklənmə yavaşdırsa, tərk etmə (bounce) artır, konversiya düşür.

  • Mobil: Zəif şəbəkə + zəif cihazlarda səhvlər daha çox hiss olunur.

1) LCP — “Əsas görünüş nə qədər tez gəlir?”

Nədir? Yuxarı hissədəki ən böyük blokun (hero şəkli, başlıq) ekranda görünmə vaxtı.
Hədəf: ≤ 2.5 saniyə.

Real həyat bənzətməsi: Restoranda menyu gec gəlsə, əsəbiləşirsən və çıxıb gedə bilərsən.

Sürətli həllər:

  • Şəkil pəhrizi: Hero şəkli AVIF/WebP, ölçü 150–300 KB aralığında.

  • Preload + prioritet: Hero şəkilə preload və fetchpriority="high" ver.

  • Render-bloklayan resurslar: Ağır CSS/JS-i sonda yüklə (defer/async).

  • Şəbəkə: CDN, HTTP/2/3, Brotli (və ya GZIP) aktiv olsun.

  • Server: TTFB-ni aşağı sal (yaxşı hosting, caching).

Kiçik kod nümunəsi:

<link rel="preload" as="image" href="/images/hero.avif" fetchpriority="high">
<link rel="preload" as="style" href="/css/critical.css">

2) INP — “Klik etdim, bəs cavab hanı?”

Nədir? Sessiya boyu klik/touch kimi hərəkətlərə cavabın sabitlik və sürəti.
Hədəf: ≤ 200 ms.

Bənzətmə: Kassir sürətlidirsə, növbə axır; yavaşdırsa, hamı əsəbləşir.

Sürətli həlllər:

  • Plugin pəhrizi: Lazımsız pluginləri söndür; JS paketlərini böl (code splitting).

  • Dərhal feedback: Klikdən dərhal “loading…” göstər; istifadəçi “dondu?” deməsin.

  • Ağır işləri kənara at: Uzun hesablama → Web Worker, setTimeout(...) ilə əsas axını boşalt.

  • Event optimizəsi: Debounce/throttle, layout thrashing-dən qaç.

Mini nümunə:

btn.addEventListener('click', () => {
btn.classList.add('is-loading'); // dərhal vizual siqnal
setTimeout(() => addToCart(), 0); // ağır iş növbəyə
});

3) CLS — “Ekran niyə tərpənir?”

Nədir? Yüklənmə zamanı elementlərin yerinin dəyişməsi (məzmun “qaçır”).
Hədəf: ≤ 0.1.

Bənzətmə: TV-də altyazı birdən böyüyür, gözün xətti itirir — oxumağa mane olur.

Sürətli həlllər:

  • Ölçüləri rezerv et: Şəkil/video üçün width/height və ya aspect-ratio.

  • Reklam/Embed: Sabit konteyner (min-height) ayır; sonradan gələndə məzmunu itələməsin.

  • Şrift yüklənməsi: font-display: swap; – FOIT-dən qaç, mətn tərpənməsin.

  • Banner/Popup: Üst-üstə göstər (overlay), məzmunu itələyən “push” olmasın.

CSS nümunəsi:

img { aspect-ratio: 16/9; width: 100%; height: auto; }
.embed { min-height: 280px; }

Hansı alətlə ölçək?

  • PageSpeed Insights: URL üzrə sahə (real) + lab nəticələr.

  • Search Console → Core Web Vitals: Şablonlar üzrə “Yaxşı / Orta / Zəif”.

  • Lighthouse (DevTools): Lokal test, “Performance” paneli.

  • WebPageTest: Waterfall, TTFB, filmstrip – dərin diaqnostika.

Praktik qayda: Hər dəyişikliyə PageSpeed Insights ilə “öncə/sonra” bax, GSC-də URL qruplarının statusunu izlə.

Şəkillər: “3 dəqiqəlik” optimizasiya resepti

  1. Format seçimi: AVIF → WebP → JPEG (bu sırayla cəhd edin).

  2. Ölçü: Hero üçün 1200–1600px genişlik, 150–300 KB; qalanlar daha kiçik.

  3. Lazy-load: Yuxarı hissədən aşağıdakılara loading="lazy".

  4. Srcset/sizes: Ekrana görə düzgün ölçünü çatdır.

Şriftlər: Gözəl görünüş + sabitlik

  • Preconnect: fonts.gstatic.com üçün preconnect.

  • Swap: font-display: swap; → CLS azalır.

  • Subset: Lazımsız glifləri çıxarın (latın+az seti bəs edir).

  • Öz serverinizdən: Mümkünsə font fayllarını CDN-dən verin.

JavaScript pəhrizi: “Az JS, çox rahatlıq”

  • Tree-shaking və code splitting.

  • defer/async – renderi bloklama.

  • Ağır analitika skriptlərini gecikdir.

  • UI kitabxanalarında “yüngül” alternativlərə bax (məs., yalnız istifadə etdiyin komponentlər).

Keş/CDN: “Yaxındakı anbardan ver”

  • HTTP caching: Cache-Control, ETag başlıqları.

  • CDN: Statik resursları yaxın POP-dan çatdır, TTFB + LCP düşür.

  • HTTP/2/3: Paralel resurs çatdırılması daha effektivdir.

CMS-ə görə praktik məsləhətlər

WordPress

  • Plugin pəhrizi: Lazımsız builder/slider/reklam pluginlərini söndürün.

  • LiteSpeed Cache və ya WP Rocket kimi keş pluginləri.

  • Şəkil optimizəsi: Imagify, ShortPixel; WebP/AVIF çıxışı.

  • Critical CSS çıxarışı və defer/async üçün daxili alətlər.

Shopify

  • Mövzuda lazımsız app blockları silin/deaktiv edin.

  • Hero şəkillərini media kitabxanaya WebP/AVIF kimi yükləyin.

  • “Render-blocking” skriptləri Checkout-a daşımaq (uyğundursa) və ya gecikdirmək.

  • App-lərin JS/CSS izini minimuma endirin (lazım olmayanları çıxarın).

“30 dəqiqəlik sprint” — indi nə edim?

  1. Ən çox trafikli 3 səhifə: ana, kateqoriya, məhsul/blog.

  2. PageSpeed Insights-da ölç, rəqəmləri qeyd et (LCP/INP/CLS).

  3. Bu 5 hərəkəti indi et:

    • Hero şəkillərini AVIF/WebP + ölçü kiçilt.

    • Yuxarı hissədən sonrakı şəkillərə loading="lazy".

    • 1–2 lazımsız plugin/app-i söndür.

    • Fontlar üçün preconnect + font-display: swap;.

    • JS fayllarına defer/async.

  4. Yenidən ölç, öncə/sonra fərqinə bax.

  5. GSC-də CWV hesabatını izləməyə başla.

Core Web Vitals
Core Web Vitals

Tipik səhvlər (və tez həll)

A) LCP-ni pisləşdirən səhvlər (əsas görüntü gec gəlir)

1) Hero şəkli çox böyükdür və ya yanlış formatdadır

Nəticə: LCP 3–5 saniyəyə qalxır, mobil istifadəçi çıxır.
Necə tanımaq: PageSpeed Insights → “Largest Contentful Paint element” bölməsi hero şəkli göstərir; “transfer size” 700KB+ görünür.
Həll: AVIF/WebP formatı, ölçünü 150–300KB-ə sal; preload + fetchpriority="high".
Nümunə (WordPress):

  • Media kitabxanasına .avif yüklə; ShortPixel/Imagify ilə sıkıştır.

  • Hero: 1600px genişlik, 220KB AVIF.

<link rel="preload" as="image" href="/img/hero.avif" fetchpriority="high">

2) Render-blocking CSS/JS (yuxarıda ağır fayllar)

Nəticə: HTML yüklənsə də səhifə görünmür; LCP gecikir.
Necə tanımaq: Lighthouse Waterfall-da .css və .js faylları “blocking” kimi görünür.
Həll: Kritiki CSS-i inline, qalan CSS/JS-i defer/async.
Nümunə (Shopify):

  • “theme.liquid”də analitika/heatmap skriptlərini sona köçür.

  • Slider/animation JS fayllarını yalnız lazım olan səhifələrdə çağır.

<script src="/app.js" defer></script>

3) Fontların gec yüklənməsi (FOIT/FOUT idarə olunmur)

Nəticə: Başlıq/mətn gec görünür → LCP + hiss olunan yavaşlıq.
Necə tanımaq: Performance panelində font faylları gec gəlir; şriftlər bir neçə saniyə sonra dəyişir.
Həll: preconnect + font-display: swap; + subset.
Nümunə:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
4) Zəif hosting / CDN yoxdur / TTFB yüksəkdir

Nəticə: İlk cavab 600–1200ms → hər şey gecikir.
Necə tanımaq: PSI-də TTFB xəbərdarlığı var; WebPageTest “TTFB” yüksək.
Həll: CDN aktiv et (Cloudflare və s.), server caching, HTTP/2/3.
Nümunə:

  • Cloudflare aktiv → TTFB 900ms → 180ms.

B) INP-ni pisləşdirən səhvlər (klik gec cavab verir)

5) Çox plugin/app → ağır JS (əsas thread doludur)

Nəticə: Klik edirsən, 500–1200ms sonra reaksiya.
Necə tanımaq: Coverage/Performance-da JS execution çox yüksək; Long Tasks (≥50ms) çoxdur.
Həll: Lazımsız pluginləri söndür, code-splitting, lazımlı skriptləri səhifə-baza yüklə.
Nümunə (WordPress):

  • Page builder + slider + popup + chat = 1.2MB JS. Chatı yalnız /contact-da saxla, slideri yalnız ana səhifədə işə sal → INP 480ms → 210ms.

6) Klikdən sonra vizual feedback yoxdur

Nəticə: İstifadəçi “sayt dondu?” deyir, ardıcıl klikləyir.
Necə tanımaq: “Səbətə at” və ya “Filter” kliklərində dərhal heç nə dəyişmir.
Həll: Dərhal loading/spinner/state dəyişimi göstər.
Nümunə:

btn.addEventListener('click', () => {
btn.classList.add('is-loading'); // dərhal siqnal
setTimeout(processAddToCart, 0); // ağır işi növbəyə ver
});

7) Ağır 3rd-party skriptlər (chat, heatmap, widgetlər)

Nəticə: Main thread bloklanır; INP şişir.
Necə tanımaq: Performance-da 3P domainlərdən JS execution böyükdür.
Həll: Gecikdirilmiş yükləmə (on user interaction), async/defer, yalnız lazım olan səhifələrdə.
Nümunə:

  • Heatmap yalnız 10% trafikli A/B sınaq səhifələrində aktiv olsun.

8) Sıx DOM və re-render (layout thrashing)

Nəticə: Filter/sort zamanı UI lag verir.
Necə tanımaq: Performance → Layout/Style recalculation pikləri.
Həll: Virtual list, minimal reflow, requestIdleCallback, batched updates.
Nümunə (Məhsul siyahısı):

  • 1000 kart əvəzinə 24 göstər, scroll olduqca yüklə (infinite scroll).

C) CLS-ni pisləşdirən səhvlər (ekran tərpənir)

9) Şəkil/video ölçüləri verilməyib

Nəticə: Media gec gəldikcə mətn yerdəyişir.
Necə tanımaq: PSI → “Images without explicit width/height”.
Həll: width/height və ya aspect-ratio.
Nümunə:

<img src="/img/post.jpg" width="800" height="450" alt="">
/* və ya */
img.card { aspect-ratio: 16/9; width:100%; height:auto; }

10) Reklam/Embed konteyneri sabit deyil

Nəticə: Reklam yüklənəndə mətn 2–3 sətir aşağı düşür.
Necə tanımaq: Oxu zamanı mətn “qaçır”.
Həll: Sabit hündürlük/min-height; placeholder.
Nümunə:

.ad-slot { min-height: 280px; display:block; }

11) Dinamik banner/popup məzmunu “itələyir”

Nəticə: Cookie bar, promo banner məzmunu aşağı itələyir.
Necə tanımaq: Saytı açanda başlıq/mətn sıradan çıxır.
Həll: Overlay kimi ver (üst-üstə), ya da yuxarıda əvvəlcədən boşluq rezerv et.
Nümunə:

  • Mobile cookie bar: ekranın aşağısında position: fixed; ilə overlay — məzmun sabit qalır.

12) Font dəyişəndə mətn sıçrayır (FOIT/FOUT idarə olunmur)

Nəticə: Başlıqların ölçüsü sonradan dəyişir, sətirlər tərpənir.
Necə tanımaq: İlk saniyələrdə fontlar “atılıb-düşür”.
Həll: font-display: swap; + ölçüsü oxşar fallback font seç.
Nümunə:

  • Inter fallback: system-ui, -apple-system, Segoe UI, Roboto.

D) Ümumi, amma çox görülən səhvlər

13) Hero şəkil “lazy” işarələnib

Nəticə: LCP kəskin pisləşir (kritik media gecikdirilir).
Necə tanımaq: PSI “Defer offscreen images” xəbərdarlığı olsa da hero “lazy” olmamalıdır.
Həll: Yalnız ekrandan aşağı media loading="lazy" olsun; hero normal yüklə.

14) Kritiki kontent 3rd-party-dən gəlir

Nəticə: Xarici server geciksə, əsas blok gecikər.
Necə tanımaq: Waterfall-da kritik fayl xarici domen.
Həll: Kritiki CSS/JS öz domenindən ver, yaxud preconnect + preload.
Nümunə:

  • İkon fontu əvəzinə SVG sprite-ları layihəyə daxil et.

15) Mobil vizual ağırdır (desktop dizaynını mobilə “sıxmaq”)

Nəticə: Mobil LCP/INP pis; CLS artır.
Necə tanımaq: Mobil PSI çox zəif, labda CPU throttling zamanı düşür.
Həll: Mobil üçün daha kiçik şəkillər, az animasiya, az script; max 1 slider, 1 font-weight.
Nümunə:

  • Mobil hero: 900px genişlik, 120–180KB.

16) “Yüklənir” animasiyası belə ağırdır

Nəticə: Loading göstərmək əvəzinə GPU/CPU yükləyir.
Necə tanımaq: Performance-da animation/composition pikləri.
Həll: Sadə CSS spinner; JS ilə hər frame-də ölçü-hesab yox.
Nümunə:

.loader{width:20px;height:20px;border:3px solid #ccc;border-top:3px solid #000;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

17) Bir səhifədə çox “widget” (chat, puan, paylaş, yorum)

Nəticə: LCP+INP+CLS hamısı zərbə alır.
Necə tanımaq: HTML-də çox script tag; Performance-da uzun tapşırıqlar.
Həll: Prioritetləşdir: satışa təsiri olmayanları çıxar; qalanları “on interaction” yüklə.
Nümunə:

  • Chat yalnız “contact” və ya 30s saytda qalan istifadəçidən sonra açılsın.

18) Serverdə cache yoxdur / HTML hər dəfə dinamik yığılır

Nəticə: TTFB yüksək; LCP zədələnir.
Necə tanımaq: WebPageTest → “Cache static” warnings; PSI TTFB yüksək.
Həll: Server/edge cache (Full-page cache), CDN.
Nümunə (WordPress):

  • LiteSpeed Cache + QUIC.cloud → TTFB 850ms → 180ms.

“Sürətli diaqnoz” checklist (30 saniyədə bax)

  • Hero şəkil lazy’dirmi? → Xeyr olmalıdır.

  • PSI-də LCP elementi nədir? → O elementin ölçüsü/formatı/preload statusu.

  • Performance → Long Tasks var? → INP riskdir.

  • Şəkillərdə width/height var? → CLS riskini azaldır.

  • Fontlarda swap var? → CLS + LCP daha stabil olur.

  • 3rd-party skriptlər çoxdur? → INP yüksəlir, prioritetləşdir.

Mini “öncə/sonra” ssenariləri

    1. Hero 1.8MB JPEG → 240KB AVIF + preload

      • LCP: 3.6s → 2.2s

    2. Chat + heatmap + slider hər səhifədə → yalnız ana/contact

      • INP: 520ms → 190ms

    3. Şəkillərdə ölçü yoxdur → width/height əlavə edildi

      • CLS: 0.22 → 0.05

Hesabat və monitorinq planı

  • Həftəlik: PageSpeed Insights-lə top URL-ləri yoxla, “öncə/sonra” cədvəli saxla.

  • Aylıq: GSC → CWV hesabatında URL qruplarının status indeksini çıxart.

  • Release sonrası: Böyük dəyişiklikdən sonra Lighthouse testini təkrarla

Previus Post
E-ticarət SEO

One Comment

Porn Tude
25 Yan 2026

How are you?

Reply

Leave a comment