Google-дың біз жылдар бойы үйреніп қалған Pagespeed құрылымы веб-сайттардың жылдам жүктелуін және қызмет көрсетуін қамтамасыз ету үшін құрылған. Өлшенетін параметрлерді жасау және Chrome нарықтағы үлесінен жиналған анонимді деректерді пайдалану арқылы Google бұл көрсеткіштерді SEO көрсеткіштері ретінде пайдаланады. 2022 жылы Next Paint-ке өзара әрекеттесу (INP) енгізілгеннен кейін назар тек бетті жүктеу жылдамдығынан веб өнімділігінің кеңірек перспективасына ауысты. INP беттің қаншалықты жылдам жүктелетінін ғана емес, сонымен қатар беттегі пайдаланушы әрекеттесулерінің қаншалықты жылдам өңделетінін де өлшейді. Негізінде, ол сайтты шарлау тәжірибесін Pagespeed көрсеткішіне айналдырады.
Керемнің блогында, «Жалпы өзара әрекеттесу кешігуі» термині осы тұжырымдамаға жақсы сәйкестік ретінде ұсынылады, оны Google өз бейнесінде жақсы түсіндіреді. Дегенмен, бұл көрсеткішті толық түсіну үшін келесі бөлімдерде тақырыпты тереңірек қарастырамыз.
INP ұзақтығының түсіндірмесі қандай?
INP ұзақтығы мыналарды қамтиды:
- Пайдаланушының бетпен әрекеттесуі мен оқиға өңдеушісінің орындалуы арасындағы уақыт.
- Сценарийдің орындалу уақыты.
- Кодты орындаудан пайдаланушыға нәтижені көрсетуге дейінгі уақыт.
Бұл процестер әдетте миллисекундтарда жүреді, бірақ мобильді құрылғыларда, әсіресе CPU қуаты төмен ескі Android телефондарында мұндай кешігулер (кідіріс) жиі байқалуы мүмкін. Айта кетейік, INP деректері, басқа Lighthouse деректері сияқты, анонимді түрде жиналады және осы деректер негізінде бағаланады. 75-ші процентиль. Сондықтан, мақсат тек жоғары деңгейлі құрылғыларда емес, орташа құрылғыларда жақсы жұмыс істейтін қолданбаларды жасау.
INP ұзақтығының нақты өмірлік мысалдары
Міне, осы тұжырымдаманы түсіндіру үшін күнделікті кіретін интернет беттеріндегі кейбір нақты мысалдар:
Электрондық коммерция сайтында мекенжайды енгізу
Электрондық коммерция сайтында сатып алып, жөнелту мекенжайын енгізген кезде алдымен провинцияны таңдайсыз. Содан кейін ауданды таңдау үшін таңдау жолағын басқан кезде, Ajax нәтижесінің жүктелуін біраз күтесіз және белгілі бір уақыттан кейін аудан ақпараты жүктеледі. Бұл INP жақсы мысалы. Бұл мысалдағы пайдаланушы тәжірибесін жақсарту пайдаланушыны Ajax процесі туралы хабардар ету үшін «жүктеу көрсеткішін» қосуды қамтуы мүмкін.
Таңдау сұрыптау
Өнім тізімі беттерінде сүзгілерді пайдаланған кезде, құсбелгіні басқаннан кейін сүзілген өнімдер дұрыс басқарылмаса, ол INP көбейтеді. Күрделі JS пайдалану және сүзгі әрекеттері кезінде пайдаланушы тәжірибесін ескеру INP мәнін мүмкіндігінше жоғары ұстауға көмектеседі.
Өнім фотогалереялары
Өнімнің егжей-тегжейлі беттеріндегі өнім фотосын басқаннан кейін пайдаланушылардың фотогалереяның жүктелуін күтетін уақыты INP-ге ықтимал әсер етуі мүмкін.
Брондау түймесі
«Брондау жасау» түймесін басу мен келесі бет арасындағы өзара әрекеттесу кешігуі INP мысалы болып табылады.
Себетке қосу түймесі
«Себетке қосу» түймесін басқан кездегі кідірістің миллисекундтары және элементтің себетке қосылғаны немесе қосылмағаны туралы сұрақ INP-ны жақсы анықтайды.
Осы мысалдардан көрініп тұрғандай, INP тұзақтары SEO және тікелей түрлендіру жылдамдығына әсер ететін сценарийлерде бар.
INP қалай жақсартуға болады?
- Жаңартылған JS Frontend кітапханаларын пайдаланыңыз: Vue, React және Angular сияқты заманауи JS алдыңғы кітапханаларын пайдалану арқылы өнімділікті жақсарту пайдалы, өйткені олар өнімділік пен қайта пайдалануға болатын артықшылықтарды ұсынады.
- JS кітапханаларының күрделілігін азайту: Күрделі JS кітапханаларын пайдалану ұсынылады. Жеке мен мүмкіндігінше jQuery-ден аулақ болуды ұсынамын.
Қабылданатын INP метрикалық деңгейлері
үшін шекті мәндер жақсы, орташа және нашар INP деңгейлері 200 миллисекунд және 500 миллисекунд. INP-ді осы шектерде ұстау жақсы пайдаланушы тәжірибесін және жалпы веб өнімділігін сақтау үшін өте маңызды.
