Yeni Core Web Vitals Erası: INP (Interaction to Next Paint) Optimizasiyası ilə SEO və Dönüşüm Nisbətini Artırmaq

Veb texnologiyalarının sürətlə inkişaf etdiyi və istifadəçi gözləntilərinin pik həddə çatdığı müasir rəqəmsal dövrdə, veb saytın yüklənmə sürəti artıq sadəcə texniki üstünlük deyil, həm də biznesin sağ qalma şərtidir. Google illərdir istifadəçi təcrübəsini (UX) axtarış reytinqlərində əsas faktorlardan biri kimi qəbul edir. Bu istiqamətdə atılan ən böyük addımlardan biri olan Core Web Vitals (Əsas Veb Göstəriciləri) proqramı, veb saytların performansını ölçmək üçün standartlar müəyyən edib.

12 Mart 2024-cü il tarixindən etibarən Google, köhnəlmiş FID (First Input Delay) metrikini rəsmən təqaüdə ayıraraq onu daha əhatəli və real istifadəçi təcrübəsini əks etdirən INP (Interaction to Next Paint) metriki ilə əvəz etdi. Bu dəyişiklik, xüsusilə böyük JavaScript resurslarına malik olan e-ticarət platformaları, SaaS saytları və interaktiv rəqəmsal məhsullar üçün yeni bir optimizasiya dövrünün başlanğıcı deməkdir.

Bu məqalədə INP metrikini dərindən təhlil edəcək, onun SEO və dönüşüm nisbətlərinə (conversion rate) təsirini araşdıracaq və saytınızın INP göstəricisini 200 millisaniyənin altına salmaq üçün tətbiq edə biləcəyiniz qabaqcıl texniki optimizasiya strategiyalarını təqdim edəcəyik.

---

INP (Interaction to Next Paint) Nədir və Niyə FID-ni Əvəz Etdi?#

İstifadəçilərin veb saytla qarşılıqlı əlaqəyə girdiyi zaman (məsələn, menyuya kliklədikdə, səbətə məhsul əlavə etdikdə və ya mobil cihazda açılan paneli açdıqda) qarşılaşdıqları vizual gecikmə onların saytdakı ümumi məmnuniyyətinə birbaşa təsir edir.

Köhnə metrik olan FID (First Input Delay), yalnız istifadəçinin səhifə ilə etdiyi ilk qarşılıqlı əlaqənin gecikməsini ölçürdü və bu ölçmə yalnız brauzerin sorğuya cavab verməyə başladığı anı əhatə edirdi. Lakin bu, real təcrübəni tam əks etmirdi. Çünki istifadəçi səhifədə qaldığı müddətdə onlarla fərqli klik edə bilər və ilk klik sürətli olsa belə, sonrakı interaktivliklər saytın donmasına səbəb ola bilərdi.

INP (Interaction to Next Paint), istifadəçinin səhifədə keçirdiyi bütün vaxt ərzində baş verən bütün klikləmə, toxunma (tap) və klaviatura daxiletmələrini izləyir və brauzerin bu interaktivlik nəticəsində yaranan növbəti vizual kadrı (frame) ekrana çəkməsinə (paint) qədər keçən ən uzun gecikmə müddətini hesabla müəyyən edir.

FID və INP Arasındakı Fundamental Fərqlər

• Ölçmə Diapazonu: FID yalnız ilk interaktivliyi ölçdüyü halda, INP səhifənin bütün həyat tsikli (lifecycle) boyu baş verən bütün interaktivlikləri ölçür.
• Ölçmə Fazaları: FID yalnız brauzerin tapşırığı emal etməyə başlamasına qədər olan gecikməni (Input Delay) ölçürdü. INP isə üç fazanı ölçür: Giriş Gecikməsi (Input Delay), Emal Müddəti (Processing Time) və Təqdimat Gecikməsi (Presentation Delay).
• Hədəf: FID-də hədəf 100ms-dən az olmaq idisə, INP-də yaxşı istifadəçi təcrübəsi üçün bu limit 200ms-dən az olaraq təyin edilmişdir.

Yaxşı bir INP Göstəricisi Necə Olmalıdır?

Google tərəfindən müəyyən edilmiş INP qiymətləndirmə şkalası aşağıdakı kimidir:

• Yaxşı (Good): <= 200 ms (İstifadəçi interaktivliyin dərhal baş verdiyini hiss edir).
• Təkmilləşdirilməlidir (Needs Improvement): > 200 ms və <= 500 ms.
• Zəif (Poor): > 500 ms (İstifadəçi interfeysində nəzərəçarpan donmalar və gecikmələr baş verir).

---

INP-nin SEO və Biznes Göstəricilərinə (ROI) Təsiri#

Google-un axtarış alqoritmləri istifadəçi məmnuniyyətini birbaşa qiymətləndirə bilmədiyi üçün Core Web Vitals kimi texniki metriklərdən siqnal kimi istifadə edir. Zəif INP göstəricisi olan bir sayt, axtarış nəticələrində (SERP) mövqeyini itirmək riski ilə üz-üzədir. Lakin təsir yalnız SEO ilə məhdudlaşmır; birbaşa dönüşüm nisbətlərinə və istifadəçi loyallığına təsir göstərir.

Dönüşüm Nisbəti (Conversion Rate) və Bounce Rate

E-ticarət saytlarında istifadəçilər sürətli qərarlar verirlər. Məsələn, "Səbətə at" düyməsinə kliklədikdən sonra əgər sayt 600ms ərzində heç bir vizual reaksiya vermirsə (məsələn, yüklənmə çarxı və ya səbətin yenilənməsi vizualı), istifadəçi düymənin işləmədiyini düşünərək təkrar-təkrar klikləyir və ya saytı tərk edir.

• Maliyyə İtkisi: Araşdırmalar göstərir ki, mobil cihazlarda interaktivlik gecikmələrinin 100ms azaldılması dönüşüm nisbətlərini orta hesabla 1.5% ilə 2% arasında artıra bilər.
• İstifadəçi Davranışı: Yüksək INP dəyərləri istifadəçilərdə "sayt donub" təəssüratı yaradır ki, bu da dərhal çıxma faizini (Bounce Rate) kəskin şəkildə yüksəldir.

---

Core Web Vitals Metriklərinin Müqayisəsi#

Core Web Vitals daxilində yer alan metriklərin hər biri fərqli bir istifadəçi təcrübəsi aspektini ölçür. Aşağıdakı cədvəldə bu metriklərin fərqlərini və INP-nin bu ekosistemdəki yerini görə bilərsiniz:

---

INP Problemlərinin Diaqnostikası: Alətlər və Metodologiya#

INP-ni optimizasiya etməzdən əvvəl, problemlərin haradan qaynaqlandığını dəqiq müəyyən etmək lazımdır. Bunun üçün iki növ məlumatdan istifadə edirik: Sahə Məlumatları (Field Data) və Laboratoriya Məlumatları (Lab Data).

1. Chrome UX Report (CrUX) və PageSpeed Insights

Real istifadəçilərin təcrübələrini əks etdirən Sahə Məlumatları ən vacib göstəricidir. Google Search Console və PageSpeed Insights vasitəsilə son 28 günün real istifadəçi INP göstəricilərini görə bilərsiniz. Əgər burada INP probleminiz varsa, bu, real istifadəçilərin saytınızda çətinlik çəkdiyini göstərir.

2. Chrome DevTools Performance Paneli

Laboratoriya mühitində INP-ni simulyasiya etmək və tapşırıqları analiz etmək üçün ən güclü alət Chrome brauzerinin daxili DevTools panelidir:

1. Saytınızı Chrome-da açın və F12 (və ya Cmd + Option + I) basaraq DevTools-u açın.
2. Performance bölməsinə keçin.
3. CPU sürətini zəiflətmək üçün parametrlərdən CPU: 4x slowdown və ya 6x slowdown seçin (bu, mobil cihaz istifadəçilərinin təcrübəsini simulyasiya etməyə kömək edir).
4. Yazma düyməsini (Record) basın və saytda şübhəli interaktivlikləri (məsələn, menyunu açmaq, filtr tətbiq etmək) icra edin.
5. Yazmanı dayandırın və yaranan qrafikdə qırmızı rənglə işarələnmiş Long Tasks (50ms-dən uzun çəkən tapşırıqlar) hissələrini analiz edin.

---

INP Optimizasiyası üçün Texniki Həllər və Addım-Addım Tətbiq Planı#

INP göstəricisini yaxşılaşdırmaq üçün əsas hədəfimiz Main Thread (Əsas Mövzu) üzərindəki yükü azaltmaq və brauzerin istifadəçi klikinə dərhal cavab verməsini təmin etməkdir. Aşağıda bunun üçün tətbiq edilməli olan ən effektiv texniki addımlar verilmişdir.

1. JavaScript-in Əsas Mövzuya (Main Thread) Yol Verməsi (Yielding)

Brauzer tək bir əsas mövzu (Main Thread) üzərində işləyir. Əgər bu mövzu böyük bir JavaScript kodunu icra etməklə məşğuldursa, istifadəçinin klikinə cavab verə bilmir və bu da INP-ni artırır. Həll yolu uzun tapşırıqları (Long Tasks) daha kiçik hissələrə bölmək və brauzerə kadrları yeniləmək üçün imkan yaratmaqdır (yielding).

Bunun üçün müasir JavaScript-də scheduler.yield() və ya daha köhnə brauzerlər üçün setTimeout metodundan istifadə edə bilərik.

Aşağıdakı kod blokunda uzun müddət davam edən bir dövrün (loop) əsas mövzunu bloklamadan necə icra edilə biləcəyi göstərilmişdir:

/**
 * Əsas mövzuya (Main Thread) yol vermək üçün köməkçi funksiya
 */
function yieldToMain() {
  if (globalThis.scheduler && typeof globalThis.scheduler.yield === 'function') {
    // Müasir brauzerlər üçün scheduler.yield istifadə olunur
    return globalThis.scheduler.yield();
  } else {
    // Köhnə brauzerlər üçün fallback olaraq setTimeout istifadə olunur
    return new Promise(resolve => setTimeout(resolve, 0));
  }
}

/**
 * Böyük həcmdə məlumatı emal edən və INP-ni qoruyan funksiya
 */
async function processLargeDataset(items) {
  const batchSize = 50; // Hər partiyada emal ediləcək element sayı
  
  for (let i = 0; i < items.length; i++) {
    // Elementin emal edilməsi
    executeHeavyComputation(items[i]);
    
    // Hər batchSize qədər elementdən sonra əsas mövzuya yol verilir
    if (i > 0 && i % batchSize === 0) {
      console.log(`Emal prosesi dayandırıldı: ${i}-ci element. Main Thread sərbəst buraxılır.`);
      await yieldToMain();
    }
  }
}

function executeHeavyComputation(item) {
  // Simulyasiya edilən ağır riyazi hesablama
  let dummy = 0;
  for (let j = 0; j < 100000; j++) {
    dummy += Math.sqrt(j);
  }
}

2. Event Handler-lərin Optimizasiyası (Debouncing və Throttling)

İstifadəçi klaviaturada yazarkən və ya səhifəni sürüşdürərkən (scroll) işə düşən hadisələr (events) çox tez-tez çağırılır. Bu, brauzerin render mexanizmini yükləyir. Debounce və Throttle metodları ilə bu çağırışların sayını məhdudlaşdırmaq lazımdır.

• Debounce: İstifadəçi yazmağı bitirdikdən müəyyən bir müddət sonra (məsələn, 300ms) funksiyanı işə salır (məsələn, canlı axtarış təklifləri üçün ideal dərəcədə uyğundur).
• Throttle: Müəyyən vaxt intervalında funksiyanın yalnız bir dəfə işləməsini təmin edir (məsələn, scroll və ya resize hadisələri üçün).

3. DOM Ölçüsünün və Dərinliyinin Azaldılması

Böyük və mürəkkəb DOM (Document Object Model) strukturu brauzerin hər klikdən sonra səhifəni yenidən hesablamasını (Recalculate Style) və yenidən yerləşdirməsini (Layout) çətinləşdirir.

• DOM elementlərinin ümumi sayını 1500-dən aşağı saxlayın.
• DOM dərinliyini (nesting) maksimum 32 səviyyə ilə məhdudlaşdırın.
• Lazımsız <div> elementlərindən qaçın və semantik HTML-dən istifadə edin.

4. CSS-də content-visibility Xüsusiyyətindən İstifadə

Ekran xaricində (below the fold) qalan mürəkkəb elementlərin render edilməsini gecikdirmək üçün CSS-in content-visibility: auto xüsusiyyətindən istifadə edə bilərsiniz. Bu, brauzerin ilkin yüklənmə zamanı və sonrakı interaktivliklərdə yalnız görünən sahəni hesablamasını təmin edərək INP-ni əhəmiyyətli dərəcədə yaxşılaşdırır.

.footer-section,
.recommended-products-carousel {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Render olunmamışdan əvvəlki təxmini hündürlük */
}

---

E-Ticarət Saytları üçün INP Optimizasiya Strategiyası#

E-ticarət platformaları dinamik strukturlarına görə INP problemlərinə ən çox məruz qalan saytlardır. Aşağıdakı addım-addım tətbiq planı e-ticarət saytınızda dərhal nəticə əldə etməyə kömək edəcəkdir:

Addım 1: Üçüncü Tərəf Skriptlərinin (Third-Party Scripts) İdarə Edilməsi

Google Tag Manager, Facebook Pixel, Hotjar və digər analitik skriptlər əsas mövzunu ən çox bloklayan amillərdir.

• Həll: Bu skriptləri defer və ya async atributları ilə yükləyin. Mümkünsə, qeyri-kritik analitik skriptləri istifadəçi səhifə ilə ilk interaktivliyi etdikdən sonra yükləyin və ya Cloudflare Zaraz kimi server tərəfli (Server-Side Tracking) həllərə keçid edin.

Addım 2: Dinamik Süzgəclərin (Filters) Optimizasiyası

İstifadəçi məhsul kateqoriyası səhifəsində süzgəcləri (məsələn, rəng, ölçü, qiymət) seçdikdə, səhifə tamamilə yenidən yüklənmədən məhsullar dinamik olaraq yenilənir. Bu zaman yaranan gecikməni azaltmaq üçün:

• Süzgəc klikləndiyi an dərhal bir yüklənmə indikatoru (skeleton screen və ya spinner) göstərin.
• Məlumatların çəkilməsi (fetch) və DOM-a yazılması prosesini asinxron edin və yuxarıda göstərilən yieldToMain metodu ilə əsas mövzunu sərbəst buraxın.

Addım 3: "Səbətə At" Düyməsinin Optimist Yenilənməsi (Optimistic UI)

İstifadəçi "Səbətə at" düyməsinə kliklədikdə, API sorğusunun serverdən uğurlu cavab qaytarmasını gözləmədən interfeysdə səbətin sayını artırın. Əgər sorğu uğursuz olarsa, interfeysi əvvəlki vəziyyətinə qaytarın. Bu yanaşma istifadəçiyə dərhal vizual cavab verdiyi üçün INP-ni sıfıra yaxınlaşdırır.

---

Nəticə və Gələcəyə Dair Tövsiyələr#

Google-un Core Web Vitals ekosistemində INP-ni əsas interaktivlik metriki kimi təyin etməsi, rəqəmsal dünyada istifadəçi təcrübəsinə verilən dəyərin ən bariz göstəricisidir. Sürətli yüklənən, lakin kliklərə gec cavab verən bir veb sayt artıq nə istifadəçiləri, nə də axtarış motorlarını qane edir.

INP optimizasiyası birdəfəlik edilən bir iş deyil, davamlı bir prosesdir. Saytınızın rəqabətdə öndə qalması üçün aşağıdakı addımları mütəmadi olaraq yerinə yetirməyi tövsiyə edirik:

1. Daimi Monitorinq: Google Search Console-dakı Core Web Vitals hesabatını hər həftə yoxlayın və INP xətası alan URL qruplarını müəyyən edin.
2. Performans Büdcəsi (Performance Budget): İnkişaf etdirici (developer) komandanız üçün performans büdcəsi təyin edin. Məsələn, "Heç bir yeni JavaScript paketi əsas mövzunu 50ms-dən çox bloklaya bilməz" qaydasını tətbiq edin.
3. Müasir Framework-lər: Əgər köhnə və ağır infrastruktura sahibsinizsə, Next.js, Nuxt.js və ya Astro kimi müasir, performansa yönəlmiş və daxili optimizasiya mexanizmləri olan texnologiyalara keçidi planlaşdırın.

Unutmayın ki, texniki SEO-ya və veb performansa edilən hər bir investisiya, yalnız axtarış motorlarında daha yüksək mövqe qazanmağınıza deyil, həm də birbaşa dönüşüm nisbətlərinizin və rəqəmsal gəlirlərinizin artmasına xidmət edir.