1 / 11

Towards improving FID

npm

2 / 11

What’s FID?

First Input Delay is the delta between:

  • timeStamp
  • Time right before handlers are about to begin running

For the first of the following:

  • keydown
  • mousedown
  • pointerdown followed by pointerup
  • click

3 / 11

Some successes of FID

  • Encourage people to break up their longtasks
  • Tap delay issue surfaced
    • Use mobile viewports
    • Chrome is planning to get rid of the delay for some of the existing cases

4 / 11

How do we want to improve FID?

  • Consider more than just the first input
  • Potentially include scroll begin
  • Evaluate a larger chunk of end-to-end latency

5 / 11

Evaluating more than just the first

We want to evaluate the following interactions, with multiple associated events:

  • Keyboard
    • keydown
    • keyup
  • Taps or drags
    • pointerdown and pointerup
    • touchstart and touchend
    • mousedown and mouseup
    • click
  • Scrolls: not necessarily blocked on any event

6 / 11

Need to associate Event to interaction

  • If we want to compute a metric value that associates the events of a single interaction, we want developers to have this association too. For example, the keydown-keyup match, etc.
  • This would be solved by the proposed interactionID which I’ve presented before.
  • Other ideas?

7 / 11

Enable measuring scrolling

  • We need a new API to do this as there is no way for developers to do this right now.
  • Scroll performance can be impacted by developers, for instance if they force scrolling to happen in the JS thread.
  • There is a need to measure initial scroll reaction (scroll begin).
  • Use cases for subsequent scroll reactions (scroll updates) would probably be better addressed by Frame Timing.

8 / 11

How can we expose initial scroll reactions?

  • New PerformanceEventTiming entry
    • Name (usually reserved for event type):
      • scrollbegin
      • “scroll” would be confusing with the scroll Event
  • New (Performance)ScrollTiming entry
  • Other?

9 / 11

Evaluating end-to-end of interaction

10 / 11

Heuristics are hard

  • Asynchronous work is hard to track
  • We can at least improve over FID by looking at the frame produced as a result of event handlers running.
    • “Next frame presented on screen” in the diagram

11 / 11

Questions or thoughts?