How Core Web Vitals will impact page experience and SEO

Most marketers already know that in order to get traffic and potential leads to your website, you need to attract a sizable portion of them organically through the king of search engines: Google. And this feat is achieved by following search engine optimization principles, and their ever evolving practical application.

Speaking of evolution, Google has now introduced a new set of metrics for what they deem a healthy site, namely Core Web Vitals. What are they? How do you measure them? And what impact will they likely have?

What are Core Web Vitals?

Keywords manipulation and URL handling are no longer the decisive factors in the world of SEO. The user experience, including bounce rate and average time on page, is becoming increasingly more important.

But how does one measure the quality of user experience? In the Chromium Blog, Ilya Grigorik, Web Performance Engineer at Google, presents a set of factors called “Core Web Vitals.” These factors are touted as being critical for all web experiences, and address e.g. loading experience, interactivity, and visual page content stability.

The Core Web Vitals are divided into three categories:

Largest Contentful Paint (LCP)

This set of factors measures the perceived load speed of your page, but also marks the point in the page load timeline when the main content was most likely loaded. In short: how fast does the page load the content the users really care about?

In general, the faster the LCP, the higher probability for the page being assessed by Google as useful for the visitor. Read more technical details about LCP on web.dev.

First Input Delay (FID)

FID measures load responsiveness by quantifying the experience users feel when they initially try to interact with the page. While LCP can be compared to how fast a site paints its pixels, FID can be compared to how fast users can interact with said pixels.

A thumb rule is that the lower the FID, the more usable the page is in Google’s eyes. For more technical in-depth, see web.dev.

Cumulative Layout Shift (CLS)

This third set of factors measures the visual stability of a page, helping to quantify the frequency of users experiencing unexpected layout shifts, for instance if a button suddenly moves in the last second of loading time.

The general rule here is that the lower the CLS, the higher probability that the page is viewed as delightful. Read all the technical details on web.dev.

See also: Enonic: A flexible platform for the future »

How to measure CWV

The easiest way to get started quickly on measuring Core Web Vitals is to test your URL on Google PageSpeed Insights. This service tests all the mentioned factors under CWV, in addition to First Contentful Paint. You can see the different scores for both mobile and desktop, and delve into the diagnostics.

In the screenshot below, we tested Enonic.com after performing several improvements:

See also: How Enonic can be the hub for your digital experiences »

How to improve CWV

Improving your Core Web Vitals will lead to a better score by Google and therefore higher ranking, if you simultaneously have a thoughtful SEO strategy, complete with keyword optimization.

Improving LCP

According to Google, these are the most common causes of bad LCP, and suggestions on how to optimize them:

• Slow server response times

  • Optimize your server

  • Route users to a nearby CDN
  • Cache assets
  • Serve HTML pages cache-first
  • Establish third-party connections early
• Render-blocking CSS and JavaScript

  • Minify CSS

  • Defer non-critical CSS
  • Inline critical CSS 
  • Minify and compress JavaScript files
  • Defer unused JavaScript
  • Minimize unused polyfills
• Slow resource load times

  • Optimize and compress images

  • Preload important resources
  • Compress text files
  • Deliver different assets based on network connection (adaptive serving)
  • Cache assets using a service worker
• Client-side rendering

  • Minimize critical JavaScript

  • Use server-side rendering
  • Use pre-rendering

See more details for improving the LCP on web.dev.

Improving FID

In order to improve your First Input Delay, you can do the following:

• Break up Long Tasks
• Optimize your page for interaction readiness

  • First-party script execution can delay interaction readiness

  • Data-fetching can impact many aspects of interaction readiness
  • Third-party script execution can delay interaction latency
• Use a web worker
• Reduce JavaScript execution time

  • Defer unused JavaScript

  • Minimize unused polyfills

See more technical details on improving FID on web.dev.

Improving CLS

Improving the Cumulative Layout Shift can be achieved by optimizing the following causes of poor CLS:

• Images without dimensions

  • Always include width and height size attributes on your images and video elements

  • Each image should use the same aspect ratio
• Ads, embeds, and iframes without dimensions

  • Statically reserve space for the ad slot

  • Take care when placing non-sticky ads near the top of the viewport
  • Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder
  • Eliminate shifts by reserving the largest possible size for the ad slot
  • Choose the most likely size for the ad slot based on historical data
  • Obtain the height of your final embed by inspecting it with your browser developer tools
  • Once the embed loads, the contained iframe will resize to fit so that its contents will fit
• Dynamically injected content

  • Avoid inserting new content above existing content, unless in response to a user interaction

  • Reserve sufficient space in the viewport
• Web Fonts causing FOIT/FOUT

  • Modify the rendering behavior of custom fonts with font-display (with precautions)

  • The Font Loading API can reduce the time it takes to get necessary fonts
  • Use <link rel=preload> on the key web fonts
• Animations

  • Prefer transform animations to animations of properties that trigger layout changes

For more details on improving the CLS, see web.dev.

When will CWV come into effect?

Google has announced that Core Web Vitals will come into effect in May 2021.

This means that CWV will be combined with the following factors:

• Mobile-friendliness
• Safe-browsing
• HTTPS-security
• Intrusive interstitial guidelines

As for the impact of CWV, it is too early to say. As SEO expert Neil Patel points out, we do not know exactly how much an impact Core Web Vitals will have on page ranking. We only know that Google is paying much more attention to on-page experience than before, and that pages with better user experiences are likely to rank higher in search results than pages with bad user experiences.