Solved

Check webpage loading time

Posted on 2006-11-17
7
1,351 Views
Last Modified: 2013-12-16
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
0
Comment
Question by:owonseed
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 7

Expert Comment

by:rangasuman
ID: 17969317
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
 
LVL 12

Assisted Solution

by:UnexplainedWays
UnexplainedWays earned 130 total points
ID: 17970177
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
 
LVL 28

Expert Comment

by:gamebits
ID: 17971229
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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
LVL 5

Accepted Solution

by:
wranlon earned 130 total points
ID: 17972748
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
 
LVL 2

Expert Comment

by:Messiadbunny
ID: 17975868
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
 

Author Comment

by:owonseed
ID: 17989100
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
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 18002684
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

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question