Website Performance Benchmarks: Track your competitors site speed

Let’s look at how we can use free tools to perform website performance benchmarks against your competitor's sites.

Since we are talking about website speed, I think we should begin with a race. Why not race two of the biggest streaming websites, Netflix and Hulu?

Which page do you think will load faster?

Did you guess correctly? Netflix wins this round.

Later, we will walk through how you can create a video just like this for your site. But first, let's take a look at gaining a competitive edge.

Gaining an Edge

Like many of us in the evening, I was settling down for a night in front of the TV. When it occurred to me, “we have so many choices today”.

Netflix, Amazon Prime or Hulu.

So much content to watch. So little time.

Every website has competitors and gaining an edge over the competition is more important than ever. One increasingly important metric is website speed.

In an age when the customer expects content instantly and on-demand, we can no longer ignore website speed.

Furthermore, website speed is now a ranking factor for Google. Your website is in direct competition with the search results around you.

Just like Netflix, I’m sure your site also has its fair share of competitors. How does your site speed compare?

Performing competitive analysis on your competitor's websites is probably something you already do.

You may look at their offer, social media, on-page SEO and keyword research.

Have you ever looked at their website speed performance?

Using free tools you can easily perform this analysis yourself and see how your website compares.

Lets explore a real-world example starting with the search term:

“Watch tv shows online”

Google returns Netflix in the top spot, with Hulu taking 4th position.

To see how Netflix’s site speed compares to Hulu, let’s do a quick benchmark test with real world data.

Quick Benchmark Test

One of the easiest ways to compare sites is to use the benchmark tool from Google.

To start, visit test my site and enter your website address.

It will take a little while to generate the results but eventually, it will show some stats on page load speed.

If you scroll down you will see a benchmark tool asking you to “Enter a competitors website”.

Comparing Netflix with Hulu we can see the results:

Netflix wins this first test, 1.5 seconds Site Speed!

For this test, Google uses data from mobile devices on a 4G network in the US.

They calculate the Site Speed using a combination of three metrics:

• First Contentful Paint (FCP)
• DOMContentLoaded
• onload

For more information on the source of this data, have a look at the Chrome User Experience Report.

To truly understand why Netflix is loading faster, we need to take a deeper dive into how the page loads.

For this, we can use another free tool https://www.webpagetest.org.

WebPageTest.org

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?

Waterfall

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.

Timings (ms)

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.

Requests

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.

Bytes

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.

Now back to stranger things, season 3.