Understanding Key Page Speed Metrics – Beyond Core Web Vitals
Understanding Key Page Speed Metrics – Beyond Core Web Vitals
Published on March 27, 2025 Last Updated on April 15, 2025
Written by
Morgan Frank - Specialist in Page Speed
You’ve heard about Core Web Vitals (LCP, INP, CLS), which are essential for user experience. But to really understand your website’s performance, you need to go
deeper and look at other key page speed metrics. Think of these as additional clues that help you diagnose performance problems and fine-tune your optimizations.
This isn’t about overwhelming you with numbers. It’s about understanding what each metric tells you about the user experience.
Key Takeaways From The Survey
Here’s what we’ll explore:
Core Web Vitals are important, but other page speed metrics provide a more complete picture of performance.
TTFB measures server responsiveness.
FCP measures the time to the first visual content.
Speed Index measures the overall visual progress of the page load.
TTI measures the time to full interactivity.
TBT measures the total blocking time, which impacts responsiveness.
CLS measures visual stability.
Number of request measures total files a webpage requires.
Page Size is total size of a webpage.
Why Go Beyond Core Web Vitals?
Core Web Vitals are a great starting point, but they don’t tell the whole story. Other metrics can:
Pinpoint specific bottlenecks: They help you identify where the slowdowns are happening (server, network, browser).
Provide a more complete picture of the user experience: They capture different aspects of the loading process.
Help you track progress over time: You can see how your optimization efforts are affecting different parts of the loading process.
Key Page Speed Metrics Explained
Let’s break down some important metrics, explaining what they measure and why they matter.
1. Time to First Byte (TTFB)
What it measures: The time it takes for the server to respond to a request and send the first byte of data to the browser. It’s a measure of server responsiveness.
Why it matters: A high TTFB indicates server-side problems (slow hosting, database issues, etc.). It delays everything else. If the server is slow to respond, the browser can’t even start downloading the page’s content.
Good target: Ideally, under 200ms.
Analogy: Imagine ordering food at a restaurant. TTFB is the time it takes for the waiter to take your order and for the kitchen to start preparing your food.
2. First Contentful Paint (FCP)
What it measures: The time it takes for the browser to render the first piece of content from the DOM (Document Object Model). This could be text, an image, or even just a background color. It’s the first visual confirmation that the page is loading.
Why it matters: FCP is a crucial user experience metric. It gives the user feedback that something is happening. A fast FCP reassures the user that the page is loading.
Good target: Ideally, under 1.8 seconds.
Part of: LCP
Analogy: At the restaurant, FCP is like getting a glass of water or some bread shortly after you sit down. It shows that things are moving.
3. Largest Contentful Paint (LCP)
What It Is: Largest Contentful Paint, measures the time it takes for the largest visible element such as ( image or text block) on a webpage to become fully visible within the user’s viewport during the page load.
Good Score: Under 2.5 seconds.
Analogy: Using our restaurant analogy, it’s like finally receiving your main course after ordering
4. Speed Index (SI)
What it measures: How quickly the visible parts of the page are populated. It’s a measure of the overall visual progress of the page load. Unlike FCP, which only measures the first paint, Speed Index considers the entire above-the-fold content.
Why it matters: Speed Index gives a good indication of the perceived performance. A lower Speed Index is better. A page that loads most of its content quickly will have a lower Speed Index than a page that loads slowly, even if the total load time is the same.
Good target: Varies depending on the page, but generally, lower is better. Aim for under 3 seconds.
Analogy: This is like how quickly all the food on your table arrives. A lower Speed Index means all your dishes arrive quickly and together. A higher Speed Index means you’re waiting a long time between each dish.
5. Time to Interactive (TTI)
What it measures: The time it takes for the page to become fully interactive. This means the page is visually rendered, and the main JavaScript has loaded and is ready to respond to user input (clicks, taps, etc.).
Why it matters: TTI is a critical user experience metric. A page might look ready (FCP is fast), but if the user can’t interact with it, it’s still frustrating. Good target: Ideally, under 3.8 seconds.
Analogy: At the restaurant, TTI is like being able to actually eat your food and order more drinks. The food might be on the table (FCP), but if you can’t get the waiter’s attention or the utensils are missing, you can’t really enjoy the meal.
6. Total Blocking Time (TBT)
What it measures: The total amount of time that the main thread is “blocked” during the page load, preventing the browser from responding to user input. This is often caused by long-running JavaScript tasks.
Why it matters: TBT is a good proxy for interactivity. A high TBT indicates that the page might feel sluggish or unresponsive, even if it looks like it’s loaded.
Good target: Ideally, under 150ms.
Correlates with: INP.
Analogy: Imagine trying to talk to someone who is constantly interrupting you. You can’t get a word in edgewise. TBT is like the total amount of time you’re being interrupted.
7. First Input Delay (FID)
What it measures: FID gauges the responsiveness of a webpage by quantifying the delay users experience when they first interact with it.
Good Score: Under 100ms.
Replaced by: INP.
8. Interaction to Next Paint (INP)
What it measures: The responsiveness of a page to all user interactions throughout the visit.
Good Score: Under 200ms
9. Cumulative Layout Shift (CLS)
What it measures: The visual stability of the page. It quantifies how much the elements on the page move around unexpectedly during loading.
Why it matters: A high CLS is jarring and frustrating for users. It can lead to accidental clicks and a poor user experience.
Good target: Ideally, 0.1 or less.
Analogy: Imagine reading a book, and the paragraphs keep shifting around on the page. That’s what a high CLS feels like.
10. Number of Requests
What it is: This is a straightforward metric that counts the total number of individual files (like images, CSS, JavaScript, etc.)
Good Target: Fewer than 50 requests.
11. Page Size
What It is: It measures the size of the page.
Good Score: Less than 2MB.
Conclusion
Understanding these key page speed metrics is like having a full set of diagnostic tools for your website. They help you go beyond just knowing if your site is slow and allow you to pinpoint why it’s slow and where to focus your optimization efforts. In the next sections, we’ll explore the tools you can use to measure these metrics and track your progress.
Table of content
Cookie Settings
Our website uses cookies, which are small text files, to distinguish you from other users and provide you with a good experience when you browse our website. You can allow all or manage them individually.
