Being able to accurately measure the speed of your site is an important step in determining where you can make improvements. My name is Janna and I'm an Enterprise Support Tech at WP Engine, and in this video in our Speed Series I'm going to walk you through using a popular speed test tool called WebPageTest.org. To start, let's navigate to WebPageTest.org and submit your first speed test.
Because every visitor's experience can be different it's crucial to understand the various aspects that affect the speed of your site. Part of this, is understanding limitations in existing technology, such as the fact that false positives do exist in running a singular test, fortunately WebPageTest has taken this into account. Before we begin running the test you'll want to click on the "Advanced Settings" drop down and increase the number of tests to four. This will actually run a consecutive number of tests and compile them all to reveal a very usable "Median" result in which you can build upon.
You can see these settings here...This is the only thing you'll need to change in this section. Now, enter your website's URL in the text box at the top of the page. Please know that this URL can be your home page or any other page that exists on your site. This is good to know in case you need to test a specific page that needs to be fast. Second, we can chose a location to test from. By changing the location you can simulate how your visitors would access your site based on geography. You can either pick a location from the list or if you click on the “CHANGE” button you can choose a location from a map. For now, we will leave the location to Dulles, VA.
Next, we will complete the settings needed by allowing you to designate which browser the test will run as. Not all locations support every browser so if a given location doesn't have the browser you are looking for, try a different location. It's usually recommended to use Chrome for initial testing as this is the most widely used browser. Finally, click the "Start Test" button to begin your test. The test can take a few minutes to complete based on if there are other tests ahead of you or if its a large site.
Take notice of the grades in the top right of the screen. The overall score will give you a grade for several distinct categories. You can click on each category to view more detailed information and suggestions. So, if you see any grades that are considered an "F", those might be ares of concern that you need to look into. Please note that there may be some caveats to an F in that it may not pertain to you -- we'll help you understand these caveats. You will also notice that underneath the navigation is a table full of numbers.
Three areas you will want to pay particular attention to are Load Time, First Byte, and Start Render.
Load Time measures the amount of time it takes the webpage to fully load all page content.
First Byte measures the time that the first bite of data is delivered to the browser. Essentially, this is the time it takes for the server to respond to a visitor's computer.
Start Render measures when the page is no longer “white” meaning the initial point of visual page load has started. This is also represented by the vertical green line in the “waterfall” view of the report, which we referred to in our first video as Perceived Load Time.
Now, you just heard me reference the "Waterfall". The Waterfall is this graph right here... This view shows a line item breakdown of each resource that is requested by the browser from the web server. This view shows the requested resources in time of ordering with the duration of each load. When you're diagnosing a slow performing webpage, this data can become immensely valuable for identifying bottlenecks.
I'd like to also point out the vertical blue line on the Waterfall. This line shows when the site has fully loaded. Now please keep in mind that a fully loaded site may not be relevant for all of your visitor's -- its very possible that they will find the content before the page is fully loaded.
Ideally you want your waterfall to be as “Thin” and "short" as possible. "Thin" referring to a quick overall load time, and "short" referring to a small number of elements to load. Of course, this is at odds with providing an appealing, feature rich page with lots of content, so balance is needed. A good best practice is to keep the Waterfall as “Steep” as possible, meaning the graph as a sharp drop to the right. This indicates a high level of parallel loading is happening which modern browsers, like Chrome, can handle.
Now that you know how to run and understand a speed test, up next we will talk about how you can actually increase your site's speed via Image Optimization. Be sure to keep the link from this initial test so we can compare the result against the secondary test later in this Speed Series. I'd recommend you bookmark the test with today's date. Not to mention, it's never a bad idea to keep it handy moving forward so you will always have a reference point to build from. Thank you for watching and we'll see you in the next video.
In the introduction, we mentioned the tool webpagetest.org. In this video, we are going to show you how to use webpagetest.org, understand the results, and how to use those results to diagnose issues on your site.
This video is geared towards beginners that have never used the tool before. With this indepth desicussion, you should leave this video fully understanding the importance of the tool and why you should be using it.