Header logo
Free Consultation

Website Analysis Tools Part 2: Performance Testing with WebPagetest

magnifying glass over web related items

Last time, I wrote a bit about finding potential site improvements using a site auditing tool called Lighthouse. One area where Lighthouse was useful, but fell a bit short in my opinion, was in analyzing website performance - that is, the speed at which the site loads and can be interacted with. Today, I'm going to take a look at a more specialized tool that we use at Ashday to figure out the best ways to make our sites run lightning-fast.

I first found out about WebPagetest at David Porter's excellent DrupalCon Baltimore session "Web Performance in 2017". He had a lot of excellent points - and I'd recommend watching the session video for anyone interested in getting some technical details on web performance optimization - but learning about this tool was probably my most significant takeaway from the session.

When someone visits a webpage it may seem like just a single page loading, but in truth, the web browser needs to load many different things… from the page content, to images and fonts, to JavaScript code which adds dynamic features to the webpage. The heart of the WebPagetest tool is the "waterfall view" of the tested site, which shows all these different load requests, how long they take, when they happen relative to each other, and more. Here's an example of just part of the waterfall view for a Wikipedia article:

webpagetest waterfall

All major web browsers include some form of waterfall view by default, but in my experience, they aren't as comprehensive or easy to use as this one.

The main use of the waterfall view and related tools provided by Webpagetest, is to determine what parts of the page are slower than others and to find ways to speed the website up. At a broad level, the closer the requests are to the left of the waterfall, the faster the page should load.

Fortunately, WebPagetest provides a number of other tools to help accomplish that goal. The Performance Review page checks for images that could be compressed and for requests where caching or a CDN (such as CloudFlare) might help speed the page up. The Content Breakdown page can be a good indicator for what the largest (and likely slowest) aspects of the page are; similarly, the Content Breakdown by Domain screen gives a good overview of where all the site's code is coming from, and may indicate what third-party services are having the most impact on site load time.

Another very useful feature is the ability to run two important types of tests: A "first view" test and a "repeat view" test. Many parts of a website are stored in a browser's cache after the site is first visited, which makes subsequent visits much faster. The "repeat view" shows what the waterfall looks like on such a visit. Optimizing the performance of the first view is important - since it impacts new visitors to the site - but optimizing the repeat view makes for a better user experience when they are navigating within the site. It's this sort of functionality which, in my opinion, puts WebPagetest head and shoulders above browsers' built-in tools for performance analysis.

What WebPagetest lacks in looks it more than makes up for in functionality. It is a vital tool for finding potential areas of improvement on a website; at Ashday, we've used it to determine our approach to optimizing numerous sites, each of which is now faster than they had been before.

Free consultation graphic

Author
Jay Kerschner

Recent Posts

More Blogs