The SEO Expert's Guide to Web Performance Using WebPageTest

The author's views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

Any SEO professional knows that both site performance and user experience play an important role in search engine rankings and conversion rates. And just like there are great tools to help you find your search rank, research keywords, and track links, there are also excellent tools to help you improve your site performance. In this post, we will dive into one of the best free tools you can use to measure and improve your site performance: WebPageTest.

Do you know these questions?

There are several key questions an SEO professional should answer when it comes to improving the performance and user experience (UX) of your website:

What is my Time To First Byte? Time to first byte (or TTFB) is a measure of how fast the network and webserver returned that first byte of data in the HTML file you requested. The lower this number the better, since it means the site responded quickly. TTFB is an important metric since it is the performance measure most strongly correlated with a page's search ranking. A high TTFB can also indicate an underpowered web server.

How quickly does my site render? Have you ever visited a page and then stared at a white screen waiting? Even if your site fully loads in only a few seconds, if the user isn't seeing any progress they have a bad experience. Getting your site to render quickly can make your site "feel" faster than the competition. And speaking of competition...

How does my site compare to my competitors? Having a fast site is always a plus, but knowing how fast your site loads relative to your competitors can give you an idea about where you spend your resources and attention.

How does your site respond for mobile users? Sites are increasingly receiving the majority of their traffic from mobile users. When measuring your site performance, its critical you evaluate how well your site performs on mobile devices as well.

How do I make my site faster and provide a better UX? Collecting data and metrics is great, but creating a plan of action is even better. In this and a follow up post, we will show you clear steps you can take to improve your site's performance and UX.

Understanding the answers to these questions will help you speed up your site to improve your conversion rates and UX. Luckily the free tool WebPageTest can help you get there!

What does WebPageTest Do?

Created originally at AOL by Patrick Meenan in 2008 and now enjoying backing by prominent technology companies like Google, WebPageTest (WPT) is the swiss army knife for measuring your site's performance. While WPT's capabilities are vast (and sometimes overwhelming), with some guidance you will find that it can be indispensable to improving your site performance. And best of all, WPT is FREE and open sourced under the free BSD license!

At its most basic level, WPT measures how a particular web page loads. As the page loads, a number of useful metrics are captured, cataloged and then displayed in various charts and tables useful for spotting performance delays. These metrics and visuals can help us answer the important questions we listed above. You can also control many aspects of WPT's analysis such as the platform to use (desktop vs mobile), browser of interest (Chrome, Firefox, IE, etc), and even the geographic location.

Actually this is an incredible simplification of all the available options and abilities: WPT can do much much more...so much so a book is already in the works. Still you can get great value with just some high level basics, so let's dive in!

Testing your site with WebPageTest

Let's walk through an example. Even if you are familiar with WebPageTest, you might want to skim. We are going to select some specific options to make sure that WebPageTest collects and measures all the data we need to answer our important performance and UX questions above.

To start go ahead and visit www.WebPageTest.org. It's okay to load this URL on your browser of choice (the browser you visit the URL with is NOT the browser used to run the test, that all happens on the remote server in a controlled environment). If possible, try to use Chrome since some of the more advanced visual tools for displaying the result data work best on Chrome, but it's not a big deal if you'd rather not.

You should now see a page like this:

Right away you see 2 interesting options:

Test Location has a list of over 40 different regions around the world. Through its partnership program, WPT is physically running (for free) on servers located in all of those locations. When you enter a page URL for testing, the server at the location will load that URL locally with the browser you select. Truly wonderful, but of course, you get what you pay for: the speed and reliability of your tests may vary greatly from location to location. In addition, not all regions support the same testing options.

Browser contains a number of different desktop and mobile browser configurations available for testing at that location. Note that unless otherwise specified, the mobile specific browser tests are actually running on actual mobile devices and not emulators. Patrick Meenan has a neat picture of one of these configurations on his blog (below).

Let's go ahead and stick with the defaults (Dulles, VA and Chrome).

Go ahead and expand the Advanced Settings section and you'll see something like this:

Number of tests: as the name implies this controls the number of repeat tests to run. This is very important as the Internet can suffer frequent spikes and jitter in response times based on network congestion (see our earlier post on HTTP/2). To get a reliable result, its best to run multiple samples and have WPT automatically choose the median result. We recommend at least three tests, more if you have the time to wait.

Repeat View specifies if each test should load the page just once (with the browser cache cleared), or once with the cache cleared and again with the cache primed. Why does this matter? Whenever your browser visits a URL for the first time, there is almost always a large number of images, JavaScript files and other resources that must first be downloaded by the browser to be used by that page. Once the browser has all these files, it will (depending on the server settings) cache them locally on your device for each subsequent page loaded from that website. This explains why the first page you visit almost always loads slower then subsequent pages on the same website. We recommend setting First View and Repeat View here so you can measure both the first experience for your new users and the ongoing experience for your repeat visitors.

Capture Video: One of the coolest features of WPT. This allows you to visually see what your users would see on that device in that location. I'll dive into this more below, but for now just make sure it's checked.

For now leave the rest of the options blank, and you can ignore the other tabs.

Go ahead and enter your site URL and hit Start Test. It'll usually take 30-60 seconds to get a result, depending on the options you selected and how deep the work queue is. If you find it taking an inordinately long time, try repeating the test from a different location.

Let's now look at the results.

WebPageTest Results

Upon completion you'll see a lot of data returned, much more then I can cover in this post. Let's stick to the highlights for now.

First, at the top you'll see some metrics on the overall page load time itself, for example:

As I mentioned above, this is the median result after 3 runs. You'll also see a breakout of the first page load (no caching by the browser) vs. the repeat page load (browser is now caching some resources). You should almost always expect the repeat view to be faster then the first view. If not, you have some caching problems and should try free tools like PageSpeed Insights and Zoompf to diagnose why your caching is not properly configured.

There's a lot to digest in these numbers, so let's stick to the highlights:

First Byte: This is the Time-to-first-byte metric we are looking for! As you'll see below, the HTML document is usually a small sliver of the overall time - it's all the images, JavaScript files, etc. that take most of the time to load. You want a number no more than about 200-400 ms. See our earlier article about optimizing Time to First Byte for recommendations on how to improve this value.

Start Render: This is the point visually where you start seeing something other then a blank white page staring back at you. This also directly maps to a number that we want for our questions above.

Document Complete: This is the point where the webpage has loaded up all the initial components of the HTML DOM and you can start interacting with the page (scrolling and such). You may still see images and other background parts of the page continue to "pop in" on the page after this, though. This number is helpful for developers, but less important from an SEO/UX perspective.

Fully Loaded:This is the point at which everything is done loading. All images, all tracking beacons, everything. Many websites intentionally design for a faster document complete time (time you can interact with the page) at the expense of a slower fully loaded time (e.g. load the "extra stuff" in the background while the user is interacting with the page). There are raging debates over whether this is a good practice or not, I'll steer clear of those and simply say "do what's best for your users". Again, this is a number that is helpful for developers, but less important from an SEO/UX perspective.

Speed Index:This is a metric specific to WPT averaging when the visual elements of the page load. This attempts to solve a growing discrepancy between the values above and what the user perceives as "fast". The math behind how it is calculated is kind of cool, and you can learn more about it here. The smaller the number, the faster and more completely you page loads.

These metrics help us answer some of our questions above. We will also see how to easily compare your metrics to your competitor.

Waterfall Charts

One place WPT really shines is its waterfall charts. Put simply, a waterfall chart is a graph of what resources were loaded by your browser to render a webpage, with the horizontal axis charting increasing time and the vertical axis representing the in-order sequence of loaded resources from top to bottom. In addition, each line in the chart is color coded to capture the various loading and rendering activities performed by your browser to load that resource.

For example:

Waterfall charts are valuable for identifying bottlenecks causing your page to load slowly. A simple frame of reference is that is that wider the chart, the slower your page loads, and the taller the chart, the more resources that it loads. There is a ton of information packed into a waterfall chart, and interpreting a waterfall is a big topic with a lot of nuances. So much so that we're going to dive into this topic in much more detail in our next post. Stay tuned.

Seeing how your site loads

If waterfall charts are the "killer app" of WPT, its performance videos are the killer upgrade. By selecting that Capture Video checkbox when you started your test earlier, WebPageTest captured a filmstrip showing exactly what your user would see if loading your website using the test parameters you provided. This is extremely valuable if, for example, you don't happen to be working in Singapore on a Nexus 7, but would still like to see what your users there experience.

To access your video, click the Summary tab on your test result, then scroll down and click the Watch Video link on the far right column next to the Test Result you want to view.

You'll then see something similar to this:

Remember those metrics that are important? If you site has a slow TTFB, you see a big delay before anything happens. The video also helps show you your start render time. This really helps provide some context: 750ms might sound fast, but being able to visualize it really drives home what your users are experiencing.

WPT's video of your page load in itself is a great way to share with others exactly what your users are seeing. It is also a phenomenal tool to help build the case internally for performance optimization if you aren't happy with the results. But can we do more?

Comparing against your competitors (and yourself)

Yes you can! WPT's video capabilities go further, and that's where it gets really interesting: you can also generate side by side videos of your site versus your competition!

To do so, repeat the steps above to generate a new test, but now using the URL of your competitor. Run your test and then click Test History. You'll see something like this:

Click compare on the 2 tests of interest and you'll see a cool side by side filmstrip like this:

Scrolling left and right will show a visual comparison of how the 2 pages loaded relative to each other. The gold boxes indicate when visual change occurred on the site getting loaded. Scroll down and you'll see an overlay showing where in the waterfall chart the visual images loaded. Click the Create Video button and you'll see a cool side by side animation like this.

This is a fantastic way of visualizing how your users see you versus your competition. In fact, you can compare up to 9 simultaneous videos, as we whimsically did some time back in this video:

But what about testing for mobile? While you can run 2 separate WPT analyses for your site using a desktop and mobile device, this is rather clunky. You have to switch back and forth comparing results. I am a big fan of using the comparing options, but to test my site using multiple different devices. This allows you to leverage all the great features above, like side-by-side video loading, and quickly see problems. Is your mobile site loading faster than your desktop site? It should, and if not, you should investigate why.

Getting even more from WebPageTest

I could spend hours going over all the advanced features of WebPageTest, and in fact Patrick Meenan has done just that in several of his great presentations and videos, but I wanted to wrap this up with a few of the more particularly noteworthy features for the SEO focused performance optimizer:

Private Instances: If WPT is loading too slowly for you, or your geographic needs are very specific, consider hosting a private instance on your own servers. WPT is open source and free to use under the free BSD license. There are many great resources to help you here, including Google's documentation and Patrick's presentation.

API:Most if not all the data exposed in the WPT web interface is also accessible via Restful API. If you'd like to show this data internally in your own format, this is the way to go.

Single Point of Failure (SPOF) Testing: What happens to your site if a key partner is down? Find out with the SPOF testing option. Simply list the host name(s) you want to simulate downtime with via the SPOF tab when launching a test, and see how poorly your site performs when a key resource fails to load. You may be horribly surprised. Even "fast" sites can load in 20+ seconds if a key advertising partner is offline. In fact, this feature is so useful we will explore using SPOF testing in our next post.

Next Time: Diagnosing performance problems with WebPageTest

WebPageTest is an indispensable tool for finding and debugging front-end performance problems, and a faster site leads to better user engagement and improved search rank. By default, WPT exposes a number of key metrics that are critical to SEO professionals and their understanding of their site's performance and UX. I hope this overview provided a basic foundation for you to start diving in and using WebPageTest to optimize your own website speed.

While we have answered nearly all the important questions listed at the start of this post, we left one largely unanswered: What do I do to make my site faster and improve the UX? To answer this question, we need to go beyond just looking at the data WPT presents us, and instead go deeper and review the data to diagnose your performance bottlenecks. This includes not only using some of the more advanced features of WPT like the SPOF testing, but also reviewing the waterfall charts and using tools like our free performance report tool to analyze what is slowing down your website and learn what you can do to improve your performance. We will do all that and more in our next post.

WebPageTest is must-have tool for every web developer, designer and SEO related person.

I like it because:

support many world instances. This is priceless and can give you rough idea how your site will be loaded in Australia, China and India. For me that three instances are hardest worldwide for servers not located there.

support many browsers. Every browser engine comes with some issues. Some of them are well known, other can comes suddenly and hit your site performance. WPT comes with many of them.

give you speed index. Trying to get lower points there is critical for speed. But dependent from your assets, design, browser engine and many other.

show CPU and network bandwidth during test. Sometime big images are loading and hold connection for important CSS file. This block whole page rendering and can be tough for detecting.

show DNS time for resolving and didn't cache them on next test.

Of course there are many other features that are killer. OF course there is just one issue - even if your site is optimized site can be slow for different users. That's why i use this code in Google Analytics:_gaq.push(['_setSiteSpeedSampleRate', 100]);and later i go on Behavior -> Site Speed -> Page Timings. There often you can see weird things. Example Chineese and Indian users load some of mine pages for 600 sec or 300 sec.

So no matter what optimizations you do there is always chance users to surprise you.

Exactly. The distance between the testing site and the location where you website is hosted creates "latency". Latency is one of those things that impacts you, and a faster internet connection doesn't help. To learn more, see our post: Bandwidth, latency, and the size of your pipe. https://zoompf.com/blog/2011/12/i-dont-care-how-big-yours-is

Isn't only latency there. People there used other access to the internet that for our are "out-of-date". Like dial-up or ADSL as 512/64kbps or similar. Even modern 3G access has huge latency and issues. Example 3G latency can be between 10 to 200 ms. Even 250. And sometime you can't allocate bandwidth for radio spectrum and you receive limited communication channels.

And least - when you test in WPT your test is performed in data centers where where internet is in perfect conditions or almost perfect. But in real-life there isn't perfect network conditions. Example 3G internet can degradate to EDGE or GPRS dependent from many things.

Exactly Peter! That's why we love WebPageTest too: It has actionable data that is easy for beginners to understand and use, as well as more advanced options/data that reveals even more to experts. It's the best of both worlds!

Hi Mark great article and yes people have to understand about extra http requests, bandwidth and latency, compression etc.. There are many tips and tricks to improve this and get webpagetest.org to be your best friend.

I think the best way to think of this is Bandwidth as the width of the pipe and Latency as the length of the pipe, so if you do things such as compressing images you are going to be able to get more in the pipe width to get to the latent endpoint. Here at seotweaks.com.au our website speed on mobile and desktop is 100/100 as this is what we specialize in and boast about. Google Page Speed Insights is a good testing tool too. Another good idea you can also do to save on http requests is get your javascript, css and google analytics on your local server to save making external calls, you can set up a cron job for google analytics to get the latest version every night and save that to your server, a good resource on how to do this is blog.compareandchoose.com.au/2015/01/breaking-webpage-speed-barrier/

Finally another great resource is feedthebot.com Patrick has gone way beyond the norm to help people in this area

I've been using WebPageTest for a couple of years now and in my opinion its the best. When optimising websites for my customers the biggest issue is the first byte due to the fact they are using shared hosting. It's rare to find a shared host that has a good first byte due to the contention ratio of users on the server. However, Gandi offer good shared hosting, through limited in location choices but still awesome first byte due to PaaS technology and vanish.

Anyone looking for a cheap hosting platform with improvement with first byte should seriously check out Gandi or you could even opt to use cloudflare with your slow host, that would improve the first byte.

When I first migrated my Asian travel blog to FastComet hosting I had W3TotalCache installed and ModPageSpeed activated and my WebPageTest speed was very, very good (around 0.2s to first byte and less than 4s to load the home page). Now, with nothing much changed, time to first byte is around 1-1.5s and home page load time is 7-10s. Do hosts like FastComet set you up with more resources at first and gradually wean them away over time? Or is there some other explanation for this slow down?

Fantastic article. I'm constantly checking site speed results (albeit with GTMetrix usually), but the WPT results are definitely more informative. I'm obsessed with TTFB and often find myself testing and improving. Some of my domains are on shared hosting, which itself can prove difficult when trying to diagnose what the actual root cause is, especially when the host insists it's purely the 'developer's' issue, and not their server response time.

You might want to take a look at our free performance report, which helps specify where a performance problem is something with the server host (like compression of TTFB) or a developer issues (like image issues, CSS issues, etc)

Remember search rankings is driven by a number of factors, and performance and the UX is just one. That said, yes, the farther away your server is from the majority of your users, that impacts performance. For example, if most of your visitors are in the US, but your website is hosted in Europe, you have added about 150-200 milliseconds of delay onto every request. This is a problem that CDN's attempt to solve, by storing multiple copies around the world so there at least on copy that is "close" to your visitors.

Latency and bandwidth and server location and CDNs are pretty broad and detailed topics. I suggest starting with our article here.

Hi Daniel! It's funny you mention this, as just yesterday we submitted a draft for our followup post. The post is not scheduled yet, but i'd expect to see it in 1-2 weeks. I'm glad you enjoyed the last post!

You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...

I have only one doubt.... since most of your comparison sources are dated before the most recent Google´s changes.... which information is truly trust worthy ?? (e.g. TTFB importance.. the backlink article is from 2013)

WebPageTest is an incredibly good for the analysis of performance of our website and help you optimize it for better loading speed tool. With this we can improve our position in Google and make us have more customers.

If our site takes too long to load, it is possible that our customer does not come and go to the next page.

Started reading up until I actually opened WPT and saw the limited testing locations (none of them are even close to our area.) Would tests still be viable when targetting local audiences? In other words, visitors from any other country mean absolutely zero.

Hi Angel! WebPageTest focuses primarily on speed metrics and how resources load from your browser. GTMetrix runs off Google's free PageSpeed insights, which tells you more about the root cause of what caused the problem in the first place. (Full disclosure) My company Zoompf also offers another great free tool you can use to perform this root cause analysis as well: https://zoompf.com/free

Basically we like to describe it like this: "WebPageTest can tell you how you're loading and if you have a problem, GTMetrix/PageSpeed/Zoompf can tell you how to get faster".

WOW, Very nice article of a tool with such great potential as WPT , certainly I'll get to try to improve my web site UX . Thank you very much for the explanation of most of the features offered by this powerful tool. I previously only used Page Speed Test to determine the loading speed of my web and possible failures that could have. Thanks!

Mark, I had no idea that a tool like WebPageTest even existed! This is fantastic! Thank you so much for sharing it with us and providing a thorough breakdown. Like others, I'm extremely impressed that users can test multiple devices and browsers. I think it is wonderful that website owners can check how their pages are loading in different environments given all of the unique challenges posed by the large number of devices and browsers currently in use for personal and business reasons by people around the world. I also like that this tool provides website owners with the ability to make side-by-side comparisons between their sites and sites owned by competitors. I can definitely see how that feature would save a lot of time. I have two questions: I noticed that the site has a "Forums" area. Do you know if the WebPageTest developers ever implement user suggestions? If so, do you know approximately how long it takes?

Hi Todd, thanks for the kind words (not that I can take credit for the awesomeness of WebPageTest :->). WPT is an open source project, so feature requests are really up to the participation of the community and whatever spare time Patrick Meenan may have to throw at it (which i'm sure is not always as much as he'd like). I'd definitely recommend registering a login on the WebPageTest site and being involved on the forums, that's a great way to help participate in the future direction. Also, if you get really motivated you can always extend WebPageTest yourself! https://github.com/WPO-Foundation/webpagetest . Hope this helped!

Hard to trust any of these online site testers, they all give you very different results and information. If i were to rely on WPT, I would have to believe the world is coming to an end. Other sites like pingdom, google, etc show much different results.

I usually use GTMetrix and Google Page Speed Insight to check the page speed and then use its results to optimize the website. Webpagetest is also a good tool to use and it shows good information about the website and helpful to beginners and experts.

Bottom line is to properly optimize the website (php, css, html, images, js file) and to ensure that website load within seconds.

I recently worked on a new client's website and smiled when I saw 3 images (each having 6 MB size on the main page) and almost all internal pages have a high resolution image of 6+ MB, and client was complaining that he is not getting signups :) Just after optimizing it properly (done nothing else other then optimization), he stared getting daily signups. Magic lol.

More and more people are now using internet on mobile devices and I am suggesting to all my clients to convert their old websites to new responsive website and optimize them properly to get more business.