Start Render calculation

Hi Pat,

I just ran a test on using the pagetest browser plugin in IE7 (windows vista).

Load Details:

Page load time: 1.890 seconds
Time to first byte: 0.061 seconds
Time to Base Page Downloaded: 0.145 seconds
Time to Start Render: 1.479 seconds
Time to Document Complete: 1.890 seconds
Time to Fully Loaded: 8.777 seconds

These numbers do not show the true user experience.
My experience was this:
the page is loading, I’m looking at an empty browser window, seeing the green download bar grow in the status bar of IE.
After circa 6 or 7 seconds the full page appears in the browser window.

This is not uncommon website loading behaviour in IE and it happens to me quite frequently.

It made me wonder: how is the Start Render time calculated?

Imo, the Start Render should tell me after how many seconds the first content appears in the browser window, making it the most important load time performance indicator.


Do you have the url to the test results? Start Render is clocked when the document has non-zero dimensions which is the first time that something could be displayed (and usually is but sometimes not). I’ve been thinking about ways to harden it to guarantee that something is actually visible but most things I have thought of are too CPU-intensive and would impact the actual measurements. That said, whatever the page you are measuring is doing in javascript in the onLoad handler looks like it may be holding up the actual display of the page.

That said, by-far the best way to measure the user experience is to use the DOM Element measurement which will measure until a specific piece of content is on the DOM. That way you can look for the actual content the user cares about (top news story, first div with content, etc) and measure to when the content they care about actually shows up. The biggest reason this is more important than start render is if you have a banner ad that blocks the loading of the content it will frustrate the users and the DOM element time will correctly measure it while the start render will just measure until the layout for the ad is complete.

I have also toyed around with other options for measurement points - measuring to when the width of the document stops changing, to when both dimensions stop changing, etc to see if any of those are better indicators. I’ve also toyed with the idea of grabbing screen shots at the various stages (and even wrote the code) but there are storage concerns with storing that many screen shots per test (may make it an option for registered users).

Feedback on things you’d like to see added or changed would be appreciated and I’ll see what I can do (the hardest part is usually trying to figure out how to present it to the user).

I uploaded the Waterfall image and Load Details txt to my VPS:


I like what you’re saying about measure until a specific piece of content is on the DOM and how this is better in a way than measuring Start Render (as it is defined/measured currently).
Just to check: this is already available on, via the Advanced Settings tab, correct?

Will this be available in a next release of the browser plugin?

About multiple screenshots…
What would be totally awesome is the option to have a video created.
The video shows what the user sees in the browser window while the page is loading. Output as a medium quality movie file, put in a .zip, …
Cool, right?
Probably not that easy to implement…

I’m gonna give the DOM element option a spin and see how it works for me.
Txs for the swift response!

[i]Off topic: the browser plugin version of Pagetest has the option Run Script.
There is no mentioning of how this works and what it does, in the Quick Start Guide ([url=][/url]).
I found the page though ([url=][/url]). Perhaps you can link to this page from the Quick Start Guide…


Thanks. The only way to set the DOM elements in the desktop version is to do it through a script (which is possible).

Yes, the DOM element is the option in the advanced tab - kind of a pain to do but once you get used to it it’s not so bad (the only painful part really is identifying the DOM element on the page you care about, particularly if you are comparing multiple sites).

On the video thing, a full video wouldn’t be possible but I could grab screen captures at every layout change (and possibly at a regular interval) and potentially compress it down as a low-res flv. It may not be that hard to actually implement, I’m more concerned about the storage requirements :slight_smile:

Hi Pat,

do you have an example of a script? Or should I just RTFM? :wink:

Video … storage requirements. What file size would such a .flv have?
Making this an option for members only would be a good move.

There are a couple of examples if you follow the link off the “script” tab - [url=][/url]

The full grammar (though maybe a little out of date is available here: [url=][/url]

If there’s something in particular you want to script just shoot it my way and I’ll work up a new example.