3.3.3

Stop the first visit to a screen from stuttering

Walking into the library, settings or a game page for the first time
jerked; the second time was smooth. That gap is the whole diagnosis —
the cost is work each screen does once, and it was landing on top of
the animation.

Measured, first visits, before and after:

  library    55 frames /  5 stalls / 613ms of long tasks
          → 101 frames /  2 stalls / 177ms
  settings   68 frames /  4 stalls   → 68 /  2
  again      68 frames /  7 stalls   → 75 /  1
  game page  63 frames /  6 stalls   → 70 /  4

Four changes. Covers are lazy and decode off-thread, so a shelf of two
hundred no longer decodes two hundred pictures to show twelve.
content-visibility lets the browser skip laying out the cards below the
fold at all. The shelf is built in a fragment and put in once instead of
appended card by card. And the game page measured its banner on a 450ms
timer, which put the most expensive frame of the visit exactly halfway
through the transition — it hangs off the end of the transition now,
same work, nothing moving.

A fifth change was tried and reverted with a comment left behind:
moving will-change off the cards and onto :hover, which is the usual
advice, made the library go from 4 stalled frames to 47. The cards sit
under a backdrop-filter whenever a dialog opens, and filtering
unpromoted content rasterises the whole shelf every frame.

Also: opening one game straight after another showed a flash of the
previous game's banner, because an <img> keeps its old picture until
the new one decodes. It is hidden until the new one is ready and fades
in. Sampled every 25ms across the switch: no frame shows the old one.