Core Web Vitals Metrics Explained

Let’s dive into the world of web metrics, shall we? Specifically the ones that are part of Google’s Page Speed metrics / Google Lighthouse, the Core Web Vitals. It is the combination of these metrics that give you the so desired perfect 100 scores.

Now, often times these acronyms can be a bit hard to grasp as to what they actually mean, so we’ve tried to be as colorful as we could in explaining them. Bear with us.

Time to First Byte (TTFB)

First up, we have Time to First Byte (TTFB). This is the time it takes for your browser to receive the first byte of data from the server.

It’s like waiting for the first drop of rain to fall – the quicker it happens, the better. You can control TTFB by optimizing your server response time. You control your server response time by working on fast origin hosting, and a lean and mean WordPress site.

First Contentful Paint (FCP)

Next, we have First Contentful Paint (FCP). This is the time it takes for the first piece of content to appear on the screen.

It’s like waiting for the first star to appear at night – the sooner you see it, the sooner you can make a wish (or in this case, start interacting with the page).

You can improve FCP by minimizing your server response times and optimizing your render-blocking resources. The solution here lies in both the hardware you’re working on and how fast it responds, much like TTFB, but also how and in which sequence assets are loaded for your WordPress site.

Largest Contentful Paint (LCP)

Then there’s Largest Contentful Paint (LCP). This is the time it takes for the largest piece of content to appear on the screen.

It’s like waiting for the main course to arrive at a restaurant – the quicker it arrives, the happier you are.

You can improve LCP by optimizing your images and text, and by removing any unnecessary render-blocking resources. Simple and straight-forward, right?

First Input Delay (FID)

First Input Delay (FID) is the time it takes for the page to respond after a user first interacts with it.

It’s like waiting for a response after you’ve asked someone a question – the quicker they respond, the better the conversation flows.

You can improve FID by breaking up long tasks, optimizing your page for interaction readiness, and using a web worker. Think smaller and more relevant executables. Especially when JavaScript is involved.

Time to Interactive (TTI)

Time to Interactive (TTI) is the time it takes for the page to become fully interactive.

It’s like waiting for a game to load – the quicker it loads, the quicker you can start playing.

You can improve TTI by minimizing main thread work and keeping request counts low and transfer sizes small. Optimizing is done similarly to improving your FID.

Total Blocking Time (TBT)

Total Blocking Time (TBT) is the total amount of time that a page is blocked from responding to user input.

It’s like being stuck in traffic – the less time you spend stuck, the better.

You can improve TBT by minimizing main thread work and keeping request counts low and transfer sizes small. Again, similar to FID and TTI.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the amount of unexpected layout shift of visible content on a page.

It’s like trying to read a book while someone keeps turning the pages – the less it happens, the better your reading experience.

This is probably one of the most annoying ones you’ll experience because stuff keeps changing as the page you’re loading keeps moving around.

You can improve CLS by always including size attributes on your images and video elements, and by never inserting content above existing content, except in response to a user interaction.

Interaction to Next Paint (INP)

Finally, we have Interaction to Next Paint (INP). This is the time from when a user interacts with your site to the time the browser starts to render the next frame. INP is one of the more recent iterations of the Core Web Vitals and deserves your immediate attention.

It’s like waiting for the next slide in a presentation – the quicker it appears, the smoother the presentation. You can improve INP by optimizing your JavaScript execution and minimizing your main thread work.

So there you have it, folks – the ABCs of web metrics. Remember, controlling these metrics is like taming a wild beast – it takes time, patience, and a lot of testing.

But, by understanding what these metrics mean, and where to look as to improving them, you’ll be well on your way to creating a smoother, faster, and more enjoyable user experience.

Happy optimizing!