Performance Testing using WebPageTest

14/01/2019

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!

WebPageTest

WebPageTest is a website performance testing site, targeted mainly towards developers. It offers a plethora of website performance testing options, albeit from a relatively outdated interface. But don’t be fooled by its appearance. Of all the major testing platforms, this one is often considered the best, due to it’s enormous number of options. Even the homepage points to its power, opening as it does with the Advanced Testing mode. Let’s dig into the options on offer with this awesome tool.

WebPageTest Home Screen

Overview

Options

Advanced Testing

There are simply too many options in the Advanced Testing section to cover, as this is designed to be a powerful tool for developers. But there are choices here not available in the Simple Testing section that can be very useful, even to beginners.

To start with, there are a huge number of Test Locations to choose from, and in the default location, also a huge variety of devices to use. Dulles, VA is the default location, and with that location, you can choose from a large number of both Android and Apple devices with which to run your test. If you prefer, you can select your location from a map. Once you have picked your location, you can specify which browser you would like to use, and in the Advanced Settings, you can choose the connection speed.

The diversity of testing options on offer make this a very powerful tool for developers. There is the ability to run up to 9 consecutive tests, and you can show results for the first view only or also the repeat views, and you can capturing video of the page load as well. Going into the other tabs would only be useful for developers, but there are a huge range of options to customize your tests as much as you want.

WebPageTest - Advanced Testing

Simple Testing

The Simple Testing interface is correspondingly simple. You can choose whether to use a Desktop configuration, or one of three mobile configurations, using Slow 3G, Regular 3G, or 4G. You can also include a repeat view of the site, and run a Lighthouse audit, but that’s where your options stop. For a simple test though, this is still a great starting point.

WebPageTest - Simple Testing

Test Results Summary

When the test has completed, you are presented with a Results Summary. WebPageTest tests pages against a custom set of six speed recommendations, and gives a grade (from A to F) against the first 5, and a simple tick or cross for the last one, the effective use of a CDN. You can click on each of these grades to go to the related area on the Performance Review tab.

WebPageTest Results Summary

Directly under the initial Summary area, are the links to the many result breakdown tabs. We will cover them one at a time. Under that, is an option to Re-run the test, some links to download the data in various formats, and a table showing a summary of the page load times.

WebPageTest Results Summary

Below this are the remaining summaries of the test results. In a slightly clunky interface, there is a table showing the Waterfall, Screen Shot and Video across the top for the first view, and below that, the same information for the repeat view.

On the left of the table, are some very technical links to the Chrome Dev Tools Timeline, and Chrome Trace, as well as a link to the Processing Breakdown tab. If you click on the Waterfall image you are taken to the details tab, and likewise you can click on the screen shot and video links to view further detail for those. At the bottom of the page is a link to the Content Breakdown tab, and a summary of the content by requests and by file type.

WebPageTest Results Summary

Let’s now look at the individual results tabs and what they can show us.

Details

The Details tab is where it gets very technical. After the performance grade summary and the page load table, this time formatted slightly differently and including a few more specific events, the page is basically split up into 4 sections, Waterfall View, Connection View, Request Details, and Request Headers.

The Waterfall View, shows a cascading visualization of the page load across time, and you can click on any individual request to bring up more specific detail about that request. For a developer, you can see how powerful this can be.

WebPageTest - Details - Waterfall View
WebPageTest - Details - Waterfall View Expanded

The Connection View is similar to the waterfall view, but instead of focusing on the requests, looks at how the content loads from all sources. The connection view Basically, it shows each TCP socket and the requests that are retrieved over them. Just another way of looking at the information flow, and mostly useful for advanced developers.

WebPageTest - Details - Connection View

The Request Details section provides details of every request, and if you click on a particular one, you will be taken to the corresponding expanded entry in the Request Headers section.

WebPageTest - Details - Requests Details
WebPageTest - Details - Requests Headers

Performance Review

The Performance Review tab shows the page requests, marked against a  Full Optimization Checklist. This covers the 6 areas WebPageTest has tested for and highlights how each request has fared again the relevant criteria.

WebPageTest - Performance Review - Full Optimization Checklist

Below this is the Details section, showing the scores of each of the six sections, and details of any issues that took the score down from a perfect 100. This information allows you to see which files or processes to specifically target to improve your page load times.

WebPageTest - Performance Review - Details

Finally, below this is a Glossary of the six tests, explaining what objects are applicable for each test, and what is checked. This section is very useful for beginners to get an idea of what affects page load speed and where you can start to make improvements.

WebPageTest - Performance Review - Glossary

Content Breakdown

The Content Breakdown tab is very useful to see your content from above, showing you the breakdown by both type and bytes. You can expect images to be a large percentage of your content, and a chart shows you exactly what type of file each request is. Another chart shows you the content byte size by type. Below this is a connection view that is color coded so you can see where your various content is loading and how long it takes.

If you have chosen Repeat Loading in your tests, the Repeat View information is shown directly below this, showing how different your second load can be due to caching.

WebPageTest - Content Breakdown

Domains

The Domains tab simply shows you content breakdown by domain. Depending on how your site is set up, this may only show one domain or several. Here, we can see a small percentage of requests and content is coming from Google Fonts and Cloudflare.

WebPageTest - Content Breakdown by Domain

Processing Breakdown

We are getting into seriously nerdy technical territory here, but the Processing Breakdown shows us the various Processing Categories and Processing Events and the percentages of each for the page load.

WebPageTest - Processing Breakdown

Screen Shot

The Screen Shot tab shows you a screen shot of the site, fully loaded on the device you have chosen for testing. There is an option to create a video if you haven’t selected that before testing, and you can download the video frames if you wish.

WebPageTest - Screen Shot

Conclusion

WebPageTest is a highly regarded testing platform, with a toolset mostly suited for developers, or advanced users. There are a profusion of testing locations, and despite the slightly outdated interface, this service gives you all the information you would need to optimize your website’s loading time.

Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Avada.

Apart from our many documentation resources, the Facebook Avada User’s Group has a large and very active membership, and this topic is regularly discussed on the Group. You can also ask questions on the Community Forum.