Структура Google Pagespeed, до якої ми звикли протягом багатьох років, побудована на забезпеченні швидкого завантаження та обслуговування веб-сайтів. Виробляючи параметри, які можна вимірювати, і використовуючи анонімні дані, зібрані з частки ринку Chrome, Google використовує ці показники як показники SEO. З появою Interaction to Next Paint (INP) у 2022 році фокус змістився з простої швидкості завантаження сторінки на ширшу перспективу веб-продуктивності. INP вимірює не лише швидкість завантаження сторінки, але й швидкість обробки взаємодії користувача на сторінці. По суті, це перетворює навігацію сайтом на показник швидкості сторінки.
На блозі Керема, запропоновано термін «Загальна затримка взаємодії» як добре підходить для цієї концепції, яку Google також добре пояснює у власному відео. Однак, щоб повністю зрозуміти цей показник, ми глибше заглибимося в тему в наступних розділах.
Яке пояснення тривалості INP?
Тривалість ІНП включає:
- Час між взаємодією користувача зі сторінкою та виконанням обробника події.
- Час виконання сценарію.
- Час від виконання коду до відображення результату для користувача.
Ці процеси зазвичай відбуваються протягом мілісекунд, але на мобільних пристроях, особливо на старих телефонах Android із низькою потужністю ЦП, такі затримки (затримка) часто можуть бути помітними. Варто зазначити, що дані INP, як і інші дані Lighthouse, збираються анонімно та оцінюються на основі 75-й перцентиль. Таким чином, мета полягає в тому, щоб створювати програми, які добре працюють на середніх пристроях, а не лише на пристроях високого класу.
Реальні приклади тривалості INP
Ось кілька реальних прикладів із інтернет-сторінок, які ми відвідуємо щодня, щоб пояснити цю концепцію:
Введення адреси на сайті електронної комерції
Коли ви здійснюєте покупки на сайті електронної комерції та вводите адресу для відправлення, ви спочатку вибираєте провінцію. Потім, коли ви натискаєте поле вибору, щоб вибрати район, ви деякий час чекаєте, поки завантажиться результат Ajax, і через певний час завантажується інформація про район. Це хороший приклад ІНП. Покращення взаємодії з користувачем у цьому прикладі може передбачати додавання «індикатора завантаження», щоб інформувати користувача про процес Ajax.
Сортування Вибір
Під час використання фільтрів на сторінках зі списком продуктів, якщо відфільтровані продукти не керуються належним чином після натискання прапорця, це збільшить INP. Використання менш складного JS і врахування досвіду користувача під час операцій фільтрації може допомогти зберегти значення INP якомога вищим.
Фотогалереї продуктів
Час, який користувачі чекають завантаження фотогалереї після клацання фотографії продукту на сторінках з інформацією про продукт, потенційно може вплинути на INP.
Кнопка бронювання
Затримка взаємодії між натисканням кнопки «Забронювати» та наступною сторінкою є прикладом INP.
Кнопка «Додати в кошик».
Мілісекунди затримки під час натискання кнопки «Додати в кошик» і запитання, чи був товар доданий у кошик чи неправильно, визначають INP.
Як видно з цих прикладів, пастки INP присутні в сценаріях, які впливають як на SEO, так і на коефіцієнти прямої конверсії.
Як покращити INP?
- Використовуйте сучасні бібліотеки JS Frontend: Підвищення продуктивності за допомогою сучасних інтерфейсних бібліотек JS, таких як Vue, React і Angular, є корисним, оскільки вони забезпечують продуктивність і багаторазове використання.
- Мінімізуйте складність бібліотек JS: Рекомендується використовувати менш складні бібліотеки JS. Особисто я рекомендую якомога більше уникати jQuery.
Прийнятні метричні рівні INP
Порогові значення для хороший, середній і поганий рівні INP становлять 200 мілісекунд і 500 мілісекунд. Підтримання INP нижче цих порогових значень має вирішальне значення для підтримки хорошої взаємодії з користувачем і загальної продуктивності Інтернету.
