INP’ni qanday yaxshilash va sayt javobini tezlashtirish

INP nima va u qanday o‘lchanadi

INP (Interaction to Next Paint) — sahifaning javob berish tezligini baholaydigan Core Web Vitals metrikasi. U tashrif davomidagi barcha bosish, teginish va tugma bosishlarni olib, eng sekinlaridan birini ko‘rsatadi. 200 ms gacha yaxshi, 500 ms dan ortiq — yomon hisoblanadi.

Har bir o‘zaro ta’sir uch qismdan iborat:

Skroll va sichqoncha bilan ustiga olib borish INP’ga kirmaydi. Metrika real foydalanuvchilardan yig‘iladi, shuning uchun yuklanish bo‘yicha laboratoriya testi uni ko‘rsatmaydi.

Sekin o‘zaro ta’sirlarni qanday topish

1. Search Console → Core Web Vitals — qaysi sahifa guruhlarida INP muammosi borligini ko‘rsatadi.
2. PageSpeed Insights — aniq URL uchun dala INP qiymatini beradi.
3. Chrome DevTools → Performance — CPU sekinlashtirishni yoqing (4x yoki 6x), yozib oling va harakatni takrorlang: filtrni bosish, menyuni ochish, qidiruvga yozish. Interactions qatorida davomiylik va bosqichlar bo‘yicha taqsimot ko‘rinadi.
4. RUM yig‘ish — web-vitals kutubxonasi INP’ni element ko‘rsatilgan holda analitikangizga yuborishga imkon beradi. Shunda real foydalanuvchilarda aynan qaysi tugma sekinlashayotganini bilasiz.

import { onINP } from 'web-vitals/attribution';

onINP(({ value, attribution }) => {
  console.log(value, attribution.interactionTarget);
});

Kuchsiz qurilmalarda sinab ko‘ring: kuchli noutbukda muammolar ko‘pincha ko‘rinmaydi.

Uzun vazifalarni tuzatish

Uzun vazifa — 50 ms dan uzoq davom etadigan har qanday JavaScript bloki. U bajarilayotganda brauzer kiritishga javob bera olmaydi.

• Ishni qismlarga bo‘ling va ular orasida boshqaruvni brauzerga qaytaring. Zamonaviy usul — scheduler.yield(), zaxira variant — setTimeout(resolve, 0).
• Avval interfeysni yangilang, keyin hisoblang. Bosishga javobni (spinner, holat o‘zgarishi) ko‘rsating, analitika, saqlash va og‘ir hisob-kitoblarni esa keyin bajaring.
• Hisob-kitoblarni Web Worker’ga chiqaring — katta massivlarni saralash, parsing, ma’lumotlarni qayta ishlash.
• Qidiruv va filtrlar uchun debounce qo‘llang, har bir harf uchun so‘rov yuborilmasin.

async function handleClick() {
  showSpinner();
  await scheduler.yield();
  runHeavyWork();
}

Maqsadli brauzerlarda scheduler.yield() qo‘llab-quvvatlanishini tekshiring va zaxira variant qo‘shing.

Tashqi skriptlar

Chatlar, piksellar, teg-menejerlar, A/B testlar va vidjetlar foydalanuvchi biror narsani bosmoqchi bo‘lgan paytda asosiy oqimni band qiladi.

• Audit o‘tkazing: DevTools’ning Performance panelida vaqtni domenlar bo‘yicha guruhlang.
• Hech kim foydalanmaydigan narsalarni olib tashlang.
• Muhim bo‘lmagan skriptlarni defer bilan yoki birinchi o‘zaro ta’sirdan keyin yuklang.
• Chat vidjetini yengil tugma ko‘rinishida ko‘rsating va to‘liq holda bosilganda yuklang.

Qimmat qayta chizishlar

Hatto tez ishlovchi ham sekin chizishga sabab bo‘lishi mumkin.

• DOM’ni kichraytiring. Minglab tugunlar stillarni qayta hisoblashni qimmatlashtiradi. Uzun ro‘yxatlarni virtualizatsiya qiling.
• React’da ortiqcha qayta renderlardan qoching: holatni u ishlatiladigan joyga yaqin saqlang, memo qo‘llang, shoshilinch bo‘lmagan yangilanishlar uchun useTransition dan foydalaning.
• Layout thrashing’dan qoching — siklda o‘lchamlarni o‘qish (offsetHeight) va stillarni yozishni almashtirib turish.
• Ekrandan tashqaridagi bloklar uchun content-visibility: auto dan foydalaning.

Ko‘p uchraydigan xatolar

• Faqat yuklanishni optimallashtirib, undan keyingi ishni e’tiborsiz qoldirish.
• Kuchli kompyuterda CPU sekinlashtirishsiz tekshirish.
• Teg-menejer orqali skriptlarni ularning narxini nazorat qilmasdan qo‘shish.