A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
Browser Load Time Stopwatch
/skill level/
/viewed/
(�Introduction) |
(Code writes to a div in the page for easy copy/paste.) |
||
| (2 intermediate revisions not shown.) | |||
| Line 1: | Line 1: | ||
| - | == Introduction == | ||
Webmonkey needed a good way to time how fast a web page loads or to compare the load times of different browsers. You see, we have big thumbs and we keep messing up when we try our old-timey stopwatch. | Webmonkey needed a good way to time how fast a web page loads or to compare the load times of different browsers. You see, we have big thumbs and we keep messing up when we try our old-timey stopwatch. | ||
So we whipped up this code to start a timer when the browser starts and stops loading a web page. | So we whipped up this code to start a timer when the browser starts and stops loading a web page. | ||
| - | It's not the most scientific way to test browsers, but it will do in a pinch and for lack of a better option. | ||
<em>This page is a wiki. If you have any ideas to enhance the program or have anything to add, log in and edit this page.</em> | <em>This page is a wiki. If you have any ideas to enhance the program or have anything to add, log in and edit this page.</em> | ||
| - | + | == Introduction == | |
| + | Our web-based stopwatch is not the most scientific way to test browsers, but it will do in a pinch and for lack of a better option. | ||
== What you'll need == | == What you'll need == | ||
You'll need to simply copy and paste this code into a text editor and save the file as something like "loadtest.html" | You'll need to simply copy and paste this code into a text editor and save the file as something like "loadtest.html" | ||
| Line 30: | Line 29: | ||
var platform=navigator.platform; | var platform=navigator.platform; | ||
// This is the message that pops up informing you the elapsed time | // This is the message that pops up informing you the elapsed time | ||
| - | var msgString = "http://" + testSiteString + " | + | var msgString = "http://" + testSiteString + "<br />took " + elapsedTime + " milliseconds or " + Number(elapsedTime/1000) + " seconds to load.<br /><br />Your browser and platform is: <br />" + browser; |
| - | + | document.getElementById("results").innerHTML = msgString; | |
} | } | ||
</script> | </script> | ||
| - | <div style="margin:40px 0px;">< | + | <h1>Webmonkey Stopwatch</h1> |
| + | <div style="margin:40px 0px; border: 1px solid black; padding: 5px;" id="results"><small>Test is running...</small></div> | ||
<!-- This loads the web page in an iFrame and runs the showElapsedTime function when the page is loaded. --> | <!-- This loads the web page in an iFrame and runs the showElapsedTime function when the page is loaded. --> | ||
| - | <iframe id="testFrame" onload="showElapsedTime();" src="http://www. | + | <iframe id="testFrame" onload="showElapsedTime();" src="http://www.facebook.com/" width="640" height="800" scrolling="no" frameborder="2" ></iframe> |
| - | + | ||
</html> | </html> | ||
</pre> | </pre> | ||
Current revision
Webmonkey needed a good way to time how fast a web page loads or to compare the load times of different browsers. You see, we have big thumbs and we keep messing up when we try our old-timey stopwatch.
So we whipped up this code to start a timer when the browser starts and stops loading a web page.
This page is a wiki. If you have any ideas to enhance the program or have anything to add, log in and edit this page.
Contents |
Introduction
Our web-based stopwatch is not the most scientific way to test browsers, but it will do in a pinch and for lack of a better option.
What you'll need
You'll need to simply copy and paste this code into a text editor and save the file as something like "loadtest.html"
Load it up in the browser of your choice and a JavaScript message will tell you how long it takes to load the page.
Code and Explanation
<html>
<script language="javascript">
var startTime = new Date();
// The following function uses the time and calculates it against when the
// script first loaded, basically getting the start and end time. This function
// is run when the page finishes loading using the "onload=" DHTML element of
// the iframe
function showElapsedTime(){
var testSiteUrl = document.getElementById("testFrame").src;
var testSiteString = String(testSiteUrl).slice(testSiteUrl.indexOf("www"));
var endTime = new Date();
var elapsedTime = Number(endTime-startTime);
var browser=navigator.userAgent;
var platform=navigator.platform;
// This is the message that pops up informing you the elapsed time
var msgString = "http://" + testSiteString + "<br />took " + elapsedTime + " milliseconds or " + Number(elapsedTime/1000) + " seconds to load.<br /><br />Your browser and platform is: <br />" + browser;
document.getElementById("results").innerHTML = msgString;
}
</script>
<h1>Webmonkey Stopwatch</h1>
<div style="margin:40px 0px; border: 1px solid black; padding: 5px;" id="results"><small>Test is running...</small></div>
<!-- This loads the web page in an iFrame and runs the showElapsedTime function when the page is loaded. -->
<iframe id="testFrame" onload="showElapsedTime();" src="http://www.facebook.com/" width="640" height="800" scrolling="no" frameborder="2" ></iframe>
</html>
Suggested readings
We encourage you to add test results to enter your results in our our survey page.
Known Issues:
- The page will load only time the first page it comes across. That means that if there is a redirect, it will only time how long it took to load the redirect, not the actual page.
- There is no accounting for connection speed. To level the playing field, you might want to save the web page to your hard drive first, and run it from there.
- This page was last modified 23:33, 18 June 2008.
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.