Core Web Vitals sadə dillə: LCP, INP və CLS

Core Web Vitals Google-un saytın istifadəçi üçün nə qədər rahat olduğunu ölçən üç göstəricisidir: LCP (səhifənin əsas hissəsi nə qədər tez görünür), INP (klikə nə qədər tez cavab verir) və CLS (yüklənəndə elementlər nə qədər yerindən oynayır). Yaxşı nəticə üçün LCP 2,5 saniyədən, INP 200 millisaniyədən, CLS isə 0,1-dən az olmalıdır. Aşağıda hər birini texniki jarqonsuz izah edirik və harada nəyi düzəltməyin lazım olduğunu göstəririk.

Qısa cavab: LCP sürəti, INP reaksiyanı, CLS sabitliyi ölçür. Üçünü PageSpeed Insights və Google Search Console-da pulsuz ölçə bilərsiniz. Ən çox kömək edən addımlar: şəkilləri sıxmaq və düzgün ölçüdə vermək, lazımsız skriptləri azaltmaq və şəkil, reklam, banner üçün əvvəlcədən yer ayırmaq.

Üç göstərici bir baxışda

Google bu həddləri istifadəçilərin 75%-lik hissəsi üzrə qiymətləndirir. Yəni ziyarətçilərinizin ən azı dörddə üçü yaxşı təcrübə yaşamalıdır.

LCP: əsas məzmun nə qədər tez görünür

LCP (Largest Contentful Paint) ekranda ən böyük elementin (adətən əsas şəklin, banner-in və ya böyük başlığın) tam göründüyü anı ölçür. İstifadəçi üçün bu, «sayt açıldı» hissidir.

LCP-ni nə pisləşdirir

• Ölçüsü bir neçə meqabayt olan şəkillər (çox vaxt telefondan birbaşa yüklənmiş fotolar).
• Yavaş hostinq və ya serverin uzaqda yerləşməsi.
• Əsas şəklin JavaScript ilə gec yüklənməsi.
• Çoxlu xarici şrift və stil faylları.

LCP-ni necə yaxşılaşdırmaq

1. Əsas şəkli WebP və ya AVIF formatına çevirin və ekrana uyğun ölçüdə verin.
2. Əsas şəkilə fetchpriority="high" atributu əlavə edin, ona «lazy loading» tətbiq etməyin.
3. CDN istifadə edin ki, fayllar istifadəçiyə yaxın serverdən göndərilsin.
4. Şriftləri öz serverinizdən yükləyin və sayını azaldın.

INP: sayt klikə nə qədər tez cavab verir

INP (Interaction to Next Paint) 2024-cü ildə köhnə FID göstəricisini əvəz edib. O, istifadəçi düyməyə basanda, menyu açanda və ya formaya yazanda saytın görünən reaksiya verməsinə qədər keçən vaxtı ölçür. Səhifədəki bütün qarşılıqlı əlaqələr nəzərə alınır, ən pis nəticələrdən biri qiymət kimi götürülür.

INP-ni nə pisləşdirir

• Ağır JavaScript, xüsusən çoxlu plaginləri olan WordPress saytlarında.
• Üçüncü tərəf skriptləri: çat vidjetləri, reklam pikselləri, analitika alətləri.
• Klikdən sonra brauzerin bütün səhifəni yenidən hesablaması.

INP-ni necə yaxşılaşdırmaq

• İstifadə olunmayan plaginləri və skriptləri silin.
• Çat vidjeti kimi vacib olmayan skriptləri səhifə yükləndikdən sonra işə salın.
• Uzun JavaScript tapşırıqlarını kiçik hissələrə bölün (bu proqramçı işidir).
• Google Tag Manager-də lazımsız teqləri təmizləyin.

Bakıda bir çox biznes saytına WhatsApp düyməsi, Instagram lenti, bir neçə piksel və onlayn çat eyni anda qoşulur. Hər biri ayrılıqda kiçik görünür, birlikdə isə telefonda ciddi gecikmə yaradır.

CLS: səhifə yüklənəndə yerindən oynayırmı

CLS (Cumulative Layout Shift) səhifə yüklənərkən elementlərin gözlənilmədən sürüşməsini ölçür. Tanış vəziyyət: düyməni basmaq istəyirsiniz, bu an yuxarıda banner yüklənir və siz başqa linkə klikləyirsiniz. Adamı əsəbləşdirir, bəzən də səhv sifarişlə bitir.

CLS-i nə pisləşdirir

• Ölçüsü (en və hündürlük) göstərilməyən şəkillər və videolar.
• Gec yüklənən banner, kampaniya zolağı və ya kuki bildirişi.
• Xüsusi şriftin yüklənərkən mətnin ölçüsünü dəyişməsi.

CLS-i necə yaxşılaşdırmaq

1. Bütün şəkil və videolara width və height atributları verin.
2. Banner və reklam blokları üçün əvvəlcədən sabit yer ayırın.
3. Kuki bildirişini və bildiriş zolaqlarını məzmunun üstündə, onu itələmədən göstərin.
4. Şriftlər üçün font-display: swap və uyğun ehtiyat şrift seçin.

Core Web Vitals-ı necə ölçmək

Burada iki növ məlumat var və onlar tez-tez qarışdırılır. Laboratoriya məlumatını PageSpeed Insights və Lighthouse süni şəraitdə bir testlə verir, problemi tapmaq üçün yaxşıdır. Sahə məlumatı isə Chrome istifadəçilərindən toplanan real nəticələrdir və Google qiymətləndirmədə məhz ona baxır. Onu PageSpeed Insights-ın yuxarı hissəsində və Search Console-un «Core Web Vitals» hesabatında görəcəksiniz.

Kiçik saytlarda real məlumat olmaya bilər, çünki trafik az olanda Google kifayət qədər məlumat toplamır. Bu halda laboratoriya nəticəsinə və real telefonda öz testinizə əsaslanın.

Addım-addım yoxlama

1. pagespeed.web.dev ünvanında saytınızın ünvanını yazın.
2. «Mobil» nəticəsinə baxın, masaüstü adətən daha yaxşı çıxır.
3. Yuxarıda real istifadəçi məlumatları varsa, üç göstəricinin rəngini qeyd edin.
4. Aşağıdakı «Diaqnostika» bölməsində ən böyük problemləri yazın.
5. Ana səhifə, kateqoriya səhifəsi və məhsul/xidmət səhifəsini ayrıca yoxlayın, nəticələr fərqli olur.

Nümunə hesablama

Hipotetik misal: məhsul səhifənizin əsas şəkli 3 MB-dır. Onu WebP formatına çevirib 200 KB-a endirsəniz, 2,8 MB az məlumat yüklənir. Saniyədə təxminən 1 MB real sürətli mobil internetdə bu, təxminən 2–3 saniyə qənaət deməkdir və LCP «zəif» zonadan «yaxşı» zonaya keçə bilər. Praktikada ən böyük qazanc çox vaxt elə belə sadə dəyişikliklərdən gəlir.

Platformaya görə tez qazanılan nəticələr

Saytınızın hansı platformada qurulduğundan asılı olaraq ilk addımlar fərqlənir:

Hansı platforma olursa olsun, dəyişiklikdən əvvəl və sonra eyni səhifəni ölçün və nəticəni qeyd edin, beləliklə hansı addımın həqiqətən kömək etdiyini görəcəksiniz.

Biznes üçün niyə vacibdir

Core Web Vitals yalnız Google üçün deyil. Yavaş və «tullanan» sayt istifadəçini itirir: reklam üçün ödənilmiş klik saytda nəticə vermədən geri qayıdır. Sürətin satışa təsirini ətraflı saytın sürəti və satış yazımızda hesablamışıq. Sürət texniki SEO-nun bir hissəsidir, tam siyahı üçün 40 bəndlik texniki SEO yoxlama siyahısına baxın.

Sürət işində tez-tez edilən səhvlər

Ən çox gördüyümüz səhv yalnız masaüstü nəticəyə baxmaqdır, halbuki müştərilərin çoxu sayta telefondan girir. İkincisi xal naminə vacib funksiyaları silib əsas problemi, yəni ağır şəkilləri yerində saxlamaqdır. Bir də hər yeni marketinq aləti üçün skripti düşünmədən sayta əlavə etmək və ucuz, yüklənmiş paylaşımlı hostinqdə qalmaq. Hostinq barədə domen və hostinq seçimi yazımızda danışmışıq.

Üç qısaltmanın arxasında sadə tələblər dayanır: sayt tez açılsın, klikə tez cavab versin və yüklənəndə yerindən oynamasın. Sürətli və mobilə uyğun sayt qurmaq istəyirsinizsə, veb sayt xidmətimizə baxın və ya mövcud saytınızın vəziyyətini pulsuz alətlərimizlə yoxlayın.