How To Use WebPageTest To Improve Site Speed

Running WebPageTest

To run a test go to webpagetest.org and enter your details as outline below:

1. Enter your website URL – make sure you enter your URL exactly how the default URL is. If you are https – then make sure you use that so you get the most accurate information. If you use www, then make sure you use that as well
2. Test Location – choose the area that is closest to where your visitors may come from. We are in NJ so we typically use New York, NY. Dulles, VA is the default option so you can use that one – sometimes there are too many tests waiting for other areas – Dulles seems to be the fastest in most cases.
3. Select A Browser – different test locations may have different browser options available – we typically stick with Chrome as our browser choice but IE is also a common option. Dulles, VA is their default test location and that has options for all the browsers Webpagetest works with so choose Dulles if you want all the options that are available.
4. Advanced Settings – this is OPTIONAL, but we like to run 3 tests and then see the First View and Repeat View – you can uncheck capture video for now too just to speed things up a bit.
5. Connection – this emulates the type of internet connection your visitor may have. You can play around with this option, but we typically keep it set to Cable since that is pretty standard.
6. Keep Test Private – this just keeps it from showing on the webpagetest.org website as a “recently tested website” – we usually keep this checked.
7. Click Start Test

You will see many other tabs and options – but we are not going to address those here since they are very technical. What we have outlined above is enough for a general overview of your website.

Reading the WebPageTest.org Results

THE A, B’s & C’s

Once the test is done you will be taken to a screen that has a variety of results for you to review. For this post we are only concentrating on the top area which shows letter grades and then a table with Performance Results.

Below is the top of the results page with the letters grades, let’s dig a little deeper to understand what this means.

The A, B and C’s – truth is, we do not even look at these, but if you are one who needs to have all A’s — then you can take a peak and then work on your page to improve it. Your goal is to make your website fast – not get pretty green A’s!

Here is what each of those alphabetic items mean:

First Byte Time – the time it takes for the server to respond to a user navigating the page, this is most commonly the backend time needed to build the page and often hosting plays a big part in this being too slow.

Keep Alive Enabled – in simple terms it is a communication that happens between the web server and browser that says “hey, you can grab more than one file at a time” – this allows multiple files to be retrieved at once otherwise one file would be downloaded at a time which would make it even longer.

Compress Transfer – basically this is a signal as to how big/small your file sizes are. If you have GZIP compression enables you should be good.

Compress Images – images are one of the biggest issues on most websites and by compressing them you are making the website smaller and removing image meta data which can greatly improve speed.

Cache Static Content – content on your website that does not change often – like images, javascript files etc. can be configured to that the browser that the USER is using can store them so when they come back to your website they can just use the copy stored in their cache instead of waiting for your website to load it. This is incredibly helpful on return visits.

Effective Use of CDN – if your website is using a CDN (Content Distribution Network) it will be reflected here.

Understanding Your Performance Results

Performance Results (Media Run)
This table gives you the AVERAGE load times of the 3 tests we ran and returns the averages for the First View and Repeat View.

First View is emulating a test of a person visiting your website with a browser that has its cache and cookies cleared out, it is basically a person visiting your website for the very first time.
Repeat View is done right after the first view and represents what someone would see and how fast it would load for someone who came to your site – left and came right back. The repeat view SHOULD be faster than the first!

Understanding the speed performance metrics above:

Load Time or Document Complete Time: First View: 3.468s  /  Repeat View  1.252s
The point at which enough is loaded to have some sort of interaction with the page – most images and code is loaded and users can scroll and interact with the page.

This page took 3.468 seconds to load all the content it needed to render the page including CSS files, images, Javascript files, 3rd party scripts etc. on the first visit and 1.252 seconds on the repeat visit. The lower time on the second visit is what we want to see!

First Byte: First View: 1.250s  /  Repeat View  .9777s
This is the time taken on the server side to display your web page. This has nothing to do with your files on your website – it is strictly a server related result. You would want this to be no more then 200-400s

Request: First View: 32  /  Repeat View  2
This is the number of images, JS and CSS files and other elements that the server needs to pull in to display the website. While there is no right or wrong number – typically the lower the better.

You can see on the repeat view only 2 request were made – this is because of “caching” where most of the content is stored in the users browser.

Start Render:First View: 3.191s  /  Repeat View  .874s
How long it takes for the browser to start to pull and display the content of the page or the point where a white page is not longer showing.

Fully Loaded: First View: 3.562s  /  Repeat View  1.252s
The full loading time of the page. This includes all tracking code, ads etc.

Speed Index: First View: 3381  /  Repeat View  1122
How fast your site is – a lower score is better – this is not a metric we focus on too much but we have seen that a target goal is under 1000.

What Is A Waterfall Diagram?

The waterfall diagram on any page speed testing tool gives you an easy to read view of every resource on your website in a list format, in the order in which those resources were loaded along with the time it took to load each resource.

It is critical to analyze this information to ensure your website is running at top speed and finding the reason(s) it isn’t.

As you can imagine this is a COMPLEX and very TECHNICAL tool – we can get really deep into the who, what, where, when and why – but because we focus on writing easy to understand tutorials we won’t be doing that.

We are ONLY going to tell you what you need to understand to read the waterfall.

We will do future posts that outline how to fix items. But for now we just want you to understand what the waterfall is telling you!

Accessing The Waterfall

1. Run your page speed test as outlined above.
2. The waterfall results will load under the performance results table. Click on any FIRST VIEW waterfall result that is returned on the page after the page speed test is complete. FYI, We typically look at the waterfall of the slowest loading view time.
3. The resulting page will show several items including waterfall view, connection view, request details and request headers. For this post we are only focusing on the waterfall view.

Below is a screenshot of a piece of a waterfall.

What is shown above is OVERWHELMING! We get it. So we will do our best to make it as easy as possible.

Basically the waterfall is a cascading chart of each resource loaded by a browser – and in a nutshell the shorter the horizontal lines are the better!

Understanding The Colors

As you can see in the image below everything is color coded and every color has a significance.

DARK GREEN – DNS: In order for the browser to deliver your website, it has to lookup your DNS to be able to deliver the IP address properly to let the website be seen.

ORANGE – CONNECT: A TCP connection must be created before the browser can deliver your website – this should only appear on the first few rows of the waterfall.

DARK PURPLE – SSL: Any resources that are loading from a secure website will need to be processed as such – the purple will signify how long it is taking to connect to that SSL item.

The above are items that are a little more complex and may require more technical resources to fix.

The OTHER colors that appear above the actual waterfall – blue, orange, green, purple, green, red and gray are all reflective of the type of content on your website.

For example, if you see a red line in a row – you will know that is a font file being loaded, if you see a green – then you know it is a CSS file that is being loaded.

Reducing Waterfall Line Widths

For each line item in your waterfall you want it to be as low in width as possible – simply put, the less wide the waterfall is, the faster your website will load.

In viewing a portion of a waterfall for the website Playful Kitty – who we would like to thank for being a “subject” for us – we can see some really short rows – and some really long ones.

Playful Kitty is actually using Cloudflare with her website which makes things a bit more interesting! There is a lot of complexities to Cloudflare or any CDN since the content is delivered based on location so results of visits to her website will range based on location. Because this is a beginners guide, we are keeping things simple and will not go into too much detail on that – just wanted to make you aware!

Let’s review what we are seeing here:

Red and Yellow Highlights

You may see a HIGHLIGHTED row in your waterfall – and it can be yellow or red as shown in the below image.

RED lines usually reflect a 404 as seen in the example above and simply means your website is calling something that does not exist. The best thing to do is to remove the call for the element that is missing if it is not something that is needed – or add the item back to your website if it is needed.

YELLOW lines are signs of redirect issues and are commonly shown as 301 or 302 redirects. This means you are calling the resource at one URL (maybe http://thiswebsite.com) – but the resource has moved to a new URL (maybe https://thiswebsite.com). With more sites moving to https this is becoming a more prominent issue for page speed.

Both of these can greatly impact page performance, so these should be addressed as quickly as possible.

Checking Out Your Image Sizes

One of our favorite tools that we recommend to help website owners is the “View All Images” tool. This link is at the bottom of your waterfall as seen in the image below.

You can simply click on that link and you will see all of the images that are in your waterfall — but as actual images with the sizes that are reflected on the website as well as the size it could be if compressed.

This is a great way to easily see which images you need to resize or compress for faster download.

Video Tutorial

And because there is just so much to this I wanted to put together a brief video outlining the above as well as reviewing the PlayfulKitty website at a base level so you can see everything and understand everything in post 1 and 2 about the WebPageTest tool!

Not the shortest video – and I know a little small so we will redo it soon so it is easier to see!