How animations in OpenCart templates affect INP

INP (Interaction to Next Paint) - is a Core Web Vitals-metric by Google which shows how quickly a site responds to user interactions. The less time between a click and the next painted frame the better the experience.

In OpenCart templates effects are often used - smooth slide outs of menus panels pop-up windows. They look nice but each additional animation after a click - is a delay of render. A user clicks on a menu button and the site first runs a transition or animate css effect and only then shows content. As a result INP can increase two three times even on a fast server.
 

Typical problems

- Sliding main menu with 300-500 ms delay
- Slide panels and modal windows with fade slide at the same time
- Animations on properties that cause reflow repaint (height width box shadow)
 

How this appears in Google PageSpeed

When analyzing a page PageSpeed records the real time between interaction and displaying the result. If an element has a transition of 300 ms the user sees the reaction only after the animation finishes - INP increases
 

What to do

- Minimize or remove animations on key interactive elements (menus panels popups)
- If animation is needed - trigger instant state display (open menu) and only after that add the visual effect
- Use (if it is absolutely impossible without them) only short effects <100 ms
- Add an option in template settings to disable animations
 

Conclusion

In beautiful sliding menus and panels there is a price - worse INP. For a fast site on OpenCart it is better to put performance above decorative effects. It is better to open the menu instantly than to make the user wait for the transition to finish

inp, jet cache