ansaurus

Question

Answer 1

A:

Might you be better off using a browser plugin? Calculating with JavaScript will necessary underestimate page load time, since it won't include the time to load the jQuery snippet, and won't include the time between the browser sending the request and the webserver responding?

There's a Load Time Analyzer plugin for Firefox.

Dominic Rodger 2009-07-31 09:05:50

no i want it for every browser; this is because i'll be gather all loads time and making analytics with them later

Omar Abid 2009-07-31 09:07:54

Answer 2

A:

If you are doing this for the purpose of optimization, then I suggest you using Yslow. It is a Firebug-Firefox extension. It can show you page load time and a lot of other useful info.

maksymko 2009-07-31 09:06:25

Answer 3

A:

You can't really do this with jQuery since $(document).ready(); fires when the page has loaded.

You can do this with the YSlow Firebug plug-in for Firfox. If you want this to work on all browsers you will need to add serverside code to show how long it took when the first element is written to the bottom element.

If that isn't what you would like you can use a tool like Selenium and write a test to capture the time from open to end of waitForPageToLoad. Selenium works on all browsers

AutomatedTester 2009-07-31 09:07:13

very intensive, looking for something easy and simple, will browse it though

Omar Abid 2009-07-31 09:15:55

its not really intensive at all but I have been using it for years. There are some Selenium tutorials at http://www.theautomatedtester.co.uk/selenium_training.htm

AutomatedTester 2009-07-31 09:24:09

all i need is a few lines, a complete framework isn't really productive if you have a very little goal;what's better writing 3 lines of Javascript or 1 line in Jquery?

Omar Abid 2009-07-31 10:11:24

well I would use Selenium because you dont have to change your page for timings and you will be able to store the results in a database so you can keep tabs on it. Yes you can do this on the page but requires your page code to handle this when it doesnt really need to.

AutomatedTester 2009-07-31 10:24:34

Answer 4

+4 A:

As others have mentioned, this is not going to be terribly accurate. But this should work reasonably.

In your <head>, i.e., as early as possible:

<script type="text/javascript">
   var startTime = (new Date()).getTime();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
   $(window).load(function()
   {
       var endTime = (new Date()).getTime();
       var millisecondsLoading = endTime - startTime;
       // Put millisecondsLoading in a hidden form field
       // or AJAX it back to the server or whatever.
   });
</script>

The key is this behavior, from the jQuery docs:

When bound to the window element, the event fires when the user agent finishes loading all content within a document, including window, frames, objects and images.

Domenic 2009-07-31 09:21:34

you'll add mike houston tip in adding the first line of javascript in the "head", this will increase accuracy

Omar Abid 2009-07-31 10:09:55

Oh good point I just realized that I was assuming jQuery was loaded first, while in reality it should be loaded in between the two code snippets.

Domenic 2009-08-01 01:40:30

Answer 5

+1 A:

Since scripts execute as soon as they are parsed, I suggest that you put one script tag just inside the header, then the script to hook the page load event after you've loaded jQuery:

<html>
<head>
   <script>
      // Capture start time
   </script>
   ...
   <script src="jquery.js" />
   <script>
      $(window).load(function() {
         // Capture end time
      });
   </script>
...

That way you should be able to catch as much of the page load time as possible.

Mike Houston 2009-07-31 09:36:50

ansaurus

tags:

views:

answers:

page load time with Jquery

related questions