CODEWITHSUNDEEP
htmlperformancedomrenderingperformance-testing
chrishomer
chrishomer

Reputation: 4920

Front End Web Page Performance Testing

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?

Upvotes: 5

Views: 7671

Answers (3)

Fizer Khan
Fizer Khan

Reputation: 92895

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.

Upvotes: 3

zeman
zeman

Reputation: 29

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78006

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

Upvotes: 3

Related Questions