Explaining how the real world works!     RSS Feed The Automated Tester on Twitter The Automated Tester on LinkedIn The AutomatedTester on github

Client-Side Profiling with Selenium 2

Tue 23 Nov 2010

Last year David Henderson and I gave a talk at GTAC about how we built a framework to capture the client-side performance of a page using Selenium and YSlow. It was a really interesting project that we did and it got my hooked on Client-side performance metrics.

Client-side performance is really important, so much so that venture capitalists look at this before and after they invest in a startup. We can see how important it is from the tweet below by Steve Souders.

Edmunds.com performance project: from 9 to 1.4 seconds, revenue up 3%, page views up 17%, bounce rate down 2% - http://bit.ly/i3jVF1less than a minute ago via web

This year I was chatting to Patrick Lightbody, from BrowserMob, and he was telling me how cool it would be to capture the network traffic and then in a separate task run PageSpeed or YSlow. He showed me a Firebug add-on called netExport that can export the Net tab from Firebug into a HAR file. With this in mind and the way that we can now control the browser and profiles we can see about getting the browser to give us the har file I have created my own version of the FirefoxDriver for Selenium 2 that collects all of this information.

So this is great that it records but now that we have the data we need to run PageSpeed or YSlow. Fortunately the PageSpeed team have created a HAR to PageSpeed converter that takes the HAR file and converts into a readable page speed score.

	private PagePerfFirefoxDriver driver = null;
    [Test]
    public void ShouldLoadDriverAndCreateAHarFile()
    {
        driver =  new PagePerfFirefoxDriver();
        driver.Navigate().GoToUrl("http://www.theautomatedtester.co.uk/");
        driver.Quit();
		/*With a quick clean the new driver shows. The normal info is a lot
		* more verbose
		*
		* Avoid bad requests  (score=100)
		* Combine external CSS  (score=63)
		* Combine external JavaScript  (score=2)
		* Enable compression  (score=100)
		* Leverage browser caching  (score=71)
		* Minify CSS  (score=93)
		* Minify HTML  (score=97)
		* Minify JavaScript  (score=93)
		* Minimize DNS lookups  (score=0)
		* Minimize redirects  (score=100)
		* Minimize request size  (score=100)
		* Optimize images  (score=100)
		* Optimize the order of styles and scripts  (score=100)
		* Serve resources from a consistent URL  (score=100)
		* Specify a cache validator  (score=74)
		* Specify a character set early  (score=100)
		*/
    } 

The code that I created is available on GitHub. I recently did a talk at London Selenium User Group. The videos are here and here

    Area: blog

blog comments powered by Disqus