Which Web Performance metrics should you measure?

If your experience is anything like mine, you're probably rather confused about all the acronyms involved in monitoring the performance of your website, and just want to know which metrics actually matter. The answer is unfortunately simple: it depends.

Before you get angry and get back to searching for the definitions of all of these metrics, hear me out. It depends on your use case.

As an example, here's a WebPageTest result of a previous blog post. You'll notice some metrics across the top of the page: First Byte, First Contentful Paint, Speed Index, and so on. Given that this is a blog, and the only interaction I expect from my users is to read the content (rather than clicking on links and submitting forms), I would argue the important metrics for me to consider are Time to First Byte (TTFB), Speed Index, and Document Complete.

On the other hand, if I were looking at performance metrics for a web application built in JavaScript, I would care more about metrics like First Contentful Paint (FCP) and Time to Interactive (TTI).

What do all of these metrics even measure?

Time to First Byte (TTFB)

Time to First Byte measures the time between requesting a page, and getting the first byte of data back from a server. Some people don't worry as much about this metric since they believe that they can't influence this number, but that's not necessarily true.

As an example, I recently migrated this blog from an extremely popular JAMStack hosting provider onto AWS CloudFront. TTFB dropped from 600ms to 300ms.

First Contentful Paint (FCP)

First Contentful Paint measures the time it takes the browser to render anything onto the screen - whether it be text, an image or otherwise.

First Meaningful Paint (FMP)

First Meaningful Paint on the other hand, measures the time it takes the browser to render the page's primary content onto the screen. For example, on a blog post FMP would measure the time it takes the headline and above the fold text to load (with fonts having finished loading).

For a much more in-depth look at First Meaningful Paint, see: Time to First Meaningful Paint: a layout-based approach.

Speed Index

Speed Index measures how much of the page renders over time. I've explained this metric in more detail in a previous blog post. Essentially this metric penalises websites that load just a header and footer, then take 10 seconds to load content, while rewarding sites that load all content gradually over the same period of time.

Speed Index is also known as a User Experience metric, as generally sites with lower scores are less frustrating to users.

Time to Interactive (TTI)

Time to Interactive measures the time it takes for a webpage to be fully interactive, which Google defines as:

  • The page displays content
  • Event handlers are registered for most visible elements on the page
  • User interactions are responded to within 50ms

TTI penalises pages that optimise for content visibility at the expense of interactivity. That is, you can see the content, but you can't scroll or clicking on things has no effect.

I also wrote more about this metric in more detail in a previous blog post.

Time to Interactive is another User Experience metric, as pages with high TTI are generally frustrating for users, and lead to fewer conversions.

Shameless plug

Tired of manually testing your web performance? I'd love to help!

Hi! I'm Max, the developer, designer, and customer support of PerfBeacon.com - a service that automatically runs Google Lighthouse for you (both on a schedule, and via API calls).

Get in touch with me via Twitter or Email.

Be first to know about new features and tips on web performance