INP: sahifa harakatlarga tezroq javob berishi uchun nima qilish

Interaction to Next Paint — Core Web Vitals ko‘rsatkichlaridan biri. U foydalanuvchi sahifada biror harakat qilganda — tugmani bosganda, menyuni ochganda, maydonga matn yozganda — ekranda javob qachon ko‘rinishini o‘lchaydi. 2024 yilda INP oldingi FID ko‘rsatkichi o‘rnini egalladi. Google yaxshi qiymat sifatida 200 millisekundgacha deb belgilagan.

INP nimani hisobga oladi

Ko‘rsatkich foydalanuvchi sahifada bo‘lgan butun vaqt davomidagi o‘zaro ta’sirlarni kuzatadi va eng sekinlaridan biriga yaqin qiymatni oladi. Ya’ni bitta og‘ir tugma ham INP’ni yomonlashtiradi, garchi qolgan hammasi tez ishlasa ham.

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

1. Kirish kechikishi — brauzer band, shuning uchun harakatni darhol qayta ishlay olmaydi
2. Qayta ishlash — harakatga bog‘liq kod bajariladi
3. Ko‘rsatish kechikishi — natija ekranga chiqquncha

Asosiy sabablar

• Asosiy oqimni uzoq band qiladigan og‘ir JavaScript
• Ko‘p uchinchi tomon skriptlari: chatlar, vidjetlar, reklama va analitika piksellari
• Katta DOM — sahifada juda ko‘p element
• Har bir bosishda butun sahifani qayta chizadigan kod
• Animatsiyalar va effektlar, ayniqsa zaif telefonlarda

Nima qilish kerak

Uzun vazifalarni bo‘lish. Katta hisob-kitoblarni kichik qismlarga ajratish, brauzerga orada javob berish imkonini berish.

Uchinchi tomon skriptlarini qayta ko‘rish. Har bir vidjet haqiqatan kerakmi? Ishlatilmaydiganlarini olib tashlang, qolganlarini kechiktirib yuklang.

Darhol ko‘rinadigan javob. Bosishdan keyin avval vizual javob bering — tugma holati, yuklanish belgisi — og‘ir ishni keyin bajaring.

DOM hajmini kamaytirish. Yashirin, lekin sahifada mavjud bo‘lgan katta bloklar, cheksiz ro‘yxatlar.

Freymvork optimallashtirish. React va shunga o‘xshash kutubxonalarda keraksiz qayta chizishlarni kamaytirish.

Odatiy muammoli joylar

• Mobil menyu ochilishi
• Katalogdagi filtrlar
• Savatga qo‘shish tugmasi
• Forma maydonlari, ayniqsa avtomatik tekshirish bilan
• Cookie va bildirishnoma oynalari

Qanday tekshirish

Haqiqiy ma’lumotlar. PageSpeed Insights va Search Console’dagi Core Web Vitals hisoboti — real foydalanuvchilar asosida. INP faqat haqiqiy o‘zaro ta’sirlar bilan to‘liq o‘lchanadi.

Laboratoriya. Lighthouse’ning oddiy rejimi INP’ni to‘g‘ridan-to‘g‘ri o‘lchamaydi, lekin Total Blocking Time ko‘rsatkichi asosiy oqim bandligini ko‘rsatadi. Timespan rejimida esa o‘zingiz harakat qilib, javobni o‘lchashingiz mumkin.

Dasturchi vositalari. Performance bo‘limida harakatni yozib olib, qaysi skript uzoq ishlaganini ko‘rish.

Zaif telefonlarni unutmang

Dasturchi kuchli kompyuterda muammoni sezmasligi mumkin. Tekshiruvni oddiy byudjetli telefonda yoki protsessorni sekinlashtirish rejimida o‘tkazing — ko‘p foydalanuvchilar aynan shunday qurilmalardan kiradi.

Ustuvorlikni belgilash

Barcha o‘zaro ta’sirlarni birdaniga tuzatishga urinmang. Avval eng ko‘p ishlatiladigan va savdo bilan bog‘liq harakatlarni tekshiring: menyu, filtr, savatga qo‘shish, forma yuborish. Ular tezlashsa, foydalanuvchi tajribasi va INP birdaniga yaxshilanadi.