By Основні веб-показники та критерії в алгоритмах пошуку Google – змінюються. Цей набір показників, вперше представлений ще у 2021 році для вимірювання взаємодії з користувачем, отримує, мабуть, найбільше оновлення з моменту його запуску.
Зокрема, оприлюднено новини у березні 2024 року Google замінить затримку першого введення (FID) на Interaction to Next Paint (INP).
Отже, що таке Interaction to Next Paint, як воно порівнюється з FID і як його можна покращити? У цій публікації ми все роз’яснено.
Якщо ви готові покращити взаємодію зі своїм сайтом, давайте почнемо.
Що таке взаємодія з наступною фарбою (INP)?
Interaction to Next Paint (INP) — це показник швидкості відгуку від Google, який вимірює, наскільки швидко ваша сторінка реагує на вхідні дані людини. Зокрема, він вимірює проміжок часу між введенням даних користувачем (наприклад, натисканням кнопки) і оновленням вмісту сторінки.
Або, якщо ви шукаєте визначення Google:
«INP оцінює швидкість реагування, використовуючи дані з Event Timing API. Якщо взаємодія призводить до того, що сторінка перестає відповідати, це означає погану взаємодію з користувачем. INP спостерігає затримку всіх взаємодій користувача зі сторінкою та повідомляє одне значення, нижче якого були всі (або майже всі) взаємодії. Низький INP означає, що сторінка завжди могла швидко реагувати на всі або переважну більшість взаємодій користувача».
Google розуміє, що деякі взаємодії завантажуються довше, ніж інші, особливо складні. Але це не обов’язково спричиняє погану взаємодію з користувачем. Таким чином, INP вимірює не час відповіді на всю взаємодію, а час відповіді, доки ваш сайт не надасть певної форми візуального зворотного зв’язку (наприклад, появи спадного меню або значка завантаження). Не обов’язково завершувати взаємодію повністю, потрібно лише довести, що процес іде.
Для кожного веб-сайту важливо мати хорошу оцінку INP, але це особливо важливо для інтерактивних веб-сайтів, таких як платформи соціальних мереж і магазини електронної комерції. Поганий INP створює погану взаємодію з користувачем, що може призвести до вищого показника відмов і, зрештою, втрати доходу.
Визначення взаємодій
Щоб зрозуміти, як працює INP, і правильно його виміряти, нам потрібно зрозуміти, що означає «взаємодія».
Google визначає взаємодію як групу подій, які відбуваються під час «одного й того самого логічного жесту користувача».
Іншими словами, це не просто одна подія. Наприклад, натискання кнопки на пристрої з сенсорним екраном може містити кілька подій, у тому числі події pointerup (коли миша неактивна) і pointerdown (коли миша натискає кнопку), усі об’єднані в одну. Google зараховує подію з найдовшою тривалістю як затримку взаємодії.
INP від Google спостерігає лише такі взаємодії:
- Клацніть мишкою
- Натискання на сенсорний екран
- Натискання клавіші на клавіатурі
Загалом, Google вимірює три компоненти:
- затримку введення;
- час обробки;
- затримку презентації.
Затримка введення – це час між натисканням користувачем кнопки та отриманням візуальної відповіді від кнопки. Залежно від того, скільки коду запущено на вашому веб-сайті, це може зайняти від пари до сотні мілісекунд.
Час обробки – це час, який потрібен для запуску коду у відповідь на взаємодію користувача. Це може тривати мілісекунди, якщо внесено лише невеликі зміни.
Затримка презентації – це час, який ваш браузер витрачає на визначення місця появи нового вмісту. Ця тривалість може значно відрізнятися залежно від складності вашого веб-сайту.
Порівняння FID з INP
Якщо ви пропустили це у вступі, Interaction to Next 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 полягає в тому, що він використовує польові дані, зібрані Google, і дані Lab для вимірювання вашого INP.
Просто введіть свою URL-адресу, натисніть enter, і вам буде запропоновано оцінку INP.
- Оптимізуйте взаємодію між контентом та юзером
Як вже згадувалось, кожну взаємодію можна розбити на три різні етапи:
- Затримка введення
- Час обробки
- Затримка презентації контенту
Оскільки кожен етап взаємодії сприяє затримці, ви можете оптимізувати свій INP, зменшивши обробку ЦП, необхідну на кожному етапі.
2.1 Оптимізація затримки введення
Є кілька стратегій, які можна використати, щоб скоротити час, потрібний для «введення».
Оптимізація JavaScript — це перше. Повільне виконання JavaScript може спричинити затримки введення, але ви можете виправити це, мінімізувавши файли JavaScript, увімкнувши стиснення GZip, використовуючи фреймворк JavaScript, наприклад jQuery, і використовуючи мережу доставки вмісту (CDN) для доставки файлів JavaScript із сервера, який знаходиться ближче до вашої аудиторії. .
По-друге, мінімізація активності потоку. Коли на вашій сторінці багато активності (зображення, відео тощо), це може сповільнити відповідь на введення. Але ви можете використовувати веб-воркер, щоб самостійно втекти від основної нитки вашого сайту.
Уникнення накладення взаємодії — ще одна стратегія, яку можна використати для зменшення затримки введення. Перекривання взаємодії відбувається, коли відвідувач взаємодіє з одним елементом, а потім з іншим елементом до того, як буде відображено початкову взаємодію. Це звичайне явище, коли користувачі вводять текст у поля форми з підтримкою автопропозицій.
Вирішіть проблему, усунувши вхідні дані, щоб зменшити зворотні виклики, і використовуючи AbortController для скасування вихідних запитів на вибірку.
2.2 Оптимізація часу обробки
Ви можете оптимізувати час обробки ваших взаємодій, змусивши зворотні виклики подій (процеси, які запускаються у відповідь на введення користувача) виконувати якомога менше роботи. По можливості повністю видаліть непотрібні зворотні виклики подій.
Якщо необхідні зворотні виклики, розділіть роботу на окремі завдання та переконайтеся, що спочатку виконуються лише основні процеси, необхідні для візуальних оновлень. Найкращий спосіб зробити це — використовувати setTimeout для запуску зворотних викликів в окремому завданні. Якщо ви не впевнені, як це зробити на практиці, Google має докладний посібник з оптимізації довгих завдань.
2.3 Оптимізація затримки презентації контенту
Зменшення розміру DOM є ефективним способом прискорити швидкість презентації. DOM або об’єктна модель документа з’єднує веб-сторінки зі сценаріями та мовами програмування. Коли розмір DOM невеликий, події швидко відображаються. Коли розміри DOM великі, рендеринг займає набагато більше часу.
Ви можете зменшити розмір DOM кількома способами:
- Видаліть роздутий код і плагіни
- Уникайте використання конструкторів сторінок
- Перетворіть односторінковий веб-сайт на кілька сторінок
- Уникайте складних декларацій CSS
- Ви хочете прагнути до глибини DOM не більше 1400 вузлів.
Де знайти показники INP?
Оскільки Interaction to Next Paint (INP) незабаром стане частиною Core Web Vitals, ви можете знайти відповідні показники за допомогою інструмента Google PageSpeed Insights. Просто введіть свою URL-адресу, і ви отримаєте час у мілісекундах, який є вашим INP.
Що таке «хороший» бал INP?
Гарна оцінка INP за даними Google дорівнює або менше 200 мілісекунд. Все, що становить від 200 до 500 мілісекунд, потребує покращення, а все, що перевищує 500 мілісекунд, вважається поганим.
Висновок
INP — це показник Core Web Vitals, який замінить затримку першої взаємодії FID у 2024 році. Це показник часу, який потрібен вашому сайту, щоб відповісти на взаємодію користувача. Чим менша затримка, тим краща продуктивність.
Оскільки Core Web Vitals є частиною алгоритму ранжування Google, ми наполегливо рекомендую вам оптимізувати свій INP, зменшивши обробку ЦП на вашому сайті за допомогою стратегій оптимізації коду.
Андрій Панченко,
Panchenko.Agency
