Blog : page load time with Jquery
page load time with Jquery
I want to calculate the page load time; This means from second 0 (a little jquery snippet was loaded) to second x, when the whole page is loaded.
i wonder if any one had an experience with it, also ideas how to implement it correctly will be apperciated.
please i don't need an extension, i already have firebug, i need a js solution
thanks :)
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>
var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(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:
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>
...
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.
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.
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
