Check webpage loading time

Hi,

I'm looking for a way to figure out how long does a webpage take to finish loading in the browser. My webpage is primarily in JSP. Is there a way to use Javascript, or JSP to display the loading time for each page?

I'm testing the web app on different server, and I need to find out how much different in speed each server can serve up the page.

Please let me know if you have any suggestion.

Thanks!

Owon.Seed
owonseedAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
wranlonConnect With a Mentor Commented:
Hi,

A little bit ago I wrote an article (with same code) on developing passive Web page monitors: http://www.imnmotion.com/documents/html/technical/dhtml/monitor.html

In a nutshell, you can figure out the loading time by tracking timestamps for the following:

1) timestamp when user left previous page
2) timestamp from top of current page
3) timestamp from bottom of current page
4) timestamp from page load (window.onload)

You can collect these values by doing the following:

1) Attach an event handler to the unload, and set a cookie with the current time (call this FETCH_DATE).  You'll want to probably include a hash of the URL so you can correlate the time value between pages.

2) Add a bit of javascript at the top of the Web page, in the HEAD section, and collect the date (eg: var TOP_DATE = new Date().getTime();)

3) Add a bit of javascript at the bottom of the Web page, before the end of the BODY, and collect another date (eg: var BOTTOM_DATE = new Date().getTime();)

4) Add a bit of javascript to a window.onload to collect the date (eg: var LOAD_DATE = new Date().getTime();) and then  figure out your perf metrics:  latency = TOP_DATE - FETCH_DATE, parse time = BOTTOM_DATE - TOP_DATE, render_time = LOAD_DATE - TOP_DATE, and overall response time is TOP_DATE - FETCH_DATE (or - TOP_DATE if FETCH_DATE isn't available).

That will give you a general idea of page performance.  It won't give you network performance, but it will give you an idea of what the end-user's performance was.
0
 
rangasumanCommented:
That would be very hard to determine as it depends on several factors like internet speed, browser, operating system etc. Although some of the web editors give an approximate load timing for static pages, dynamic pages coming from a server may differ vastly depending on the server load and other characteristics.
0
 
UnexplainedWaysConnect With a Mentor Commented:
Here's something i quickly wrote up to give you an idea.  However, this doesn't include a trip to the server, its how long it takes to download the content's of the page.


What you could do is that this and expand on it.  I would start with a pop up window.  Do the same thing, take a time stamp and then the test page load's in the window, and have the same type of 'onload' thing in the test page where it talks back to the parent window, who gets the second time and does the subtraction.  Only problem is that it includes the speed of opening a new window. However if your testing on the same computer for different server's the offset would be the same.


Just an idea.


<html>
<head>
<script language=javascript>

      
      startTime = new Date();
      
      function DoThat()
      {
            finishTime = new Date();
            duration = finishTime - startTime;
            durToTime = new Date(duration);

            toPrint = duration+"\n\n";
            toPrint += "Seconds: "+durToTime.getSeconds()+"\n";
            
            alert(toPrint);      

      }

</script>
</head>
<body onload=DoThat()>

      <img width=200 src="http://www.ibiblio.org/wm/paint/auth/durer/large-turf.jpg">

</body>
</html>
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
gamebitsCommented:
You need to use FireFox and dowload the Web Developer toolbar, once you have that open the page you want to test, in the browser toolbar under Tools there is an option "View Speed Report" that will give you a lot of information on your loading time, including Analysis and Recommendation.

Gamebits
0
 
MessiadbunnyCommented:
There's also webpages that will tell you how long it takes to download all the materials on your website and give recommendations on how to reduce loading times.  There's one here:

http://www.websiteoptimization.com/services/analyze/
0
 
owonseedAuthor Commented:
The pages I'm testing requires user login, therefore I won't be able to use the Firefox addon and also the websiteoptimization web service. I do find them usefull for my other webpage performance testing however.

I'd implement the method that UnexplainedWays and wranlon suggested. They are both similar, hence I'd give the same point to both of them.

Thanks all for the suggestion.
0
 
UnexplainedWaysCommented:
I was thinking about reading the page from the server, but then you would been to find and download each file associated with it, parse the page etc.

So it would be alot easier to write something client side.


Glad i could help :]
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.