Pl include firstPaint time in navigation timings

[gopalmor]

Chrome provides w.chrome.loadTimes().firstPaintTime and Internet-explorer provides window.performance.timing.msFirstPaint. It will be helpful to include first paint event in navigation timing API, so that all browsers provide this info in a consistent way. Thanks.

[igrigorik]

Related thread on public-webperf: https://lists.w3.org/Archives/Public/public-web-perf/2016Jun/0010.html

[spanicker]

To set up some context - FirstPaint is not a single metric but a series of major paint metrics:

1. first paint - literally the first paint, includes painting blank screen paint and white background
2. first non-white paint - excludes white background paint
3. first non-blank paint - this is when anything beyond document background is painted
4. first contentful paint - when some contentful thing (text, image, canvas, or SVG) is first painted.
5. first meaningful paint - first paint where the user feels that the primary content is visible.

Chrome has metrics corresponding to 3, ,4, 5. To start with -- I propose exposing #3 (first non-blank paint) and #4 (first contentful paint) on Nav Timing. (#5 will come in the future, we are not ready yet)

Here's the Explainer doc for the proposed metrics: https://docs.google.com/document/d/1kKGZO3qlBBVOSZTf-T8BOMETzk3bY15SC-jsMJWv4IE/edit#

Feedback is welcome.

[igrigorik]

/cc @stevesouders @andydavies @pmeenan @bluesmoon @nicjansma fyi..

[pmeenan]

+1. Would love to see this standardized.

What is the difference between 2 and 3 or 3 and 4 (i.e. what is 3 measuring)? If the page has a solid-color background would that trigger at 2 or 3? What if it has a background image? I assume everything else triggers at 4+, is there something else?

[bluesmoon]

I would be happy with 3 or 4.

My testing has shown that 1 (specifically in terms of clearing the screen) very closely corresponds to responseStart or the unload or pagehide event of the previous page if it does not support NavigationTiming. My guess is that browsers wait to clear the previous page from the screen until they are certain they are going to receive something from a requested resource.

boomerang actually uses the unload / pagehide time as a proxy for responseStart for non-navtiming browsers.

[spanicker]

To elaborate a bit on the difference between 2, 3 and 4:

2 will trigger on non-white (or solid color) document background

3 must be something beyond document background BUT non-contentful eg. border, element background etc. Today this is what is reported as firstPaint in chrome.loadTimes()

4 must be something contentful i.e. text, image, canvas, or SVG (background image case falls here in practice)

[igrigorik]

FirstPaint is not a single metric but a series of major paint metrics

^ just want to repeat and emphasize the above. Note that our long-term intent here is to expose multiple render related metrics. So, the question at hand is not which (3 or 4), but in which order they can be implemented (if they make sense, of course).

In practice, it may well be the case that for some sites 3 and 4 may be very close and are interchangeable, but that's not true for all sites, and further: we want to allow and encourage developers track deltas between these metrics to understand how/if their render performance is changing over time.

[andydavies]

Dumb question on #1 - assumes browser has a white background by default when clearing the window ready to start painting the new page - is this always true e.g. can a user set a preference or theme to make the default a different colour?

(never used a browser theme so not sure how they interact with this case)

[spanicker]

Yes the color of the theme should trump the white background -- otherwise it is a bug to first paint white. Although we've certainly encountered this bug :) For instance see: https://bugs.chromium.org/p/chromium/issues/detail?id=470669

[yoavweiss]

Huge +1. I'd love to see options 3, 4 and 5 exposed. (and totally understand that 5 will require some more time to be ready for specification)

[spanicker]

After further discussion and thought I'd like to revise this to propose #2 instead of #3 (in addition to 4 and maybe 5 in the future) The reason for this is that the site should be credited for quickly painting document background (brand colors) -- which is positive visual feedback to the user. More details in this doc: http://bit.ly/2c69hW1

Any concerns or comments?

[igrigorik]

Based on discussion at TPAC, I believe the conclusion was that we probably don't want to tie these metrics to Nav Timing - see https://github.com/w3c/charter-webperf/issues/32. Closing this, let's continue the discussion in the other thread.