INP та анімація в шаблонах (вплив)

Як анімації в шаблонах OpenCart впливають на INP
 

INP (Interaction to Next Paint) - це Core Web Vitals-метрика Google яка показує наскільки швидко сайт реагує на взаємодії користувачів. Чим менше час між кліком і наступним відмальованим кадром тим кращий досвід.

У шаблонах OpenCart часто використовуються ефекти - плавні виїзди меню панелей спливаючих вікон. Вони виглядають красиво але кожна додаткова анімація після кліку - це затримка рендеру. Користувач натискає на кнопку меню а сайт спочатку запускає transition або animate css ефект і лише потім показує контент. У результаті INP може вирости у два три рази навіть на швидкому сервері.
 

Типові проблеми

- Виїжджаюче головне меню з 300-500 мс затримкою
- Слайд панелі та модальні вікна з fade slide одночасно
- Анімації на властивостях що викликають reflow repaint (height width box shadow)
 

Як це відображається у Google PageSpeed

При аналізі сторінки PageSpeed фіксує реальний час між взаємодією та відображенням результату. Якщо на елементі є transition 300 мс користувач бачить реакцію лише після завершення анімації - INP збільшується
 

Що робити

- Мінімізувати або прибрати анімації на ключових інтерактивних елементах (меню панелі попапи)
- Якщо анімація потрібна - запускати миттєве відображення стану (відкрити меню) і лише після цього додавати візуальний ефект
- Використовувати (якщо вже ніяк не можливо без них) тільки короткі ефекти <100 мс
- Анімації поза першою взаємодією – можна запускати декоративні ефекти після того, як контент уже відкрився й користувач бачить результат (тобто асинхронно).
- Додати можливість у налаштуваннях шаблону вимикати анімації

Висновок

У красивих виїжджаючих меню та панелей є ціна - погіршення INP. Для швидкого сайту на OpenCart варто ставити продуктивність вище декоративних ефектів. Краще миттєво відкрити меню ніж змусити користувача чекати на завершення transition