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.
Document Load
Doc Load, or Document Complete, is a grouping of events that take place visually for the website visitor. This is often defined as when all of the text, images, and other HTML elements have loaded, but may not include content triggered by Javascript such as certain animations or clickable forms.
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.
Page Complete
After Document Complete, only a couple of Javascript files (in pink) are left to complete. Once these final few files have loaded you get the Page Complete time. When the browser stops receiving information and requests for 2 seconds, it determines that the page has fully loaded. It is obviously an important number to know, but since it compiles the entire page, it can vary from test to test. It is best used in conjunction with the other metrics to get a true picture.
Speed Index
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
TTI is a measurement of the time it takes for a page to become interactive for a user. “Interactive” is defined as the point where the visual elements of the page have been loaded, and the page responds to user interactives immediately. This metric is a huge indicator of initial user experience. We’ve all seen the site that loads quickly and then sits there for a few seconds unable to be used properly. It’s a frustrating experience and often results in the user leaving. One major way to improve this time is to defer unnecessary Javascript. If you are using WordPress, many caching plugins offer this feature at the check of a box.
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.
All MachMetrics users should take a glance at the Resources tabs. It displays each of the requests that your site makes when it loads, the size of the request, and how long it takes to complete. This is incredibly powerful as it lets you pinpoint exactly where you might have an issue. Anything marked in red should be addressed on your site. Combining CSS and Javascript files is a great way to lower the number of requests your site is making.
Page Size
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.
Again, many caching plugins come with the ability to greatly optimize these metrics right out of the box. Minifying CSS, HTML, and Javascript, optimizing images, and using gzip or brotli compression are all ways to lower 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!