Guide on Google Core Web Vitals

Ever since they were first announced, Core Web Vitals have become a mainstay in SEO discussions. There are ample reasons for this justified interest, as Core Web Vitals now inform Page Experience. SEO-wise, Page Experience produces ranking signals – and the engagement it facilitates produces engagement signals. Even outside of it, a great Page Experience score denotes a great User Experience (UX), which no marketer can afford to overlook.

But what are they, exactly? What’s their exact benefit? How can you measure them, and how can you improve them? Much has changed from their initial announcement to now, so such information may be hard to consolidate. Thus, let us use this guide on Google Core Web Vitals to do so, and hopefully, help you understand them and adhere to them in the process.

What are Web Vitals?

Starting with their definition, we will first have to explore Web Vitals before delving into Core Web Vitals specifically. That’s because the latter are, in essence and function, a subset of the former. However, the latter also have their own unique function that bears noting.

Web Vitals, then, are a set of metrics that gauge the User Experience (UX) of a website. Their primary focus spans across the very first contact with a website, as it begins to load, all the way to first user input. They all collect field data, as collected in the Chrome User Experience Report, for example, and gauge overall UX.

In brief, these are the following:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Time To Interactive (TTI)
• Total Blocking Time (TBT)

Of course, each occurs at a different stage of the user interaction. The following illustration by Addy Osmani puts this into perspective:

What are Core Web Vitals?

Now, where things might become confusing is that not all Web Vitals constitute Page Experience ranking factors. It is only Core Web Vitals that do, which are:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Indeed, you will find that Google’s own Page Experience page only highlights Core Web Vitals. It does so alongside three other signals, of course, which we will discuss further down. Their Page Experience video series, found on the same page, also only discusses those three among Web Vitals:

This presents the first substantive distinction among Core and non-Core Web Vitals. While all of them measure UX, only the three Core ones affect Page Experience rankings.

To visualize this distinction, we may use the following illustration:

If you have seen the above illustration include “safe browsing” as well, fear not. Google clarified that “Safe Browsing isn’t used as a ranking signal” anymore. In turn, they have removed it from their old illustration and related page as well.

So, to summarize and dispel any leftover confusion:

• All Web Vitals measure UX
• Only Core Web Vitals constitute Page Experience ranking factors
• Page Experience ranking factors also include other metrics

Having clarified this, we may now focus our guide on Google Core Web Vitals specifically. That is not to say you should ignore the others, but only that the Core subset holds more value in this context.

Why should you care for Core Web Vitals?

Finally, before delving into Core Web Vitals themselves, let us establish their value. For text economy, we may consolidate it down to the three points that follow.

#1 They affect search rankings.

First and foremost, Core Web Vitals inform Page Experience, which in turn informs SEO scores and search rankings. Of course, this is not intended to be a substantive, impactful change compared to before, as Google also clarifies:

“As we have said before, while this update is designed to highlight pages that offer great user experiences, page experience remains one of many factors our systems take into account. Given this, sites generally should not expect drastic changes.”

However, they will be a notable factor to consider nonetheless. Marketers certainly believe so, as Google identifies a “median 70% increase in the number of users engaging with Lighthouse and PageSpeed Insights” in the months following the Core Web Vitals announcement. As SEO becomes increasingly competitive, many hold that even the slightest detail may give them a ranking edge.

#2 They will likely affect SEO more significantly.

A primary reason for this interest likely stems from the possibility of Core Web Vitals becoming more impactful over time. In the aforelinked update, Google also notes the following:

“[W]e plan to test a visual indicator that highlights pages in search results that have great page experience.”

Of course, this only suggests the willingness to conduct a test on Google’s part. However, JR Oakes’s observation earlier this year, among those of others, gave marketers room for pause. 

Rightfully so, one might argue; if this change does see release, it will certainly profoundly impact user behavior. A visual indicator may very likely attract more clicks, as users will expect a better UX. Conversely, the absence of one may deprive a search result of clicks, in turn pushing it further down into obscurity.

#3 They help provide a better UX.

Finally, on the subject of UX, Core Web Vitals explicitly measure UX and help webmasters and marketers improve it. In SEO contexts, a better UX helps produce better engagement signals, which in turn enhance one’s SEO score. But even outside of SEO, UX has a definitive, demonstrable effect on lead generation, acquisition, and conversion.

To use the speed generalization from before, simply consider the effect of slower loading speeds, as Google/SOASTA identified them:

In this fundamental regard alone, before discussing interactivity and responsiveness, UX matters significantly. Visitors bouncing from your website sabotages all your marketing efforts, as visitors will simply not get to see your content. 

Exploring Core Web Vitals

With the above context in mind, we may now discuss Core Web Vitals themselves. As we do, we will only briefly examine optimization options for the sake of readability and text economy. Still, we will refer to appropriate Google resources you may consult at your leisure.

#1 Largest Contentful Paint (LCP)

First among them comes LCP. While its name may seem the most technical to some, it is arguably the most SEO-adjacent. That is because it effectively measures loading speed, albeit in a more specific way.

LCP measures the time between when the page first starts loading and when the largest image or text block becomes visible in the user’s viewpoint. In this regard, it measures perceived loading speed, as Google explains:

“Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.”

This distinction aside, LCP also overlaps with SEO guidelines somewhat. That is, Google defines an ideal LCP as one of 2.5 seconds or less:

Measuring LCP

As with all Core Web Vitals, you may measure LCP through either field data or lab data. As regards the former, your choices include:

• The Chrome User Experience Report
• PageSpeed Insights
• The Core Web Vitals report in Search Console
• The web-vitals JavaScript library

As for the latter, you may acquire lab data through:

• Chrome DevTools
• Lighthouse
• WebPageTest

Ideally, you should prioritize field data as it offers a better overview of actual UX. Nonetheless, lab data can also offer excellent insights.

Improving LCP

The most common causes of poor LCP on your side include, perhaps unsurprisingly:

• Slow server response times
• Slow resource load times
• JavaScript and CSS that might block rendering

You may thus approach it in much the same way as you would a generally slower website. Server-side, consider server optimizations, Content Delivery Networks (CDNs), and more. Resource-wise, consider image compressions, revisit your image quantity choices, and so forth. Finally, you may minify CSS, optimize your JavaScript, opt for cached content, and more.

For more thorough optimization options, you may consult Google’s LCP optimization page.

#2 First Input Delay (FID)

Second among Core Web Vitals comes FID. As the name implies, FID is also rather SEO-adjacent as it measures interactivity and responsiveness.

Specifically, FID measures the time between the user’s first input, such as a click or tap, and the browser’s response. Regarding its usefulness and value, Google explains:

“First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable.”

Of course, given the nature of what it measures, FID’s score is measured in milliseconds, with Google identifying 100 ms or less as ideal:

Measuring FID

Unlike the other Core Web Vitals, you may only measure FID on the field – as it requires an actual user’s input. Your options here include, as with LCP:

• The Chrome User Experience Report
• PageSpeed Insights
• The Core Web Vitals report in Search Console
• The web-vitals JavaScript library

That said, Google’s aforelinked FID page also notes you may measure FID in JavaScript, using the Event Timing API. Finally, you may use Lighthouse performance audits to unveil FID improvement opportunities, despite it being a lab tool. On this, Google notes that “the guidance for improving FID is the same as that for improving the lab metric Total Blocking Time (TBT)”.

Improving FID

Having touched on improvements, you may also tap into SEO-relevant practices to improve FID. You may begin by examining and culling unneeded third-party scripts when possible, for example. You may use web workers to run JavaScript on background threads. You may also optimize your JavaScript itself by reducing execution times, minimizing unused polyfills, and more.

#3 Cumulative Layout Shift (CLS)

The third and final Core Web Vitals metric is CLS. As the name suggests, CLS measures visual stability within the user’s viewpoint. In this context, a “layout shift” occurs when a visible element changes its position as the page loads. Elements that do so may vary but will often include images and CTAs.

Notably, CLS does not measure layout shifts generally or in a vacuum. Instead, it measures unexpected layout shifts that occurred without user input – or despite it. User-side, it is the one that most heavily impacts user satisfaction, as Google explains:

“Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”

Unlike the other two, however, CLS is not measured in seconds. Rather, it is measured in CLS scores that consist of “impact fraction”, the area a moving element takes up in both frames, and “distance fraction”, the distance the element moved between them. Google defines a “good” score as one of less than 0.1, and a “poor” one as one higher than 0.25:

Measuring CLS

Like LCP, you may measure CLS through both field and lab tools. As above, your field options include:

• The Chrome User Experience Report
• PageSpeed Insights
• The Core Web Vitals report in Search Console
• The web-vitals JavaScript library

Lab data you may instead acquire through:

• Chrome DevTools
• Lighthouse
• WebPageTest

It is notable, however, that CLS also depends on actual users’ layout shift perceptions. Thus, lab tools may provide a more limited, inaccurate overview compared to field tools.

Improving CLS

Unlike the other Core Web Vitals, CLS improvements overlap with SEO practices much less. Typical causes of poor CLS include media without defined dimensions, typically images and video.  Ads, iframes, and other visual elements may also introduce CLS issues. Finally, dynamically generated content may do so as well, making cached content a more appealing option. To address these issues, you may define your media width and height size attributes in CSS or reserve page space for them. You may also reserve dedicated space for ads and generally avoid dynamic content whenever possible.

As CLS optimization options are highly technical, you may consult Google’s CLS optimization page for deeper analyses.

Other Page Experience signals

Having touched on Core Web Vitals, we may now briefly outline other Page Experience signals. Here we will maintain brevity for two primary reasons; first, experienced SEO practitioners will likely have addressed those already. Second, exploring them in-depth is outside of this guide’s scope and will likely not add substantial value.

#1 Mobile friendly

Mobile-friendliness is among the website qualities that almost nobody will argue against. There are multiple reasons for this, such as:

• SEO score; mobile-friendliness is a persistent mainstay among SEO ranking factors, as Backlinko confirms.
• Indexing; mobile-friendliness also affects indexing speeds, as Google has been indexing mobile versions of websites first since 2018.
• Revenue; finally, catering to mobile users directly affects final revenue, as Statista finds mobile traffic has surpassed desktop traffic.

Mobile-friendliness primarily hinges on universally appealing, desirable website qualities. These include fast loading speeds, responsive designs, and solid website structures that facilitate easier navigation. 

#2 HTTPS

Similarly, HTTPS remains marketers’ preferred SSL protocol. The main reasons for this continued favor include:

• SEO score; Google prioritizes secure websites and will thus prefer HTTPS over HTTP. In 2015, Google’s Gary Illyes confirmed this difference will “break ties” between otherwise equal search results.
• Security; Google is correct in this prioritization, as HTTPS is a much more efficient means of user security. What’s more, it is also GDPR-compliant.
• Confidence; finally, users themselves perceive HTTPS websites as more secure and are thus more confident in their interactions with them.

As regards the latter, Chrome now marks all non-HTTPS websites as “not secure” – in turn reducing users’ confidence in them. This is substantial all in itself, as Chrome is now the most popular browser in the world across all devices:

#3 No Intrusive Interstitials

Finally, intrusive interstitials also diminish Page Experience. These are typically intrusive popup ads, which take up the user’s screen real estate. 

There are, of course, multiple reasons to avoid them altogether. The most notable ones include:

• Diminished UX; whether on desktop or mobile devices, users will very rarely appreciate such intrusions that disrupt their navigation. 
• Reduced mobile-friendliness; moreover, as SearchEngineJournal asserts, intrusive popups significantly diminish mobile-friendliness. In doing so, they are directly undermining both Core Web Vitals and SEO guidelines.
• Google penalties; finally, Google itself will penalize websites that do so, as it recognizes their damage to UX.

Notably, however, Google will not penalize all popups. It recognizes that some are legally mandated, useful, or reasonable in their size. Examples of ones it will not penalize, from the aforelinked page, include:

• Cookie usage interstitials
• Age verification interstitials
• Banners that use “a reasonable amount of screen space”

Non-Core Web Vitals

Finally, with equal brevity, we may briefly outline non-Core Web Vitals and why they also warrant attention.

#1 Time to First Byte (TTFB)

TTFB constitutes the foundational Web Vital metric to track, as it measures server responsiveness. Specifically, as the name suggests, it measures the time between a resource request and the arrival of the first byte in response. On its usefulness, Google notes:

“Time to First Byte (TTFB) is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when a web server is too slow to respond to requests. In the case of navigation requests—that is, requests for an HTML document—it precedes every other meaningful loading performance metric.”

#2 First Contentful Paint (FCP)

After TTFB, FCP marks the start of a page’s loading process. It measures how long it takes for the first part of any page content to begin rendering. It thus enhances perceived load speed, much like LCP, as Google asserts:

“First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening.”

#3 Time To Interactive (TTI)

Adjacent to FID, TTI measures how quickly a page becomes capable of responding to user input. It thus follows FCP and informs FID, revealing interactivity and usability issues as Google notes:

“Time to Interactive (TTI) is an important lab metric for measuring load responsiveness. It helps identify cases where a page looks interactive but actually isn’t. A fast TTI helps ensure that the page is usable.”

#4 Total Blocking Time (TBT)

Finally, TBT measures the length of time between FCP and TTI during which the main thread was blocked. This lab metric also helps measure speed and responsiveness, as Google asserts:

“Total Blocking Time (TBT) is an important lab metric for measuring load responsiveness because it helps quantify the severity of how non-interactive a page is prior to it becoming reliably interactive—a low TBT helps ensure that the page is usable.”

Conclusion

To summarize, Core Web Vitals gauge websites’ Page Experience based on loading speed, responsiveness, and visual stability. They constitute half of all Page Experience search signals and thus inform final search rankings. In turn, they overlap somewhat with SEO best practices and share the conceptual goal of providing an impeccable UX. As Google continues to refine them and stress their significance, many believe their importance for SEO will only increase over time. Hopefully, this guide helped you understand them just a bit better – and inform your course in the process.

---

The post Guide on Google Core Web Vitals appeared first on Linkody’s blog.