BLOG | categories | page speed

Compare Website Speed Side by Side

By Steve Founder of PageDart

In this post, we are going to look at how we can compare two webpages side by side.

To do this we are going to use the free tool from WebPageTest.org.

The tool is the visual comparison tool.

The killer feature of this tool is that it allows you to create a video that loads two or more websites side by side like this:

It's cool, right?

The visual comparison tool also gives us some other useful comparison data:

A filmstrip image showing the pages loading
A waterfall chart
A visual progress chart
A timings (ms) chart
A requests chart
A bytes chart

For this walkthrough, I am going to compare Youtube with Reddit.

Let's get started.

What is WebPageTest.org?

WebPageTest.org is an open-source project. All the performance tests you can run for free.

The site has an old school design but it is an excellent resource for technical analysis.

Let's run a Visual Comparison test.

There are a few settings to choose from.

Add the websites that you would like to test and then choose a “Test Configuration”.

I suggest that you stick with the default slowest connection “Mobile - Slow 3G”.

Once you are ready, hit the big yellow “Start Test” button.

The test will take a few minutes to complete and once it's complete you will see the test results page.

A lot is going on here, so let's break it down.

The Filmstrip Image

At the top of the screen is a filmstrip, this shows the two pages we have tested and frames over time.

Along the top of the image, you will see how long it has taken to load the page.

Along the bottom shows the percentage complete.

A handy feature is to export the image like this:

There are a few export options you can choose from when you are exporting:

Thumbnail Size - This sets the resolution for each frame of the website
Thumbnail Interval - Ranging from 60 frames per second to a frame every 5 seconds
Comparison Endpoint
- Visually Complete - This is the moment when the frames are 100% complete and no longer change.
- Last Change - Is also a visual comparison and is the last point when pixels change on the screen. For example, when an animated gif or advert finishes.
- Document Complete - This is when the browser indicates the page has loaded. Usually, all the images have downloaded but javascript code is still executing. If you are familiar with Javascript, then this is the same as the onLoad event.
- Fully Loaded - This metric is the time when network requests stop for 2 seconds. Unlike “Document Complete” this will be after javascript execution.

Under the filmstrip, you may notice the “create video” button. Let's take a look at this next.

Creating a Video

The “create video” button will export an MP4 video. The video shows each webpage loading side by side, such as the one above.

This video is powerful at demonstrating the performance difference between pages.

There is also an option to create a slow-motion version of the video.

This is useful when the two pages are very close in performance.

A Waterfall Chart

The first time you see a waterfall image it can be quite daunting there are many parts of this graphic.

Here we lay two waterfall charts on top of one another to compare.

A Visual Progress Chart

The visual progress graph shows the page load progress as a percentage over time.

If you happen to be analyzing more than 2 pages this graph can be useful to see the performance differences.

It also allows you to pinpoint in time where certain loading is occurring.

For example, on the youtube site at around 18 seconds most of the images have downloaded. There is a jump now from 13% complete to 68% complete.

A Timings (ms) Chart

The timings chart shows many metrics that you can use to compare speed side-by-side.

Here are the details of each metric shown on the chart:

Visually Complete - This is a visual metric that completes when the last frame loads.
Last Visual Change - This is the moment where the last pixel loads.
Load Time (onload) - This is when the browser indicates that the page has loaded.
Load Time (Fully Loaded) - This is 2 seconds after the final network activity.
DOM Content Loaded - The time until the end of the browser “DOMContentLoaded” event.
Speed Index - This is the metric that shows when the user feels that the webpage has loaded.
Time to First Byte - Time from the initial navigation until the browser receives the first byte of the HTML file.
Time to Title - Is a visual metric that is the time from navigation until the browser renders the first <h1>. If no <h1> is visible, then it uses the largest <h2>.
Time to Start Render - The time when the first pixel changes in the browser. This could be as simple as a background color change.
CPU Busy Time - The total time that the CPU is busy during the page load.
Hero Image - Is a visual metric that is the time from navigation until the browser renders the largest image.
85% Visually Complete - Time in ms where the page is 85% visually complete.
90% Visually Complete - Time in ms where the page is 90% visually complete.
95% Visually Complete - Time in ms where the page is 95% visually complete.
99% Visually Complete - Time in ms where the page is 99% visually complete.
First Contentful Paint - The first visual change a user sees that indicates that the page is loading.
First Meaningful Paint - This is the time when the user feels like the page has loaded.
Hero Heading - Is the time to render the first <h1> on the page.
Hero BackgroundImage - Is the time to render the background image.
Time To Interactive - This metric measures that the page responds to user input within 50ms.

A Requests Chart

This chart shows the number of file requests made by each page.

For HTTP/1 you want to reduce the number of requests that are being made by your site.

This gets a bit more complicated with HTTP/2 but for now, we can assume that fewer requests equal a faster site.

Here we can see that Reddit is loading 40 images for the homepage.

Reducing this with lazy loading methods would speed up the site, as not all these images are above the fold.

A Bytes Chart

One of the key metrics for website performance is the total bytes.

It makes sense that if your site has fewer bytes to load then it will be faster.

This chart not only shows the total bytes for your site but also breaks the bytes down by file type.

It looks like Reddit could do with some image optimization.