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

Cap INP breakdowns to INP duration #528

Merged
merged 6 commits into from
Sep 27, 2024
Merged

Conversation

tunetheweb
Copy link
Member

Fixes #492

Modals (alert(), confirm(), print()) do give feedback to the user, but also block the main thread so the event processing doesn't end when this shows. However, from an INP point of view, the feedback is given and so the duration is set to that timestamp.

I think it should be possible add a test case for this, but wanna agree on the change before going to that effort.

src/attribution/onINP.ts Outdated Show resolved Hide resolved
Copy link
Member

@mmocny mmocny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made some nit comments, but pre-approving.

Probably best to validate carefully...

src/attribution/onINP.ts Outdated Show resolved Hide resolved
src/attribution/onINP.ts Outdated Show resolved Hide resolved
// If processingEnd has been capped to inpTime then presentationDelay is 0
// Else use the nextPaintTime
const presentationDelay =
processingEnd == inpTime ? 0 : Math.max(nextPaintTime - processingEnd, 0);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a fine temporary solution, but, consider just creating a variable such as "used_fallback_time", set up top when endTime < processingEnd, and re-use that everywhere.

(The goal is to expose a clue to event timing for this value, eventually.)

BTW the case where endTime is rounded to within 8ms of processingEnd is almost always another "used_fallback_time" example (i.e. when we actually dont have a paint)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer not to do that variable name. We haven't used a fallback time — Event timing has. We are always using the actual time given by that.

The current wording is similar to the LCP implementation in #527

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thats fine.


The goal for Event Timing will be to:

  • Expose presentation_time (possibly as renderTime to match other paint timing specs)
  • Expose fallback_time (might be named something else)
  • duration will be based on fallback_time || presentation_time, which is already is under the hood, but now you will know why.

Also, in hindsight, my suggestion of comparing with processingEnd only works if your event listener(s) caused the alert, but wouldn't work if some other task in the same animation frame did. Nor would it work for other cases of fallback_time like when you don't need next paint, or the page unloaded and hit visibilitychange as an alternative end time...

@tunetheweb tunetheweb changed the base branch from main to v5 September 27, 2024 10:17
@philipwalton philipwalton merged commit a8f43a8 into v5 Sep 27, 2024
6 checks passed
@philipwalton philipwalton deleted the cap-inp-processing-duration branch September 27, 2024 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Heads Up on Changes to INP Measurement When Interfered with JS Modal Dialogs
3 participants