An Introduction to Core Web Vitals of PageSpeed

Barış Ünver is the founder of Optimocha, a tailored WordPress speed optimization service and owner of the Speed Booster Pack plugin.

Since their algorithm update in June 2021, Google effectively sees page experience as an important factor in terms of SEO. And one of the most critical parts of this “Page Experience Update” is what Google calls Core Web Vitals.

In this post, we’re going to go through what it is, and understand why each metric matters.

What is “Core Web Vitals”?

Here’s how Google describes Core Web Vitals, so I think it’s best to start with a quote from them:

(…) Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):

• Largest Contentful Paint (LCP): measures loading performance. (…)
• First Input Delay (FID): measures interactivity. (…)
• Cumulative Layout Shift (CLS): measures visual stability. (…)

Combine this info with Google’s announcement about CWV being a ranking factor in SERPs, and you can conclude that LCP, FID*, and CLS are the most important UX metrics for SEO, according to Google.

* A note about FID, from Google: “FID requires a real user and thus cannot be measured in the lab. However, the Total Blocking Time (TBT) metric is lab-measurable, correlates well with FID in the field, and also captures issues that affect interactivity. Optimizations that improve TBT in the lab should also improve FID for your users.”

Let’s dive into each metric a bit further.

Largest Contentful Paint (LCP)

As its name suggests, this metric measures the loading speed of the largest element (in pixels) with content within the viewport. Google decides this is the biggest indicator of perceived speed of a page, and they’re mostly right: When the largest element loads, like a paragraph or a hero image, our brains perceive that the page is loaded and available for us.

Improving LCP is mostly about eliminating render blockages and deferring asset (CSS, JS, images, fonts, etc.) downloads. This is why minifying assets and employing methods like critical CSS and lazy loading and JavaScript deferring is crucial for this metric.

First Input Delay (FID) and Total Blocking Time (TBT)

This is probably the most difficult-to-understand and the most difficult-to-improve metric of the three. (It seems that even Google had a hard time finding ways to measure this, so we can also say it’s the most difficult-to-measure.)

Even the most experienced performance optimization experts can have a hard time explaining this, so forgive me if I’m talking gibberish to you.

For a visitor to interact with the page, if the “main thread” of the browser (which is basically parsing the whole web page) takes longer than 50 milliseconds, Google considers the main thread “blocked” and tags the process as “Long Task”.

It measures the main thread task durations (minus 50ms for each task) and sums it up to call it “total blocking time”. Improving this metric is crucial for a user to interact with the page as early as possible, and that is what “first input delay” is all about.

Complicated? Absolutely. Hard to improve? You bet. But can it be done? N—yes. However, it requires some ruthless elimination of JavaScript usage, so tools for analytics, tracking pixels, cookie consent bars, live chat widgets, and whatnot hurts these two metrics dramatically.

Cumulative Layout Shift

Ever wanted to tap a menu button, only to realize that you tapped an ad that appeared out of nowhere within the split-second you decided to tap and tapped? That’s what a layout shift is; and “cumulative layout shift” is (obviously) the sum of all layout shifts in that page load.

Improving CLS is all about improving the performance of above-the-fold elements. Preloading images and fonts, allocating empty space for ads, critical CSS and stuff like these all contribute to a better CLS measurement.

(Personally, I don’t think this is at all related to optimizing a page’s performance – I mean it’s not even a time-based measurement! So, I disagree with Google about this being a “PageSpeed” metric, but it’s definitely an important metric to improve user experience.)

Conclusion: How to Approach PageSpeed and Core Web Vitals

Right now, in Lighthouse version 8, these three metrics make up 70% of that page’s PageSpeed score (source). However, like Google says (in the quote above), PageSpeed is constantly evolving; so you can expect this to be changed in the future.

And note that PageSpeed scores are getting more and more meaningless! You have to remember that if you’re trying to optimize your website to improve your SERP rankings, Core Web Vitals is the only set of metrics you should keep an eye on. Obsessing over having 100% PageSpeed scores for all your pages is not only meaningless but also harmful!

To learn more about how to optimize your website, head over to Optimocha.com and don’t hesitate to get in touch with Barış Ünver on LinkedIn.