🖱️ INP гэж юу вэ?
Та вэб хуудсан дээр дарж үзээд, юу ч болоогүй мэт санагдсан тохиолдол бий юу? Энэ хоцролт нь хэрэглэгчийн туршлагад шууд нөлөөлдөг бөгөөд Interaction to Next Paint (INP) хэмээх хэмжүүрээр хэмжигддэг.
INP гэж юу вэ?
INP нь хэрэглэгчийн харилцан үйлдэл (жишээ нь: товшилт, товч даралт) хийгдсэнээс хойш браузер дэлгэцийг дараагийн удаа шинэчлэх хүртэлх хугацааг хэмждэг.
- Бага INP → Хуудас илүү хариу үйлдэлтэй, хурдан санагдана.
- Их INP → Хэрэглэгчид хуудас удаан, хариу өгөхгүй мэт санагдана.
Яагаад INP чухал вэ?
Хэрэв INP өндөр байвал хэрэглэгчид бухимдаж, хуудсыг орхих магадлал нэмэгдэнэ. Харин INP-г оновчтой болговол хэрэглэгчид цаг тухайд нь хариу авч, туршлага нь сайжирна.
INP-г хэрхэн хэмжих вэ?
- Chrome DevTools
- Web Performance API
Эдгээр хэрэгслүүд нь хэрэглэгчийн харилцан үйлдлийн хоцролтыг хэмжихэд тусална.
INP-г сайжруулах аргууд
- 🧹 Main thread дээрх ажлыг багасгах
- ⚡ Event handler -уудыг оновчтой болгох
- 🎨 Хэрэглэгчийн үйлдэл бүрийг шуурхай визуал шинэчлэлт рүү холбох
🧪 Практик жишээ: Монголын онлайн банкны хуудас
Таныг интернэт банкны хуудас руу орж, “Гүйлгээ хийх” товчийг дарахад юу ч өөрчлөгдөхгүй мэт санагдаж, 2–3 секунд хүлээх тохиолдол гарч байсан уу? Энэ хугацаанд:
- Та дахин дарж үздэг
- Эсвэл буцаад хуудаснаас гардаг
- Зарим тохиолдолд гүйлгээ давхар хийгддэг
Энэ бол INP өндөр байгаагийн үр дагавар юм. Хэрэглэгчийн харилцан үйлдэл (товшилт) хийгдсэн ч дэлгэц дээр визуал хариу (жишээ нь: “Гүйлгээ хийгдэж байна…” гэсэн анимаци) удаан гарч ирдэг .
🔧 Яаж сайжруулах вэ?
- “Гүйлгээ хийх” товч дарагдахад шууд ачааллаж буй анимаци гаргах
- Арын процесс удаан байлаа ч визуал хариу өгч , хэрэглэгчийг тайвшруулах
- Event handler-ийг оновчтой болгож, main thread дээрх ажлыг багасгах
Дүгнэлт
INP-г ойлгож, оновчтой болгох нь вэб туршлагыг хурдан, хариу үйлдэлтэй болгох гол түлхүүр юм. Хэрэглэгчид бухимдахгүй, харин сэтгэл ханамжтайгаар таны вэбийг ашиглах болно.
Top comments (0)