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/
Contents |
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 miffing with our old-timey stopwatch.
So we whipped up this code to start a timer when the page starts to load and stop when the browser detects the page has fully loaded.
It's not the most scientific way to test browsers, but it will do in a pinch and for lack of a better option.
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.
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 + "\ntook " + elapsedTime + " milliseconds or " + Number(elapsedTime/1000) + " seconds to load.\n\nYour browser and platform is: \n" + browser;
alert(msgString);
}
</script>
<div style="margin:40px 0px;"><h1>Webmonkey Stopwatch</h1></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.webmonkey.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.
/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.