If you’re looking for insights on how to improve your site’s performance, webpagetest.org is a good place to start. If it’s your first time running tests, the page test results can be a bit overwhelming, especially to someone new to performance analysis. This blog will provide some quick tips on where to start in deciphering the results of a test.
Summary Page
After running a test with the default settings, webpagetest.org (WPT) provides a summary of the test results. Sometimes looking at this page can be enough to point you in the right direction on how to optimize your site. The metrics in the summary allow you to see the performance of your site at a higher level of abstraction. From this we can look for the following abnormalities:
-
Load time is the most important metric; it should be 3 seconds or less.
-
Look at the metrics relative to each other. Divide Time to First Byte by the Load Time to find out the percentage of time that the browser is just waiting for data.
-
If you have the repeat view shown (which is the default setting on WPT), compare the times here. If the Load Time is nearly the same, it could mean you’re not taking advantage of browser caching.
-
For optimal performance, the fewer requests the better. Look at the number of requests.
-
Look towards the bottom for the content breakdown to see which types of elements are most resource intensive, either by size or request.
Report Card
As someone who has always actually enjoyed school, it comes as no surprise that the “Performance Review” is my favorite thing about WPT. It takes the results of all the metrics and breaks it down into key components that are graded automatically. This is the easiest place to look for suggestions on how to optimize. The grading system allows you to ignore areas that may not need attention, and really zero in on where your site needs help. Clicking on the grades will direct you to the exact request(s) that failed for each category. In some cases WPT will even detail how much room for improvement there is. Once you know where your site is failing, the rest of the WPT results can be used to investigate why.
Waterfall View
The waterfall view gives a component breakdown of the page, and allows you to determine the cumulative effect of the sequence of requests as well as the duration. This makes it easy to see if there’s a request is taking a lot of time and preventing other content from loading. The only downside is that Waterfall graphs can look intimidating to the uninitiated. Without going into detail, here are a few key things you can look for:
-
Too many requests, which means too many round trips.
-
Yellow highlights are 3xx responses, which could be undesired redirects. Check for response codes 301 and 302.
-
Red highlights means the request most likely returned an error. Most of the time these should be eliminated.
-
Blue lines show the payload size. One long blue line by itself can be a sign of one request blocking others.
-
Multiple orange bars show differing connections, which can be wasteful. This can be improved by enabling connection keep-alive.
The waterfall view is especially useful to see how your page loads. Some key questions to ask yourself: Does it load the content in the order you want it to? Is there a request that prevents the rest of the content from loading?
Conclusion
Webpagetest.org is a remarkable, open source project primarily supported by Google. It can help to improve the performance of your application by providing an in depth analysis of activity. Sometimes we’ll even do WPT analyses during load tests to provide even more insight for our customers. We hope this overview helps break down the results of WPT into a less intimidating view as well as a good idea of where to start. Keep an eye out for our future posts, where we’ll take an in-depth look at the Web Page Test results.