WebPageTest: The little known but great webpage benchmarking tool

When it comes to testing how fast a webpage loads, many of us are familiar with Firebug/Yslow tool (installable as a Firefox browser plug-in). Firebug/Yslow is a fantastic plug-in for Firefox, it gives a wealth of information about any webpage as your browser renders it. This is a must have for any webmaster’s toolbox. Unfortunately, using Firebug/Yslow is very ad-hoc, which is great for troubleshooting, but tedious when you want to export data or take more than 1 snapshot.

After some searching I came across another tool – webpagetest.org. This site tests your url and presents its findings and recommendations on optimizating your webpage, with some nice Firebug/Yslow-like waterfall diagram and charts. Check out the results for this site as tested from Dulles, Virginia in the US. Good stuff right?

What’s really great about this is that Pat Meenan, the man behind this tool, has generously made available for download a desktop/browser version and a hosted version. The desktop version is not much different from the Firebug/Yslow tool, but the hosted version is what I found most useful and will cover in this article.

With the hosted version, I can setup my own webpagetest.org site within my organisation’s network and open it up to my co-workers to use. Any test results can be shared by easily posting a link, or browsed from the Test History tab. The package itself contains the website which is written in PHP and a tester program. With the PHP source code, I can easily shape the tool to our requirements.

Setting up your own hosted WebPageTest
If you haven’t already done so, go download a copy. With it, you can choose to deploy it in a single machine configuration or you can opt to split the website away from the tester. This will allow you to setup a one website with multiple testers configuration.

The tester program requires the IE browser, hence will only work on a Windows platform. It tests by firing up the browser and recording the data as the page renders. The website however, being PHP can function within either Linux or Windows platform, but requires Apache 2.2+ with PHP 5 installed and mod_rewrite enabled.

Single machine configuration
The easiest way to get started is to drop the contents of the package into the C:\ drive.

Configure your Apache to point the document root to C:/Web Site/content folder. If you, like me, had problems loading the site, make sure you check that the Apache modules – mod_rewrite, mod_expires and mod_headers have been enabled.

Once you have the site setup, the next thing to do is to prepare the tester program, called urlblast.exe. Open the C:\Web Site\urlblast.ini config file and look for the following:

If your site is NOT running on http://localhost/ or http://127.0.0.1/, then you need to change the highlighted line to your site’s URL.

Once that’s done, save your the ini file and execute the urlblast.exe program. The first time this program starts, it may open a hard disk defrag window. Just let it run until its done. Once the defrag is done and your urlblast program window is sitting idling, you can go to your site and post an URL to test under the “New Test” tab.

If all goes well, your IE should fire up by itself and load the page that you want to test, and then close itself. By default (assuming you didn’t change any test parameters), this will happen twice as the program tests for “First View” loading followed by “Repeat View” loading.

If you opt to change the default folder location from C:\Web Site to something else, you just need to update your apache conf file and change the settings within locations.ini in the content/settings/ folder to reflect the new location.

Multiple machines configuration
In many cases, a single machine setup is good enough. But, if you have different locations within your network you want to test from, or you want to test different connection speed from the same location, you would need to setup multiple testers.

Assuming a setup like above, with one machine running the WebPageTest website, accessed throughhttp://webpagetest/ and two machines as testers, Test1 and Test2. It is important that the website be setup so that it can be accessed from another machine. The 2 tester units needs to be able to see the website. In this case, a ‘webpagetest‘ local domain name was setup. Alternatively, you should be able to access the site through the website’s IP address.

First, create two new folders inside content/work/jobs folder called Test1 and Test2 to reflect the 2 tester location. This is where the jobs are queued for each tester.

Next, open the locations.ini file in the content/settings/ folder and add 2 new tester locations. Notice that the localDir parameter is set to the respective job folder.

You should be able to see these new location reflected in the website.

What’s left is to setup the 2 tester units. Copy the pagetest.dll, urlblast.exe, urlblast.ini and the logfolder to a folder (assuming its C:\Web Site) on each tester machines.

Open the urlblast.ini for each tester and modify the Url Files Url and Location parameter. If you have changed the “Location Key”, make sure it matches the key specified in the location.ini on the website machine. For tester 1 location, it should be like so. Make the change to the tester 2 ini file also.

To start, just activate the urlblast.exe program on each tester machine, then go to the website and specify a url to test and choose either tester locations. If everything is ok, IE on the designated tester should fire up and start loading the webpage you want to test.

That’s it. Once I got this setup, the tool has been a great help to my team as we troubleshoot and improve our page loading time. I hope it will be for you too.

Check out this great video tutorial from Artz as he guides you through how to interpret the graphs and charts. Also, do visit Pat’s blog for tips and insights on webpage optimization.