What you should know about Google and Core Web Vitals

Search engines crawl and evaluate your website almost everyday. They look at meta tags, page headers, link structure, quality of content, page load speed and lots of other metrics that make up the algorithm. So getting your on-site technical SEO right is important and can have a big impact on your rankings.

As someone that has been close to SEO for most of my 20 years career in digital, I thought I'd write this blog post to help website owners understand more about Core Web Vitals, Google’s latest algorithm update that rolled out in June 2021.

Google’s goal to provide users with the most relevant, highest quality results based on user search queries remains. The latest algorithm update is based around user experience. In fact they have named it the ‘Page Experience Update’.

So website owners are being asked to look for opportunities to fine-tune performance, security and mobile friendliness so that their web pages load quickly and smoothly when a user visits the page for the first time.

But why does this matter?

We all want our websites to attract inbound visitors that search for our products or services and find our content relevant and helpful. So much of a website’s success is based on its search engine ranking. Getting found near the top of Google search results can make a huge difference.

The average click-through rate for the #1 result on the first page of Google is 32 percent on a desktop device. For mobile devices, this rate is 26.9 percent. Where you land on a search engine results page matters, and when Google adds new factors like Core Web Vitals, site owners should pay attention and take note.

So here’s what I think you need to know about Core Web Vitals, how they may be impacting your website, and what you can do about it. 

What are Core Web Vitals?

Core Web Vitals are a set of user-focused metrics that have been carefully put together to measure a page’s performance. They measure how smooth and seamless the user experience is for a particular web page. 

Generally, these metrics are composed of three components:

• Content loading speed
• How quickly a page becomes interactive
• Visual stability

Since it launched in 1998, Google has refined and iterated its algorithm to better analyse all the small details of our websites so that they can provide the best experience to their users.

Why does this matter? Organic search results have a great deal of power when it comes to reaching potential leads online. In fact, 53 percent of all website traffic comes from organic searches. 

The roll-out of the Page Experience update is an opportunity for businesses who want to out-perform their competition. By fixing and improving Core Web Vitals metrics they will be sure to gain ranking.

Website owners that don’t implement these best practices will be given lower search rankings than those that do.

But there’s no need to panic—this is a routine and natural progression of Google’s ranking algorithm.

Everything we already know about search engine optimization (SEO) rankings still stands. Original, relevant, helpful content is the best way to attract visitors to your website, but Google’s Core Web Vitals will also evaluate how these websites perform when users interact with the site. 

As shared on Search Engine Journal, you can think of Core Web Vitals simply as:

“the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. 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.”

What are the three Core Web Vitals?

Google has outlined three Core Web Vitals that they will use to assess and rank a website’s user experience:

1. Loading Time: Largest Contentful Paint 

The first Core Web Vitals ranking factor is Largest Contentful Paint (LCP).

This refers to how long it takes for the main content of a page to download when a visitor hits a web page; how long it takes to be ready to be interacted with. 

Google measures the LCP by tracking how long it takes for the largest image or block of content to load within the browser window—anything that reaches beyond the screen does not count for a site’s LCP score.

Elements that are measured usually include:

• Images
• Video poster images
• Background images
• Block-level text elements

A good LCP score isn’t just important for your Core Web Vitals. It’s also important for your overall user experience.

Consider that 47 percent of consumers expect a web page to load in 2 seconds or less, and even a one-second delay in page response can lead to a 7 percent total reduction in conversions.

2. Interactivity: First Input Delay

The next Core Web Vital is First Input Delay (FID).

This metric evaluates how long it takes from when a user inputs an action for the page to execute that command—actions like:

• Clicking a link
• Clicking a button
• Pressing a key

According to Google, an FID score of less than 100 milliseconds is considered ideal, but anything over 300 milliseconds will impact your SEO performance. 

3. Visual Stability: Cumulative Layout Shift

The third metric for Core Web Vitals is Cumulative Layout Shift (CLS).

This metric measures how stable your website is as it loads. 

You likely know what this metric is referring to if you’ve ever noticed how images and links shift down as a website loads.

This kind of shifting and changing indicates a high CLS score, which means that the page elements aren’t visually stable, negatively impacting search engine rankings and a page’s Core Web Vitals. 

Optimising a website’s stability for Core Web Vitals will prevent users from having a frustrating experience with your website. An unstable site can result in a visitor clicking on the wrong link and traveling to the wrong page. 

Core Web Vitals as a Google Ranking Factor

In 2020, Google Search Central released an announcement ahead of the introduction of their Core Web Vitals ranking signals. In its blog post, Google shared the following:

“Earlier this month, the Chrome team announced Core Web Vitals, a set of metrics related to speed, responsiveness, and visual stability, to help site owners measure user experience on the web.

Today, we’re building on this work and providing an early look at an upcoming Search ranking change that incorporates these page experience metrics. We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.”

In conjunction with this message, the Google team also confirmed that Core Web Vitals are only a part of a site’s rankings.

The good news is that relevance still plays a critical role in a site’s search engine rankings.

For websites that find that their Core Web Vitals need improvement, fixing these issues may improve their rankings.

For websites that already have strong Core Web Vitals, small improvements may not impact your rankings much at all. 

How can you measure Core Web Vitals?

Core Web Vitals can be measured using the following six tools:

• Google Search Console: Google search Console allows users to measure their Core Web Vitals and evaluate pages across their entire site all at once, based on real-world data from the Chrome UX Report.

• PageSpeed Insights: PageSpeed Insights can be used to measure Core Web Vitals in a controlled environment (Lab Data) and the real world (Field Data). Field Data shows how your site has performed over the past 30 days and within PageSpeed’s test.

• Lighthouse: Lighthouse measures LCP and CLS, and also measures Total Blocking Time (TBT) which correlates with First Input Delay, or FID. 

• Chrome DevTools: Chrome DevTools is an invaluable tool to help site owners fix instability issues that contribute to a poor CLS. 

• Chrome UX Report: The Chrome UX report tracks and measures field versions of a site’s Core Web Vitals, which means it reports on real-world data, not lab data.

• Web Vitals Chrome Extension: Web Vitals Extension that measures your Core Web Vitals in real-time.  

You can use these tools to run a Google Core Web Vitals check.

Once you have a report and understand where improvements need to be made, it’s time to figure out how to fix them so that you can provide the best user experience possible.

How to improve your Core Web Vitals

So, once you see where you need to make improvements, what can you do to fix your Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift? 

Improving Your Largest Contentful Paint (LCP)

The goal here is to reduce the amount of data that downloads to a user’s device while also reducing the time it takes to execute that content. That target is less than 2.5 seconds.

You can achieve this by:

• Optimising your images using next-gen image formats such as WebP. WebP images are small than JPEG or PNG so will load quicker. Online services such as convertio.co make it easy to convert images to WebP.

• Preloading critical resources so that important elements that appear above the fold are requested as soon as possible by the browser. You can preload them by adding a <link> tag with a rel= "preload" attribute to the head section of your HTML source code.

• Reduce server response times. If your server takes too long to respond to a request, it will take longer for the page to render on a user’s screen. Improve your server response time by using a Content Delivery Network to cache images, minify code and pre-connect to third-party origins. I recommend using CloudFlare for this purpose.

Improving Your First Input Delay (FID)

One way to improve your FID is to reduce the number of third-party scripts that are loaded remotely into your web page. We're aiming for 100 milliseconds.

Services such as heat-mapping, A/B testing, social plug-ins or analytics software add bloat. But I get it, we need to use these services.

In this case third party scripts should be loaded asynchronously.

You can minify and compress these CSS files, break long Javascript into shorter, simpler tasks, and use lazy loading for content that doesn’t need to appear right away. You should also remove any unused third-party tracking tags. 

Improving Your Cumulative Layout Shift (CLS)

Cumulative Layout Shift isn’t something that’s been measured before, but can really impact the user’s overall experience. We need to aim for a score of 0.1 or less.

We’ve all experience CLS from time to time - a sudden shift in page elements just as we are about to click. 

A video demonstrating clearly the impact of Cumulative Layout Shift

You can implement different techniques to set aside the correct amount of space for each piece of content before additional content is loaded to improve page layout stability.

There are a few ways to do this:

• Set explicit widths and heights on images and iframes
• Make use of the aspect-ratio CSS Property for things like embedded videos and images
• Make use of minimum height (min-height) for elements that don’t need to be a responsive size

You can discover even more ways to improve your CLS for better stability here. You’ll find that web fonts, fallback elements, templates, and more, can all play into how your website loads, and how stable it is.

When algorithms change and Google introduces technical SEO updates like Core Web Vitals it can be confusing and difficult to know where to start. I can help you identify where your site may be underperforming.