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
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.
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.