It’s true that what might be considered the “most important” or “best” web performance metrics can vary by industry. For example, a media organization may be interested in tracking Time to Interactive because its site relies on third-party advertising for revenue, while an ecommerce business might want to dig deeper into First Meaningful Paint so it can ensure that customers can quickly take action to purchase an item.
But there is some information that is universal for all websites – and everyone has to start somewhere, right?
Whether you’re new to web performance or you’re an expert working with the business side of your organization to gain buy-in on performance culture, we suggest starting with six specific metrics:
These six metrics were not chosen at random – they work together to give you a snapshot of your site’s performance and overall user experience so you can set a baseline and improve speed and usability.
Time to Interactive
Time to Interactive (TTI) is an interactive metric that measures the time until a page is first expected to be usable and to respond quickly to user input. TTI is one of the new kids on the block in terms of metrics, and it’s only hanging tough on Chrome (for now).
Why track it? Time to Interactive gives you a useful measurement that lets you track how quickly your site is going to be ready when a user wants to take an action. This matters because if users can’t interact with your site, they can’t add items to the cart or implement CTAs – and you’ll lose engagement and/or business.
A more detailed explanation of Time to Interactive can be found here.
First Contentful Paint
First Contentful Paint is a visual metric that measures the time until the browser first renders any content (not to be confused with First Paint, which measures the time until the browser first renders anything). This metric is critical because it tells a site visitor that something is happening and that they’re not just going to be staring at a blank screen.
Why track it? If your site takes too long to reach First Contentful Paint, a user who doesn’t see anything on the screen is likely to bounce in frustration – costing you revenue and/or reputation. After all, some content rendered on the page is better (and more satisfying) than no content at all.
Visually Complete, another visual metric, measures the time until all above-the-fold content has finished rendering. This means you’re measuring when all of the content that the user sees without scrolling has completely rendered.
Why track it? The faster you get to Visually Complete, the faster the site feels – even if there’s still more content to be loaded below the fold. Plus, you can buy yourself more time to load below-the-fold content while the user is consuming the above-the-fold content that was already delivered.
Speed Index is a calculated metric that represents how quickly the page renders above-the-fold content. This visual metric goes hand-in-hand with Visually Complete to give you a picture of both the endpoint of content rendering as well as the journey to get to that endpoint.
Think about it: what feels faster – a steady stream of content loading over four seconds or a blank screen for the first three seconds followed by everything appearing at once? It’s the same timeframe, but it’s a very different experience, and users might get frustrated if they wait too long without seeing something on the screen.
Why track it? Speed Index describes the rate at which content appears, so tracking it helps to ensure that content is loading quickly for users. This provides insight into the speed at which content is displayed and can help identify good vs. bad user experiences.
A more detailed explanation of Speed Index can be found here.
Time to First Byte
Time to First Byte (TTFB) measures the time from the start of the first request from a browser until receipt of the first byte of the first non-redirect request (meaning a byte from your final destination, even if there are redirects happening along the way). Fundamentally, this gives you insight into how quickly someone can reach the backend server, and how quickly the server can generate and start sending back the base HTML page.
Why track it? TTFB gives you insights into where the backend server is slow (meaning you may have unoptimized backend code or an unoptimized database), and whether your site is geographically distributed so it can promptly respond to a global audience.
Total Content Size
Total Content Size is as simple and straightforward as you might think. Unlike the other five web performance metrics noted above, which relate to time, this one is all about size – the total original size of all of your site’s content over time. (You can, if you like, dig a little deeper into the size of first-party content vs. third-party when monitoring this metric.)
Why track it? Total Content Size is an easy, high-level way to see the size of a website. Typically, larger sites take longer to download.
While the metrics you’ll want to track closely will vary by your industry, these six metrics – Time to Interactive, First Contentful Paint, Visually Complete, Speed Index, Time to First Byte, and Total Content Size – work together to give you a high-level overview of performance data. You can use this information to set a baseline of your site’s performance, which opens multiple doors for you.
For example, you can benchmark your site against your competitors, then share this competitive information with stakeholders to gain their buy-in on the importance of web performance. You can also optimize your site, then use the baseline you’ve established to run apples-to-apples comparisons over time to highlight changes (and gains) made with each iteration.