Front End Web Page Performance Testing

Question

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?

Answer 1

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());
});