Advanced Measurement of Site Speed

We hope that our previous videos in the Speed Series have provided you with enough knowledge and tools to help improve your site's speed. Now that you’ve taken steps to implement them it’s the perfect time to compare the results and dive a bit deeper into understanding the results. If you watched our second video in this Series, Measuring Site Speed, then you'll want to re-run a speed test from WebPageTest.org. Please start the test whenever you’re ready, and if you need help running the test please refer back to our second video in this series. If you followed along with this second video, you should have bookmarked your first test, which you’ll now want to pull up to have your Before and After side by side.

So, how did you do? We invite you to revisit any part of this Speed Series should you have additional questions or confusion pertaining to your new test results. Now, the remainder of this video we will be focusing on the extras found in Webpagetest.org and some key differences found in other speed testing tools available to you...So let’s get started!

1:28s
The waterfall chart is regarded as the most telling section from your test results, as it visually shows all requests being made on your site. So this is where we're going to start to help better understand how our site is operating, so go ahead and click on the waterfall image to open it up for higher visibility. It’s important to understand that each of the rows represents a different object that the page contains, such as text, images, JavaScript, CSS, and others. This is good to understand as they each make a round trip of processing time between your server and your visitor's browser.

1:47s
To start, you'll notice a variety of colored bars – each of which represents a different activity occurring while a specific object is being delivered to the visitor's browser.

Dark green is the DNS lookup. This is when the browser looks up the domain of the object being requested by the browser. You can’t do much about the dark greens bars, as this is specific to the site’s DNS, but rarely is this a problem.

Orange shows the TCP connection. This is the process by which both the visitor and the server acknowledge that a connection has been made and data can begin to be transferred. Too many connections opening and closing can slow down a site, but most modern browsers, such as Chrome, can handle up to eight concurrent connections. It should be noted that this is one of the few factors that you won't have control over, outside of identifying if your host has “Keep-Alive” enabled. This setting enables TCP connections to be reused instead of having them close and reopen. Fortunately, if you're a WP Engine customer this is enabled by default!

Bright Green shows Time to First Byte and measures the window of time between asking the server for content and the return of the first byte of information. The user’s internet connection is a factor here, but there are other things that can slow down your site, such as the distance between your server and the user, as well as the server's response time. Google Page Speed recommends this metric to be 500 milliseconds or less. As we discussed in our earlier video, utilizing a CDN can help if you have a global visitor audience.

Blue represents Content Download and the time it takes for every piece of content to be sent from the server to the browser. This is where you'll want to pay particular attention if you've yet to optimize your images, which we covered previously in the segment on Image Optimization. You may also see larger Content Download bars for other items such as fonts and CSS files – if so, we'd recommend contacting a WordPress developer to help address these issues further, as it may be necessary to recompile how these specific file types are built.

We encourage you to observe the number of orange bars, the number and length of the bright green bars and the length of blue bars. These four items highlight some common areas where the site may be performing poorly. So let’s break it down…

Too many orange bars? This problem is resolved by your WordPress host having “Keep-Alive” enabled, which keeps TCP connections open instead of closing and reopening them.

A lot of bright green bars means a lot of page requests. The average site has less than one hundred requests and we rarely see WordPress sites with less than 50. On average you want to shoot for 75 requests. A common cause of larger numbers of requests is explained previously in our Theme Bloat video, specifically where a feature heavy theme is loading unnecessary resources.

If your bright green bars are too long, then you’re experiencing a large Time to First Byte. You can help lessen your Time to First Byte with a CDN, which will bring your static resources closer to your users, thus reducing the distance that requests have to travel. These benefits are discussed further in our video called Offloading Static Resources to a CDN.

The length of blue bars depend on the size of files, such as images, fonts, and CSS, being loaded on your site, which can be incredibly varied depending on the type of site and how much content you have on a given page. Its best to always try and optimize any type of file, regardless of its current size, to keep your download size small.

5:41s
When looking at speed results for your site, a good rule of thumb is that you want to see four specific aspects in the waterfall chart: As few rows as possible... bright green bars that are as few and short as possible... short blue bars... and the “start render” and “document complete” vertical lines to occur as early and as close together as possible. I would like to note that the Waterfall will also show you what, if any, objects are holding up the start of your visual render time or any other objects. This type of behavior is usually found when your page has a white space that takes longer to load, and only once it completes does the remainder of your site finish. Here’s what that could look like…

6:21s
Along with the Waterfall chart, there are other areas that can help you visualize how your site renders based on a variety of methods.

The first being the “Content Breakdown” section. As you can see here, this page creates a pie chart that reflects the percentages of each object type on your site, such as images, html, javascript and css to name a few. The benefit of this view is you're able to determine what types of assets are pulling resources upon each page load.

The other area is found to the right of Content Breakdown under "Domains". Similar to the Content Breakdown section, the Domain section displays the percentage of External Requests your page is making, broken down by domain. This is an important chart as it can help you understand how much of your site is actually running on your host verses relying on third party services, such as Facebook and Google. You can reference our HTTP Requests tutorial for more information on this topic.

At the bottom of each pie chart there's a section labeled "Repeat View" which is used to understand what repeat, or cached visitors experience upon page load. This is a test that was done immediately after the First View test.

7:40s
We’ve covered webpagtest.org quite a bit because it’s the most user friendly and data rich. But it’s important to understand that other testing tools exist and can be used along side each other, of these we'd recommend GTMetrix and Pingdom. Here are some highlights and key differences you can expect when using them.

The primary Differences with PingDom are: Paid site monitoring services, "real-time" test results during the actual test, Rank of your site's speed against all other sites that have been tested with Pingdom, saved all past tests from the same domain in a history section allowing you to see patterns/progress, and limited browser choice.

With GTMetrix you'll find: It provides specific articles with information on how to fix troubled areas outlined in the test results, It also tests javascript to see when/where it's executed on the page, to see where this can be improved.

And with that, this ends our Advanced Measurement of Site Speed video tutorial. Please take what you’ve learned here and apply it to your own site or work with your developer on improving your site. You can continue on to our Smart Optimizations video next, which will cover some neat tricks we’ve picked up over the years on optimizing WordPress. Thanks for watching!

In this video we walk you through how you can use WebPageTest.org to dive into the performance of your WordPress site. This is a bit more of an advanced video and may cover some topics that require additional research on your part to fully grasp the context.