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
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 Siteurlblast.ini config file and look for the following:
If your site is NOT running on
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 through
http://webpagetest/ and two machines as testers,
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
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
urlblast.ini and the
log folder to a folder (assuming its
C:Web Site) on each tester machines.
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.