Please visit Search Engine Land for the full article.
from Search Engine Land: News & Info About SEO, PPC, SEM, Search Engines & Search Marketing http://ift.tt/1IeWtqz
Posted by mark.isham
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.
There are several key questions an SEO professional should answer when it comes to improving the performance and user experience (UX) of your website:
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!
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!
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:
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:
Some comments here:
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.
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:
These metrics help us answer some of our questions above. We will also see how to easily compare your metrics to your competitor.
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.
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?
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.
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:
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.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!