The Guide to Understanding Google Web Core Vitals and Your Business Website

Google Core Values

In May 2020, Google announced that if sites wanted a ranking boost, they needed to meet its freshly rolled-out Web Core Vitals. The announcement gave site admins and marketing teams a year to get on top of things, but guess what? Yep, a whole year has passed, and that time is here.

In May 2021, sites that fail to meet the Web Core Vitals will likely see a slump in their search rankings – and definitely in their traffic. To make sure you’re not among them, here’s what you need to know.

What is Google Web Core Vitals?

Although marketers tend to associate Google with its keyword search, keywords have for years actually been just one factor in whether a page ranks well or not. Two pages with equally great and relevant content can rank at drastically different levels depending on the quality of the user experience they offer. If your page is slow-loading, buggy, unreadable on mobile, fails to meet accessibility standards and lacks HTTPS, it’ll rank below a speedy, secure, responsive page.

Google’s Web Core Vitals is an extension of this emphasis on user experience. It consists of three benchmarks:

  • Largest Contentful Paint (LCP): How long it takes to load your page’s main content. NB: we’re not just talking about the “above-the-fold” content here! Your page should clock in at 2.5 seconds or less.
  • First Input Delay (FID): How long after landing on your page can users actually interact with it? By this, we mean how long until they can click a link, expand a menu, or type in a box? This should be 100 milliseconds or less.
  • Cumulative Layout Shift (CLS): How often do unexpected layout shifts (those “jumps” when you load a page) happen? The score for this should be less than 0.1.

While these benchmarks align with Google’s earlier recommendations about speed and quality of experience, they’re different enough that your dev and marketing teams should test your site to make sure everything passes with flying colors.

How Do I Improve My Google Web Core Vitals?

To see how your site is performing, head over to your Google Search Console and click the section that says “Web Core Vitals”. This has replaced the previous “Speed Test” link. Once there, you’ll be able to access your mobile and desktop reports and generate a list of the pages that need improvement.

Here’s how to make sure your site performs above expectations for each of the Web Core Vitals benchmarks:

  • Largest Contentful Paint (LCP):
    • Remove third-party scripts – these slow your page load time.
    • Get a better web host. A faster host means faster loading! Use a CDN and pre-fetch your DNS queries as well.
    • Use asynchronous or “lazy” loading – this means that images only load as they’re being viewed, rather than all at once. Do the same with videos by using image placeholders for videos instead of pre-loading the whole video.
    • Reduce background images. Reduce the size of these, or remove them and replace them with patterns.
    • Use WebIP images. These have greater compression (and therefore faster load times) than JPEGs.
    • Streamline your CSS – an unwieldy CSS can lengthen load times. Preload, inline, minify and consolidate your CSS.
    • Identify and remove large page elements. Use your Google Web Core Vitals screen to identify these.
  • First Input Delay (FID): 
    • Minimize JavaScript execution time. Users can’t use a page while the browser is loading. Minimize or defer your JavaScript to get around this. (And use Google-hosted JS where possible.)
    • Remove third-party scripts – these slow your FID time.
    • Cache your content. Browser caching helps load content (including JavaScript tasks) faster.
    • Remove mobile above-the-fold images. This reduces FID as well as layout shifts.
  • Cumulative Layout Shift (CLS):
    • Set size attributions for your media. This creates a “box” for your media to fill, instead of your media expanding to fill an undefined space.
    • Put new UI elements below the fold. This stops content from being pushed down the page.
    • Reserve spaces for your ads. This stops your ads from pushing content around the page when they load.

If you’ve tried all of these, and you’re still not getting the green light from Google, a website redesign might be your best option. It might seem like a time-consuming and expensive route to go, but it’ll keep you in Google’s good graces – and your audience’s as well.

Fortunately, at StellaPop we’ve spent months digging into Google’s latest changes and how to optimize for them. For help on redesigning, refreshing, or relaunching your site to meet Google’s new standards, drop us a line!

See Also:

Visibility Is Key: Three Simple Tools to Help Search Engines Discover Your Website

Building a Better Homepage, “Like Woah”

Boosting Web Traffic with Social Media is the Bees Knees and Saves Trees

Related Posts