Змінюються основні веб-показники і критерії для пошукових алгоритмів Google. Ці показники, вперше представлені у 2021 році для вимірювання користувацького досвіду, вірогідно, є найбільшим оновленням з часу впровадження. Отже, що таке Interaction to Next Paint, чим він відрізняється від FID і як його можна вдосконалити? Ця стаття пояснює все це.
Якщо ви маєте намір покращити взаємодію зі власним Веб-сайтом, нумо почнемо.
Що таке взаємодія з next paint (INP)?
Interaction to Next Paint (INP) — це показник швидкості відгуку Google, що вимірює, наскільки швидко сторінка реагує на введені користувачем дані. Зокрема, він вимірює часовий інтервал між введенням даних (до прикладу, натисканням кнопки) та оновленням вмісту сторінки.
Пояснення Google:
“INP використовує дані з API синхронізації подій для оцінки швидкості відгуку. Якщо через взаємодію сторінка перестає відповідати, це означає, що взаємодії з користувачем недостатньо. INP відстежує затримку всіх дій користувача зі сторінкою та повідомляє значення, нижче яких були всі (або майже всі) дії. Низький INP означає, що сторінка завжди може швидко реагувати на всі або більшість дій користувача”.
Google розуміє, що завантаження деяких взаємодій займає більше часу, ніж інших, занадто складних. Однак це не завжди призводить до поганої взаємодії з користувачем. Тож, замість вимірювання часу відгуку для всіх взаємодій, INP вимірює час відгуку (наприклад, поява випадаючого списку або значка завантаження), поки сайт не надасть візуального зворотного зв’язку. Вам не потрібно завершувати взаємодію повністю, Вам потрібно довести, що процес триває.
Важливо, щоб кожен веб-сайт мав хороший показник INP, але для інтерактивних веб-сайтів це надважливо. Це стосується і платформ соціальних медіа і магазинів електронної комерції. Поганий INP може призвести до зниження якості обслуговування користувачів, підвищення рівня відмов та як результат — втрати доходу.
Визначення взаємодії
Для розуміння, як працює INP і як його виміряти, необхідно визначення, що означає “взаємодія”.
Google бачить взаємодію групою подій, що відбуваються під час “одного логічного жесту користувача”.
Інакше кажучи, це не просто єдина подія. Наприклад, якщо натиснути кнопку на сенсорному пристрої, відбудеться кілька подій, таких як pointerup (коли миша неактивна) або pointerdown (коли миша натискає кнопку), які поєднані в одну. Google розглядає подію протягом найдовшого періоду часу як затримку взаємодії.
INP Google відстежує лише наступні взаємодії:
- Клацання миші
- Дотик до сенсорного екрана
- Натискання клавіші на клавіатурі
Google вимірює 3 компоненти:
- Затримка введення
- Час обробки
- Затримка в поданні
Затримка введення — це час від натискання користувачем кнопки до отримання візуальної відповіді. Залежно від обсягу коду, який виконується на сайті, це може зайняти від декількох до 100 мілісекунд.
Час обробки — необхідний термін для виконання коду у відповідь на дію користувача. Якщо внесено невелику зміну, це може зайняти мілісекунди.
Затримка відображення — це часові витрати браузера на прийняття рішення про те, де буде відображатися новий вміст. Цей період може сильно відрізнятись в залежності від складності сайту.
Порівняння FID та INP
Як зазначено у вступі, перехід до наступного paint замінить першу затримку введення (FID).
FID ще є показником швидкості відгуку сайту, але він вимірює лише першу взаємодію з користувачем та затримку, поки подія не буде оброблена, але не той час коли користувач побачить результат. На відміну від Interaction to Next Paint, який вимірює затримку взаємодії користувача зі сторінкою.
Визначення хорошого показника INP
Google надає чудові рекомендації щодо того, що є хорошим показником INP.
По-перше, Google розуміє, що за наявності таких відмінностей у функціональності пристрою користувача важко визначити, наскільки хороший чи поганий показник відгуку. Ось чому ми рекомендуємо орієнтуватися на 75-й процентиль завантажень сторінок як на мобільних, так і на настільних пристроях.
Щодо затримки:
- Якщо INP менше ніж 200 мілісекунд, ваша сторінка є адаптивною
- Якщо INP становить від 200 до 500 мілісекунд, сторінку потрібно доопрацювати
- Якщо INP більш ніж 500 мілісекунд, сторінка не є адаптивною
Чому Google переходить на INP?
У березні 2024 року INP має намір замінити FID як один з показників веб-продуктивності Google.
За даними Google, щодо використання Chrome вказують що 90% часу користувач проводить на сторінці після її завантаження. Це означає, що потрібно вимірювати не тільки затримку до першої події FID сторінки, але й затримку всіх взаємодій, які виконує INP.
Отже, з того часу, як FID перестав вимірювати затримку, він більше не виконує роботу з виявлення поганого користувацького досвіду.
Що робити: яким чином оптимізувати INP?
З огляду на важливість ключових веб-показників для користувацького досвіду та пошукової оптимізації, необхідно вимірювати і покращувати INP вашого сайту. Ось кілька рекомендацій, як це зробити:
Виміряйте INP
Першим кроком для покращення вашого INP є вимірювання ефективності сайту. Краще робити це “на льоту”, використовуючи дані відвідувачів сайту. Польові дані надають контекстну інформацію про взаємодію, яка спричинила затримку, а також виміряють INP.
Наразі, звіти Chrome UX — найшвидший та найпростіший спосіб отримати дані, у разі, якщо сайт відповідає вимогам. Якщо ні, ви можете використовувати постачальника послуг реального моніторингу користувачів (RUM), таких як Pingdom або Raygun, для створення польових даних.
Якщо вам бракує часу або обмежені бюджетом на збір даних, ми рекомендуємо використовувати інструмент PageSpeed Insights. Цікавою перевагою PageSpeed Insights є те, що для вимірювання INP використовуються польові та дані Lab, зібрані Google.
Для цього вам необхідно лише ввести URL-адресу та натиснути enter, і ви побачите оцінку INP.
Покращуйте взаємодію користувача з контентом
Відомо, що кожна взаємодія складається з трьох фаз:
- Час очікування введення
- Час обробки
- Затримка представлення контенту
Оскільки кожен етап взаємодії робить свій внесок у затримку, INP можна оптимізувати, зменшивши навантаження на процесор, необхідне на кожному етапі.
Затримка введення
Існує декілька стратегій, що використовуються для зменшення часу, необхідного для “введення”.
Оптимізація JavaScript Повільне виконання JavaScript спричиняє затримку при введенні. Ваші дії: мінімізуйте файли JavaScript, увімкніть стиснення GZip, використовуйте фреймворки JavaScript, такі як jQuery, використовуйте мережу доставки контенту (CDN) для доставки файлів JavaScript з сервера, розташованого ближче до користувача.
Далі, мінімізуйте багатопотокову активність. Велика кількість активності на сторінці (наприклад, зображення, відео) може сповільнити реакцію на введення. Втім, ви можете використовувати веб-воркер для самостійного відходу від основного потоку сайту.
Уникнення дублюючих взаємодій для скорочення часу очікування введення — ще одна працююча стратегія. Перекривання взаємодії виникає, коли відвідувач взаємодіє з одним елементом, а потім взаємодіє з іншим до того, як з’являється початкова взаємодія. Це часто трапляється, коли користувач вводить текст у поле форми з автопропозицією.
Видалення введення, скорочення зворотного виклику і скасування запиту на вибір, який надсилається за допомогою AbortController, розв’язує цю проблему.
Оптимізація часу обробки
Час обробки взаємодії можна покращити, мінімізувавши зворотні виклики подій (процеси, що виконуються у відповідь на введення користувача), наскільки це можливо. Якщо можливо, видаліть непотрібні зворотні виклики подій взагалі.
Якщо зворотні виклики подій необхідні, розділіть роботу на окремі завдання так, щоб спочатку виконувалися лише ті процеси, які є важливими для оновлення візуалізації. Розумним буде використання setTimeout для запуску зворотного виклику в окремому завданні. Покроковий посібник з оптимізації довгих завдань можна знайти у Google.
Оптимізація затримки відображення контенту
Зменшення DOM — ефективний спосіб прискорити швидкість відображення: DOM (Document Object Model) пов’язує веб-сторінки зі скриптами та мовами програмування. Якщо DOM невеликий, події відображаються швидше. Якщо розмір DOM більший, відповідно, рендеринг візьме значно більше часу.
Існує кілька способів зменшити розмір DOM:
- Видалення роздутого коду та плагіну
- Уникнення конструкторів сторінок
- Перетворення односторінкового сайту на багатосторінковий
- Уникнення складних декларацій CSS
- Зменшення глибини DOM до менш ніж 1400 вузлів
Де знайти індикатори INP?
Interaction to Next Paint (INP) незабаром стане частиною Core Web Vitals, і ви зможете знайти необхідні показники за допомогою інструменту Google PageSpeed Insights. Для цього необхідно ввести URL-адресу і ви отримаєте час у мілісекундах, який і є INP.
Який показник INP називають “хорошим”?
Згідно з Google, хороший показник INP — це менше ніж 200 мілісекунд; від 200 до 500 мілісекунд потребує покращення; погані показники — понад 500 мілісекунд.
Тож, INP є основним показником життєздатності веб-сайту і замінить FID у 2024 році. Це показник часу, необхідний веб-сайту, щоб відреагувати на дії користувачів. Менша затримка — краща продуктивність.
Оскільки Core Web Vitals є частиною алгоритму ранжування Google, рекомендується зменшити навантаження на процесор вашого сайту та оптимізувати INP за допомогою стратегій оптимізації коду.