Using Chrome with `--headless` switch to measure user page load times

Question

I'm trying to improve the performances of my web server and would like to get an accurate measure on how long it takes the user to load the page. The way I imagined this would be to simulate concurrent requests from users and track how page load times change as I fine-tune various settings to get optimal results.

I'd like to use the latest snapshot of Chromium with the --headless switch to measure how long it would take the user to load the page, but since this is a relatively new feature and I'm not familar with all the possible switches, I'd appreciate if someone can share what they would run to get accurate results.

The only limitation I have is that I can't inject scripts or modify the response content in some other way that would be helpful for such a test.

Answer 1

This seems to be ok-ish. Taking a screenshot shows the page seems to be loaded and getting similar results between the first and subsequent requests, so I'm assuming caching is indeed disabled.

time chromium \
  --headless \
  --disk-cache-dir=/dev/null \
  --disable-gpu \
  --download-whole-document \
  --deterministic-fetch \
  https://www.stackoverflow.com

Notes

• this doesn't warm up the DNS entries on the initial request, so it'd probably be best to discard the first result
• the --disable-gpu flag isn't necessary, but there is a reported error with the current build
• opening up a remote debugging port could probably be useful to remove references to 3rd party sources that skew results or to have more control over what's considered a fully loaded page, say wait for some scripts to fetch additional resources, but it's a bit way over my head

Answer 2

I'm the author of Navalia, which is a higher abstraction over headless Chrome for node/TypeScript. You could easily do this with something like:

const Navalia = require('navalia')

const navalia = new Navalia({
  numInstances: 1,
  verbose: true,
})

navalia.startup()

navalia.register(async chrome => {
  const start = Date.now()
  await chrome.navigate('http://www.cnn.com/')
  console.log(`Total time to load page ${Date.now() - start}ms`)
})

If there are more features you would like, then feel free to make a ticket. One of the goals is abstracting away the pain of the Chrome switches + the CDP protocol.