Как анимации в шаблонах 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

inp, jet cache