Оптимізація INP на Shopify: практичний посібник з покращення відгуку теми

Чому оптимізація INP на Shopify є критичною для бізнесу

Тривалий час оптимізація інтернет-магазинів на Shopify зводилася до базових речей: стиснення банерів, налаштування відкладеного завантаження зображень та зменшення кількості встановлених застосунків. Проте швидке початкове завантаження втрачає сенс, якщо інтерфейс зависає під час першої ж спроби взаємодії. Метрика Interaction to Next Paint (INP), що стала ключовим показником Core Web Vitals, оцінює саме реакцію інтерфейсу на дії користувача впродовж усієї сесії.

Якщо клієнт клікає на перемикач кольору товару, відкриває кошик чи вводить запит у рядок пошуку, а екран «завмирає» навіть на пів секунди, виникає відчуття нестабільного магазину. За вимогами Google, хороший показник INP не має перевищувати 200 мілісекунд. Перевищення цього порогу безпосередньо впливає як на ранжування у пошуковій видачі, так і на відсоток покинутих кошиків.

З чого складається затримка взаємодії

Кожна взаємодія на сторінці проходить три послідовні етапи, на кожному з яких можуть виникати затримки:

• Input Delay (затримка введення): час від фізичного кліку або тапу до моменту, коли браузер зможе запустити відповідний обробник події. Головна причина затримки — перевантажений головний потік JavaScript сторонніми скриптами.
• Processing Time (час обробки): тривалість виконання безпосередньо вашого JavaScript-коду.
• Presentation Delay (затримка відображення): час, необхідний браузеру для перерахунку стилів, перекомпонування сторінки та малювання нового кадру після завершення виконання скриптів.

Типові проблеми тем Shopify та способи їх вирішення

1. Перевантажені обробники варіантів товарів

У більшості тем зміна кольору чи розміру запускає масивний синхронний ланцюжок: оновлення ціни, перемальовування фотогалереї, зміну URL через History API, перевірку залишків та надсилання аналітичних івентів. Виконання цих дій в одному синхронному блоці гарантовано блокує головний потік.

Рішення полягає в оптимізації пріоритетів: спочатку миттєво оновлюйте візуальний стан елемента, на який натиснув користувач, після чого передавайте керування браузеру за допомогою scheduler.yield() або асинхронного таймера, а важкі завдання (галерею, аналітику) виконуйте наступним кроком.

2. Надмірне використання Section Rendering API

Сучасні теми нерідко звертаються до Section Rendering API під час кожного вибору опції та повністю замінюють великі фрагменти DOM-дерева отриманим HTML. Це спричиняє дорогі операції перерахунку макета (reflow). Замість перемальовування всієї секції оновлюйте точково лише ті вузли, де змінилися дані, а також скасовуйте попередні запити за допомогою AbortController, якщо покупець швидко перемикає варіанти.

3. Конфлікти віджетів і додатків у головному потоці

Віджети відгуків, онлайн-чати, спливаючі вікна апсейлів та трекінгові пікселі запускаються одночасно, конкуруючи за ресурси пристрою. Щоб усунути ці затримки:

• Перенесіть маркетингові теги та аналітику в ізольоване середовище Shopify Customer Events (Web Pixels).
• Завантажуйте важкі блоки (відгуки, чати) за вимогою: при досягненні секції на екрані або за першим кліком покупця.
• Регулярно очищайте кодову базу теми від залишкових скриптів видалених додатків у Liquid-файлах.

4. Неоптимізовані міні-кошики та живий пошук

Висувний кошик (cart drawer) повинен відкриватися миттєво з відображенням стану завантаження (skeleton screen), поки у фоні виконуються запити до /cart.js. Для «живого» пошуку обов'язково застосовуйте дебаунс (від 150 до 300 мс), щоб не генерувати десятки паралельних обчислень під час введення тексту.

Як контролювати результати

Для ефективного контролю використовуйте Chrome DevTools з увімкненим обмеженням швидкості процесора (CPU Throttling 4x/6x), що імітує роботу бюджетного смартфона. На реальних проєктах підключайте збір польових даних через бібліотеку web-vitals з модулем атрибуції. Це дозволить отримувати точну інформацію про те, який саме елемент інтерфейсу викликав просідання INP у реальних покупців, і вчасно нейтралізувати проблему.