search

tomusborne / generatepress

452 stars 89 forks source link

Improve INP for menu.js #593

Open diggeddy opened 10 months ago

diggeddy commented 10 months ago

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 commented 10 months ago

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