CODEWITHSUNDEEP
javascriptperformancebrowserrenderingmonitoring
adpd
adpd

Reputation: 211

How can I monitor the rendering time in a browser?

I work on an internal corporate system that has a web front-end using Tomcat.

  1. How can I monitor the rendering time of specific pages in a browser (IE6)?
  2. I would like to be able to record the results in a log file (separate log file or the Tomcat access log).

Ideally, I need to monitor the rendering on the clients accessing the pages.

Upvotes: 8

Views: 30383

Answers (6)

Brian Low
Brian Low

Reputation: 11811

The Navigation Timing API is available in all modern browsers.

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

Upvotes: 9

Vlad Gudim
Vlad Gudim

Reputation: 23482

In case a browser has JavaScript enabled one of the things you could do is to write an inline script and send it first thing in your HTML. The script would do two things:

  1. Record current system time in a JS variable (if you're lucky the time could roughly correspond to the page rendering start time).
  2. Attach JS function to the page onLoad event. This function will then query the current system time once again, subtract the start time from step 1 and send it to the server along with the page location (or some unique ID you could insert into the inline script dynamically on your server).
<script language="JavaScript">
var renderStart = new Date().getTime();
window.onload=function() { 
   var elapsed = new Date().getTime()-renderStart;
   // send the info to the server 
   alert('Rendered in ' + elapsed + 'ms'); 
} 

</script>

... usual HTML starts here ...

You'd need to make sure that the page doesn’t override onload later in the code, but adds to the event handlers list instead.

Upvotes: 8

Zoltan
Zoltan

Reputation: 1

On Firefox you can use Firebug to monitor load time. With the YSlow plugin you can even get recommendations how to improve the performance.

Upvotes: 0

Nathan Osman
Nathan Osman

Reputation: 73195

Since others are posting answers that use other browsers, I guess I will too. Chrome has a very detailed profiling system that breaks down the rendering time of the page and shows the time it took for each step along the way.

As for IE, you might want to consider writing a plugin. There seems to be few tools like this on the market. Maybe you could sell it.

Upvotes: 0

pitpod
pitpod

Reputation: 399

Have a look at Selenium - they offer a remote control that can automatically start different browsers (e.g. IE6), load pages, test for specific content on the page. At the end reports are generated that also show the rendering times.

Upvotes: 0

Tomislav Nakic-Alfirevic
Tomislav Nakic-Alfirevic

Reputation: 10173

As far as non-invasive techniques are concerned, Hammerhead measures complete load time (including JavaScript execution), albeit in Firefox only.

I've seen usable results when a JavaScript snippet could be added globally to measure the start and end of each page load operation.

Upvotes: 0

Related Questions