1

I'm collecting data using the Navigation Timing API.

Specifically, these four metrics:

// Time spent during redirection
var redirectTime = performance.timing.redirectEnd - performance.timing.redirectStart;

// DNS query time
var lookupDomainTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart;

// TCP connection time
var connectTime = performance.timing.connectEnd - performance.timing.connectStart;

// Time to first paint, in milliseconds.
var firstPaintTime = window.chrome.loadTimes().firstPaintTime * 1000 - performance.timing.navigationStart;

I'm finding that on a regular basis redirectTime + lookupDomainTime + connectTime > firstPaintTime. If Chrome's first paint metric is calculated from navigationStart, then this means the first paint happens before any HTML has been downloaded. That seems impossible.

If firstPaintTime isn't calculated from window.performance.timing.navigationStart, from what point is it calculated?

crenshaw-dev
  • 7,504
  • 3
  • 45
  • 81
  • Possible duplicate of [Why First Paint is happening before DOMContentLoaded](https://stackoverflow.com/questions/34289535/why-first-paint-is-happening-before-domcontentloaded) – joshua miller Jan 31 '18 at 19:51
  • @joshuamiller I gave that answer a peek. It's conceivable the browser gets a first paint of the page before the HTML is completely downloaded (which is a separate question from whether DOMContentLoaded has fired). But I find it unlikely. What's more, I'm finding firstPaintTime < (redirectTime + lookupTime + connectTime), which should _never_ happen, because no content has been downloaded to paint. – crenshaw-dev Jan 31 '18 at 20:11
  • Your question asks why? I'm not sure if this answer will be satisfactory, but the answer is, because they can, or rather, why not. Painting as soon as possible improves the perceived load time, so they do. Is your question instead maybe rather, how, or even, when? Because the why seems obvious. You should edit your question to end with a very clear unambiguous on topic question. Right now it seems like a lot of observations. – Goose Jan 31 '18 at 20:20
  • @Goose edited for clarity. My questions are 1) how can a paint happen before any HTML is downloaded and 2) if it can't, from what point does Chrome calculate its first paint time? – crenshaw-dev Jan 31 '18 at 20:36
  • In that case, I think the proposed duplicate does a decent job of answer your question. Chrome creates a incomplete trees with what is has and starts painting at that point. That's as deep as I understand it. – Goose Jan 31 '18 at 20:41
  • @Goose that's only a sufficient answer if Chrome builds a paintable tree before having downloaded any HTML. While that's possible, it seems highly unlikely, enough to defeat the point of the first paint metric. – crenshaw-dev Jan 31 '18 at 20:44
  • @mac9416 Sounds like you understand the topic better than I, so I wish you luck. – Goose Jan 31 '18 at 21:08
  • @Goose I wouldn't count on that. :-) You may be 100% right, I just don't think there's enough information yet to prove it. I think JasonBluefire's answer/link may confirm/deny whether the DOMContentLoaded question is the same as this one. – crenshaw-dev Jan 31 '18 at 21:22

1 Answers1

2

This is done to allow the theme color or the background color of the last page/tab to stay around until the new page figures out the color it needs to be.

This prevents white flashes going from Dark page to Dark page.

You can read more about the changes last year to the initial paint here: https://bugs.chromium.org/p/chromium/issues/detail?id=470669 There is a rabbit hole of tickets and bugs, so you may have to explore to get a full picture.

JasonBluefire
  • 312
  • 5
  • 14
  • Interesting... so first paint could just be the previous page clearing, even before any HTML is received? I guess this would be a strong incentive to change to first-meaningful-paint, though I've found that metric to be _too_ conservative. – crenshaw-dev Jan 31 '18 at 20:49
  • Yeah, they have to paint something, to prevent the last page/tab from hanging around while getting ready to load the page. Before it was just white, but now they do a few things before the initial firstpaint like looking up the theme color, which is why it also does not match the window.performance.timing.navigationStart – JasonBluefire Jan 31 '18 at 20:55