Computing Load Time

[addyosmani]

@paulirish For kicks, I'm trying to use TimelineModel to compute a simple load metric similar to the Network panel's 'load' time based on loadEventEnd - fetchStart (there are a few variations on how to compute load, I just picked one at random for demonstration). Here's a simple repro:

const model = new window.TimelineModelBrowser(trace)
const events = model.timelineModel().mainThreadEvents()
const loadEventEnd = events.filter(TimelineFilters._filterEventsForLoadEventEnd)
const fetchStart = events.filter(TimelineFilters._filterEventsForFetchStart)

// Filters
function _filterEventsForLoadEventEnd (e) {
  return e.categoriesString.includes('blink.user_timing') && e.name === 'loadEventEnd'
}

function _filterEventsForFetchStart (e) {
  return e.categoriesString.includes('blink.user_timing') && e.name === 'fetchStart'
}

// Calculation
const loadTime = loadEventEnd[0].startTime - fetchStart[0].startTime

For a trace on a site like vevo.com over Wifi, this will output something like 320(ms) (the other ways of computing this result in a similar number). The DevTools network panel will however say that load occurred at ~1.2s.

It's unclear to me whether I'm using TimelineModel incorrectly here. I've noticed Lighthouse does some additional filtering for events and maybe I need to be filtering for loadEventEnd times that occur after FCP or FMP?

I'm dumb and not entirely sure so thought I'd ask someone more experienced with such things :) Any idea what I might be doing wrong?

[paulirish]

You don't still have a trace lying around that you got these kind of results with, do you?

[addyosmani]

@paulirish Yep! Just uploaded a verge trace here that exhibited the same lil problem :) https://drive.google.com/file/d/0BxcraNy3sgspNFQ1V2MxaW5SOWc/view?usp=sharing

[paulirish]

As discussed offline, it looks like this was because there were multiple frames at play. We want to filter down to only look at the primary frame and ignore other sub-iframes.

That general pattern is done here: https://github.com/GoogleChrome/lighthouse/blob/4350e67a9bf53a34dbf489859e0c783df82f5064/lighthouse-core/gather/computed/trace-of-tab.js#L57-L61

We tried this out offline and it did appear to solve the problem. \o/

This is a pretty important gotcha that's definitely not documented, so thanks for asking the question and apologies for it being a little odd to reason about. :)