INP ko‘rsatkichi: sayt javob tezligini o‘lchash va tuzatish

INP nimani o‘lchaydi

INP — Interaction to Next Paint so‘zlarining qisqartmasi, Core Web Vitals ko‘rsatkichlaridan biri. U foydalanuvchi harakati (bosish, tegish, tugma) bilan brauzer ekranda natijani ko‘rsatgan lahza orasidagi vaqtni o‘lchaydi. Muhimi — kod qachon ishlagani emas, inson o‘zgarishni qachon ko‘rgani.

2024 yil martida INP oldingi FID ko‘rsatkichi o‘rnini egalladi. Biznes egasi uchun xulosa oddiy: sahifa javobgarligi endi qattiqroq baholanadi va Google e’tibor beradigan qulaylik ko‘rsatkichlari qatoriga kiradi. Bu yagona reyting omili ham, ‘birinchi o‘ringa chiqarish tugmasi’ ham emas. Biroq sekin sayt qidiruvdan qat’i nazar buyurtma va so‘rovlarni yo‘qotadi.

FID bilan farqi nimada

FID faqat birinchi o‘zaro ta’sirni va faqat ishlov berish boshlanguncha bo‘lgan kechikishni hisobga olardi. Shuning uchun sayt yaxshi baho olar, ammo ochilganidan bir daqiqa o‘tib ‘Savatga’ tugmasi qotib qolishi mumkin edi. INP esa tashrif davomidagi barcha harakatlarni va to‘liq siklni — kutish, qayta ishlash, chizish — hisoblaydi. Yakuniy qiymatga eng sekinlaridan biri kiradi.

Amaliy xulosa: FID bo‘yicha hammasi yashil bo‘lgan sayt INP’da yomon natija olishi mumkin. Katalogdagi bitta og‘ir filtr butun sahifa shablonining ko‘rsatkichini buzadi.

INP ko‘rsatkichi chegaralari va qayerdan ko‘rish

200 millisekundgacha qiymat yaxshi, 500 millisekunddan oshsa yomon hisoblanadi, oralig‘i yaxshilashni talab qiladi. Baho haqiqiy foydalanuvchilar ma’lumotiga asoslanadi, shuning uchun o‘z kompyuteringizdagi bitta o‘lchov uni tasdiqlamaydi.

Qayerdan qarash mumkin:

• Search Console, Core Web Vitals hisoboti: muammoli sahifa guruhlari, ya’ni alohida manzillar emas, shablonlar ko‘rinadi.
• PageSpeed Insights: sahifa yoki butun sayt bo‘yicha real ma’lumotlar.
• Chrome dasturchi vositalari, Performance bo‘limi: harakatni yozib olish va vaqt bo‘yicha taqsimot.
• Lighthouse: oddiy yuklashda INP’ni o‘lchamaydi. Timespan rejimida o‘zingiz sahifada harakat qilib, baholay olasiz.

Kechikish nimadan iborat

Har bir o‘zaro ta’sir uch qismdan tashkil topadi va ularning davosi turlicha.

Kirish kechikishi: brauzer boshqa ish bilan band va harakatni darhol qabul qila olmaydi. Odatda yuklangandan keyin ham ishlayotgan og‘ir skriptlar aybdor.

Qayta ishlash vaqti: hodisa ishlovchilari bajariladi. Bu yerda o‘zingizning kodingiz ko‘rinadi: savatni qayta hisoblash, tovarlarni saralash, formani tekshirish.

Ko‘rsatish kechikishi: brauzer uslub va joylashuvni qayta hisoblab, natijani chizadi. Sahifada elementlar qancha ko‘p bo‘lsa, bu bosqich shuncha uzoq cho‘ziladi.

Misol: Toshkentdagi onlayn do‘kon

Odatiy holatni ko‘raylik (tushuntirish uchun misol, aniq mijoz emas). Toshkentdagi kiyim do‘koni katalogida Meta piksel, analitika, onlayn chat, Telegramga o‘tish tugmasi, filiallar xaritasi va muddatli to‘lov vidjeti ulangan. O‘lcham filtri esa barcha kartochkalarni birdaniga qayta chizadi.

Dasturchining kuchli noutbukida hammasi bir lahzada ochiladi. Viloyatdagi xaridor arzon Android telefonda ‘M o‘lcham’ni bosadi, ekran bir soniya o‘zgarmaydi, u yana bosadi va filtr buziladi. Ehtimol, u Instagram yoki Uzumga ketadi. Reklama puli to‘langan, lekin xaridgacha yetib bormagan.

Kechikishning eng ko‘p uchraydigan sabablari:

• yuklashda asosiy oqimni band qiladigan og‘ir skriptlar;
• uchinchi tomon vidjetlari: chat, piksel, reklama teglari, xarita;
• bir vaqtning o‘zida juda ko‘p ish qiladigan bosish ishlovchilari;
• katta DOM — katalogda minglab element;
• har bir harakatda animatsiya va joylashuvni qayta hisoblash;
• React, Vue kabi freymvorklarda keraksiz qayta chizishlar.

Qadam-baqadam tuzatish tartibi

Hammasini birdaniga tuzatishga urinmang. Vaqtni tejaydigan ketma-ketlik:

• Search Console’da INP yomon bo‘lgan shablonlarni toping: katalog, mahsulot sahifasi, xizmat sahifasi.
• Harakatlarni zaif telefonda takrorlang yoki dasturchi vositalarida protsessorni sekinlashtirish rejimini yoqing.
• Profilni yozib, asosiy oqimni ushlab turgan uzun vazifalarni toping.
• Eng sekin harakatni tuzating: ishni qismlarga bo‘ling, avval javobni (tugma holati, yuklanish belgisi) ko‘rsating, qolganini keyin bajaring.
• Uchinchi tomon vidjetlarini birinchi harakatgacha yoki sahifa interaktiv bo‘lgunicha kechiktiring, keraksizlarini olib tashlang.
• Uzun tovar ro‘yxatlarini bo‘laklab chiqaring, menyudagi ichma-ich joylashuvni soddalashtiring.
• Yangi sekin harakat paydo bo‘lmaganini tekshiring va real ma’lumotlar yangilanishini kuting: ular birdaniga to‘planmaydi.

Odatiy xatolar

Birinchi xato: faqat laboratoriya balliga tayanish. U INP o‘rnini bosmaydi, chunki INP haqiqiy bosishlar bo‘yicha hisoblanadi. Ikkinchisi: saytni ish kompyuterida tekshirish. Xuddi shu skriptlar zaif protsessorda sezilarli uzoqroq ishlaydi, auditoriyaning katta qismi esa telefondan kiradi.

Uchinchisi: faqat bosh sahifani tekshirish. Muammo ko‘pincha katalog, savat va formalarda yashiringan. To‘rtinchisi: ‘tezlashtirish uchun’ yangi plagin o‘rnatish, u esa o‘zi qo‘shimcha skript qo‘shadi. Beshinchisi: tuzatgandan keyin hisobotda darhol o‘zgarish kutish: yangilanish vaqt oladi.

Nimani o‘zingiz qilasiz, nimani dasturchiga topshirasiz

Dasturchisiz ham uchinchi tomon skriptlarini ko‘rib chiqish mumkin: foydali bo‘lganlarini (javob berayotgan chat, reklama sozlangan piksel) qoldirib, unutilganlarini olib tashlang. Sahifadagi tovarlar sonini cheklash va saytni byudjetli telefonda sinash ham mumkin.

Muammo hodisa ishlovchilarida, joylashuvda yoki freymvorkdagi qayta chizishlarda bo‘lsa, profilirovshchiksiz bo‘lmaydi, bu dasturchi ishi. Click yoki Payme orqali to‘lov qabul qiladigan do‘konda buyurtma bosqichlarini alohida tekshiring: aynan shu yerda kechikish pulga tushadi.

markdev jamoasi bunday vazifalarni O‘zbekistonda sayt uchun SEO optimizatsiya doirasida ko‘radi: INP yomon shablonlarni topamiz, dasturchi uchun tuzatishlar ro‘yxatini tuzamiz va natijani real ma’lumotlarda tekshiramiz. Saytingiz nima sababdan sekinlashayotganini bilmoqchi bo‘lsangiz, vazifani biz bilan muhokama qiling.

Reklamadan oldin tekshiruv ro‘yxati

Meta Ads yoki Google Ads’ga pul sarflasangiz, avval sahifa bosishlarga javob berishini tekshiring. Quyidagilarni sinab ko‘ring:

• mobil menyuning ochilishi;
• katalog filtrlari va saralash;
• savatga qo‘shish;
• so‘rov formasini yuborish;
• xizmat sahifasida tab va akkordeonlarni almashtirish;
• chat va Telegram tugmasi ishi;
• yuqoridagilarning hammasi arzon telefonda.