Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve INP for menu.js #593

Open
diggeddy opened this issue Jan 15, 2024 · 1 comment
Open

Improve INP for menu.js #593

diggeddy opened this issue Jan 15, 2024 · 1 comment
Labels
feature Features, refactoring, enhancements, improvements triage Awaiting review

Comments

@diggeddy
Copy link
Collaborator

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 diggeddy added the feature Features, refactoring, enhancements, improvements label Jan 15, 2024
@github-actions github-actions bot added the triage Awaiting review label Jan 15, 2024
@diggeddy
Copy link
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Features, refactoring, enhancements, improvements triage Awaiting review
Projects
None yet
Development

No branches or pull requests

1 participant