5

I am interested in measuring and recording our page load performance AFTER the initial body is returned from the server. In other words, once the browser has the HTML to when it is done loading all images, css and javascript on the page and has finished rendering and executing the first jquery ready block.

What is the best way to run performance tests on this? Most of what I have read tends to focus on server response and data download. However, most of the time a user waits is after this. Is there anything out there to help with this in an automated way?

Improve this question
3
  • Do you need to automate user activity? Or just measure client-side time to render the page? Commented Feb 25, 2013 at 21:23
  • 'Load Testing' is not the same as 'web page load time performance'... just saying, title is confusing... Commented Feb 26, 2013 at 8:59
  • Sorry, you're right. I was thinking "Page Load" not "Server Load". Commented Feb 27, 2013 at 16:19

3 Answers 3

Reset to default
3

Chrome has a built-in profiler in the developer tools. CTRL+SHIFT+I on PC or Cmd+option+J on Mac.

With jQuery, DOM ready will happen before window load. So something like this should tell you the delta between DOM load and asset load: 

// When the DOM is loaded $(function(){ console.log('Start ' + new Date().getTime()); }); // When all the images are loaded $(window).load(function(){ console.log('End ' + new Date().getTime()); });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Beware of JavaScript time accuracy: ejohn.org/blog/accuracy-of-javascript-time
Any time lost or miscalculated from fetching the timestamp itself or from waiting until the next 15ms queue is negligible in my opinion. If you're getting to the point of benchmarking to improve fewer than 100ms on page load you're never going to get a ROI.
Of course, but it all depends on what exactly you are trying to profile. That's why I pointed it out. I've seen plenty of cases where folks try to time something on every iteration and wonder why their data is all over the place. You can only look at the bigger picture, or with many iterations, when comparing times in JavaScript.
3

You can try following real user monitoring services which provides clear picture of how your users are experiencing your site or web app in real time.

Improve this answer

1 Comment

When linking to your own site or content (or content that you are affiliated with, in this case Atatus), you must disclose your affiliation in the answer in order for it not to be considered spam. Having the same text in your username as the URL or mentioning it in your profile is not considered sufficient disclosure under Stack Exchange policy.
1

The web performance optimization (WPO) industry's go to tool for monitoring front-end performance is WebPagetest. It gives you very detailed analysis of the full load of a webpage including a waterfall graph that shows you how each asset is loaded by the web browser and where you might have problems. You also get screenshots of key browser events, filmstrips and videos. It really is an amazing open source tool and it's lead developer is employed by Google.

http://www.webpagetest.org

WebPagetest is not an automated solution though. SpeedCurve is a commercial service that runs on top of WebPagetest to automate the testing process and monitor your front-end performance. It also benchmarks your website against competitors and alerts you to problems with the build of your website. Disclaimer: I'm the creator of SpeedCurve.

http://speedcurve.com

Improve this answer

1 Comment

Are you the creator of SpeedCurve?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.