I need to have a way or tools to test the actual perceived rendering time for the browser to render the entire page to users. Any suggestions?
The reason I ask is because firbug and Yslow only reports the DomContentLoaded and OnLoad time.
For instance, my application reports 547ms (onLoad:621ms) for the contents. But the actual content is rendered around 3 seconds. I know so because I actually counted 1, 2, 3 slowly from the moment I hit enter in the url field of the browser to the moment when content appears in front of my eyes. So I know 547ms nor 621ms DOES NOT represents the actual time it takes for the page to load.
Not sure if this helps. But my application
-
renders json data on the server side, save the data as a javascript variable along with the rest of the page’s html before server returns the entire html to browser
-
page loads Jquery 1.5 and Jquery template
-
jquery code grabs the json data from the variable defined at step 1
-
use jquery template to render the page.
Technically, no Ajax involved here and images on the page are all cached. I don’t see firebug downloads any of them.
[Edit]
What i’m trying to figure out is after the firebug reported onLoad time which in my case is 621ms, to the time the page is completed and loaded in my eyes (which is at least 3 seconds), what happened to the 2.4s in between? What took place there? Browser is doing something? Something is blocking? Network? what is it?
Google Chrome has excellent auditing built in. Your results will be skewed because it’s one of the fastest browsers right now, but it will give you exact measurements of how long it takes for Chrome to render. =)