generatepress icon indicating copy to clipboard operation
generatepress copied to clipboard

Improve INP for menu.js

Open diggeddy opened this issue 1 year ago • 1 comments

INP ( Interaction to Next Paint ) is one of the latest WebDev metrics that google loves to keep us underworked developer occupied with. In current tests the default GP mobile menu INP score falls within the accepted 200ms range. However it can easily be knocked out of the zone on long content pages or when other interactions are on the page.

You can read more about it on this here ( ironically CLS ridden site ) article:

https://web.dev/articles/inp

for testing in the browser we can use this script.

https://web.dev/articles/manually-diagnose-slow-interactions-in-the-lab#use_a_javascript_snippet

Oddly a noticeable improvement to the INP in menu toggle click can be made by inlining the menu.js script in the site footer.

But perhaps we need to review the actual script we are using ?

diggeddy avatar Jan 15 '24 13:01 diggeddy

We should also review the default menu opening behaviour which pushes the content down. As this requires the browser to repaint the entire page, which on long complicated pages could result in long tasks of recalculation. Lets look at options to overlay the drop down menu

diggeddy avatar Jan 31 '24 13:01 diggeddy