WebPageTest is a fantastic resource for performance testing websites and is completely free.
Don't be put off by the retro 90's layout, WebPageTest is a well maintained and active project. It has been the go-to tool for the performance community for many years.
It is also backed by several large companies (their logos are at the bottom of the page).
WebPageTest was originally created by AOL and was given to the community in 2008. The site can be used to run web performance tests from around the world.
It uses real browsers and supports both desktop and mobile testing. Its advanced tools allow you to get under the hood of how a website is loading.
There is also a great forum for help if you get stuck or have a question.
One of the advanced tests that you can perform is a “visual comparison” test. With this test, we can take two or more websites and compare them side by side. It's also how we can create a comparison video (like the one at the start of the post).
Start a Visual Comparison
To start a test go to the Visual Comparison tab and enter your website address. Give the site a label so that you can easily identify it later.
Now press the add button, and enter one of your competitors. Again giving it a useful label.
Once you are ready, hit the big yellow “Start Test” button.
The test can take a couple of minutes (time for a coffee?). Once it's finished you should see a visual timeline image of the two websites you entered.
Here is how our Netflix vs Hulu looked:
It's no surprise by now that Netflix is faster to load. But why is it faster?
On this page, you will find many useful graphs that can help us answer, why?
As you scroll down you see the waterfall table. This table shows all of the requests that the webpage is making and the time it takes to execute each task.
This chart can be really useful when doing technical analysis on the page and finding the cause of slowness on a site.
The first big difference between Netflix and Hulu is the number of requests that each page makes. Netflix is only making 38 requests vs Hulu 154.
This is our first indication of why Netflix's website is so much faster. The Netflix requests are less than a third of Hulu's.
Visual Progress (%)
The next graph shows visual progress (measured as a percentage) over time. This graph shows two useful pieces of data.
The first is the time the server takes to respond to the request. Netflix server returns after 4.2 seconds, compare this to the 5.5 seconds that Hulu is taking.
This means that Netflix is starting to show the website to the user before Hulu's servers’ have even responded.
The second take away is the time it takes for each site to be visually complete. Netflix goes from zero to a hundred percent in less than 0.1 of a second. Whereas, Hulu takes 2 seconds to do the same.
The Timings graph shows metrics based on time to complete. We are not going to cover all of these here however, there are a couple of key metrics I want to call your attention to.
First Contentful Paint is one of the first signs the user gets that a page is going to show. You want this to be as fast as possible, reducing the chance that the user will leave. Here we can see that Netflix is faster.
First Meaningful Paint is when the user feels like the page is 100% loaded (even though there probably is background tasks running). Again Netflix wins out here.
The Requests graph shows the number of requests each page makes. Network requests are expensive. The fewer requests your page needs to render, the faster it will load.
This is a simpler representation of the waterfall chart above.
The last chart is bytes and refers to the total size of all of the files that are needed for the page to load. You can see there is not a huge difference between the two sites. Netflix is at 1.2mb with Hulu at 1.8mb.
Website Performance Benchmarks, Final Thoughts
Hopefully, this analysis has shown how you can benchmark your website performance against your competition.
Not only can you now create an awesome video comparing your site against the competition. You also have the tools to explain why one site is faster than another.
You can compare how the website loads, how many requests it makes and the size of the page.
Using this knowledge you can work on resolving any issues and improve your website speed.
Lastly, back to Hulu, they may have lost the race but at least we know why:
Many more network requests than the competition
Total file size is larger
Takes longer to be visually complete
If we were Hulu, we would have lots of work to do. However, we would have some key metrics that we could use to make improvements.