It’s one of the most frequently asked questions I see asked, “I’ve tested my site speed, so now what do these metrics mean?” Don’t worry if you’re confused – there’s a lot to understand. Here we’ll explain what each of the common web performance metrics mean, and how can you use that data to optimize your site and make it faster
Standard Website Speed Metrics
Take a look at a screen below from MachMetrics. As we can see, a website’s “speed” is not a one-size-fits-all number that we can simply lower. Instead, we get multiple measurements. As daunting as it looks, each of these are necessary to know to truly optimize your website’s performance. Time to First Byte (TTFB), Document Load, Page Complete, Speed Index, Time to Interactive, Number of Resources, and Page Size are all industry-accepted metrics. Let’s go through each one and see how we can turn it into actionable information.
Time to First Byte (TTFB)
This metric is one of the more confusing metrics we see, so let’s tackle it straight away! TTFB measures the time that elapses between when a user requests a site, and when that user’s browser receives the first bit of information.
The first takeaway from this is that it can be used to measure server speed. This is only half of the story, however. You must also take into consideration whether your site is using a Content Management System like WordPress or Drupal. This is because, with a CMS, the server is responsible for loading the database, grabbing content, deciphering the output of elements on the page, and finally, sending this to the website user.
For this reason, if you have a rather large number of plugins running on WordPress, you can often improve your TTFB score by reducing that number. If you have a reasonable number of plugins and your Time to First Byte is still quite slow, you may then want to look into whether your hosting provider is adequate.
As you can see from the waterfall of my website, Document Complete occurs right around the 2-second mark, after most of the elements have loaded.
The Speed Index metric is an average of the amount of time it takes for the visible parts of your page to load in a typical browser window. This metric isn’t actually a timing metric, rather it is the “score” your website gets from a collection of speed metrics. The lower your speed index score, the faster your website is performing. If you have a lot of heavy content “above the fold” (ie, at the top of your page) this may give you a poor Speed Index. Content “below the fold” isn’t considered in the calculation because it’s out of the view of the browser window.
This tool is excellent for the sake of comparison, meaning I can effectively use to see whether the page speed optimizations I’ve made are working, compare my e-commerce site against my competitors, etc. It does have it’s limitations in that it doesn’t single out any specific areas for improvement. For this reason, it is best used in conjunction with the other page speed metric we’ve covered.
Speed index can be improved quite a bit by optimizing images and fonts (thereby reducing page size which we will cover shortly), and by lazy-loading images – meaning the page doesn’t load the image until the user scrolls down the page. However, as Speed Index is an aggregate of the visual aspects of a website, most improvements you implement will improve your score.
Time to Interactive
Number of Resources
Anytime your website is requested, it sends out a series of HTTP requests for all of the files that make up your page. The count of HTTP requests your site makes is a large part of the website’s speed.
Page size can be easily confused with resource count, but they’re very different. Page size is the weight (in KB or MB) of all the files your site uses. If your site utilizes large files, your page size could end up being too large and may slow the site down. For example, if you run a travel blog you might want to upload thousands of high-quality pictures in order for visitors to see all of the places you’ve been. However, if you don’t optimize your images, then your website has to download each of those large pictures, making your site massive and slow. Images are usually the biggest contributor to large page size.
Be Aware of Single Metrics
Whenever you test your website with a site speed testing tool, make sure you’re aware of which metrics they’re reporting on. Popular tools just give you the TTFB, which doesn’t give you the whole picture. Be sure to ask which measurement you’re looking at, and what it means.
Armed with this information, you’re now ready to go out and optimize your website to make it the best that it can be. It’s important to remember that there isn’t one metric that you should focus on. However, focusing on reducing file sizes and HTTP requests will lower most of the metrics. From there, you’ll be able to see if there are any glaring issues(Ex. Page loading quickly but taking forever to become interactive.)
Let us know if you have questions below, and tell us about how your optimization is going!