Learn how to improve your Core Web Vitals For better SEO

27 Oct 2020 Last updated: 17 Nov 2022 By Juan Pineda

It is a fact that users prefer websites with a great page experience.

Google has long been known for its focus on delivering the best possible user experience (UX). In recent years, the company has added additional criteria to its search engine ranking algorithms, including website performance and mobile compatibility. This ensures that users consistently have the best possible experience when using Google to find information online.

Table of contents:

What Is Core Web Vitals?

According to Google:

“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger – how annoying!).”

Core web vitals contribution to search signals for page experience
Source: Blogspot.com

Web Vitals is an initiative by Google to identify and provide a unified guide to quality signals that are essential to providing a great user experience on the web.

Core Web Vitals is a subset of the Web Vitals metric set that is relevant to all webpages. These metrics concern speed, responsiveness, and visual stability. Google’s goal is to help site owners measure user experience on the web and create a better online experience for their users.

When did Core Web Vitals roll out?

In May 2020, Google announced that the search engine would include Core Web Vitals as a basis for evaluating the page experience. The new page experience signals combine Core Web Vitals with their existing search signals including mobile-friendliness, HTTPS-security, and intrusive interstitial guidelines.

Starting in May 2021, Google began using page experience signals in mobile ranking. In February 2022, they have started using them in desktop ranking as well. The rollout was completed by the end of March 2022.

If you’re not sure where to start, don’t worry! In this article, we’ll walk you through the basics of improving your Google Core Web Vitals for SEO. We’ll also show you some tools and resources that can help you get started. So let’s get started!

Are Core Web Vitals important for SEO?

As an experienced SEO agency, we frequently get questions about Google Core Web Vitals and its importance for ranking on search engines. Core Web Vitals are essential for website optimisation and are one of the many factors that Google considers when ranking a website. Optimising these elements can help your website rank higher and improve your online visibility.

However, there are over 200 ranking factors, and many of which don’t carry much weight. The Core Web Vitals SEO impact will be severe for some websites with poor page experience. But websites with good user experience won’t see any impact at all. That’s because Google still prioritises other search ranking factors, such as the quality of content, site authority and backlinks, when determining how to rank a website.

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.

As part of this update, we’ll also incorporate the page experience metrics into our ranking criteria for the Top Stories feature in Search on mobile, and remove the AMP requirement from Top Stories eligibility.

Google: Evaluating page experience for a better web

Google Core Web Vitals

The metrics used by the Core Web Vital signal will evolve over time. But as of March 2022 they are:

Largest Contentful Paint (LCP)

The LCP metric helps to provide users with a sense of how long they will have to wait for the page’s main content to load. This allows them to better assess if the page is worth their time.

To provide a good user experience, LCP should occur within 2.5 seconds of the page first starting to load.

First Input Delay (FID)

The FID metric measures responsiveness and quantifies the experience users feel when they first try to interact with the page. A low FID helps ensure that the page is usable.

To provide a good user experience, pages should have a FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS)

The CLS metric measures visual stability and quantifies the amount of unexpected design change in visible page content. Low CLS helps ensure a pleasant experience for users.

To provide a good user experience, pages should maintain a CLS of less than 0.1.

Core Web Vitals - Good and bad values for LCP, FID and CLS
Source: googleusercontent.com

How to measure Core Web Vitals for my website

All of Google’s popular tools for web developers now support measurement of Core Web Vitals, helping you more easily diagnose and fix user experience issues. This includes Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension and a new Chrome UX Report API.

With the Google Measure tool, you can keep a history of your page performance records.

Workflow to improve your user-experience with Core Web Vitals

If you’re looking to improve your website’s performance, Google has a few recommendations for you. By following their suggested workflow, you can identify and fix any bottlenecks that are causing your site to load slowly:

  1. To identify groups of pages that require attention for improvement, navigate to the Core Web Vitals report in your Google Search Console.
  2. For each page that needs attention, use Google PageSpeed Insights (PSI) to identify issues around the metrics “Largest Contentful Paint”, “Total Blocking Time” (it correlates with FID) and “Cumulative Layout Shift”. These metrics can help you determine where you should focus your optimisation efforts.
  3. The Lighthouse dev tool can help you measure Core Web Vitals and take actionable guidance on what to fix. You can work locally on the recommendations provided by PSI using this tool.
    • To access Lighthouse, open your Chrome browser and select the Developer Tools. Lighthouse will be available as a tab on the right-hand side of the screen.
    • Run a performance report.
  4. If you’re interested in monitoring your website’s performance in real-time, you can install the Web Vitals Chrome extension. This will give you a live view of all the key metrics you need to keep an eye on.
  5. Deploy your changes and analyse the improvements with PSI then confirm better metrics reported are reported by GSC.

Optimise Largest Contentful Paint (LCP)

To reduce the LCP you can look at the following key elements:

  • Your hosting: A quick response time from the server will improve your LCP. If you are running a website on WordPress, we recommend using Temok as your hosting provider. Temok offers a free migration and provides a fast hosting infrastructure, with effective caching mechanisms, and a content delivery network (Cloudflare CDN), all of which help to ensure that your website loads quickly for your visitors. In addition, Temok offers a free SSL certificate and a free WAF to help keep your website secure.
  • Website cache: Adding a caching mechanism to your website will help you serve your content from its cached version, minimizing the number of times your web server needs to get the data from your database server. Autoptimize is a great WordPress cache plugin that will help you compress and optimise your assets.
  • Website code: CSS and JS files should be minified and deferred if they are not critical to the page. Commercial themes usually take care of this if they follow good practices. If you are creating a custom theme, make sure you use the best practices recommended by WordPress.
  • Images: If you do not have an image optimisation tool at your disposal, you can use the online tool Iloveimg to convert your images to the right format and size, and compress them to an optimal resolution. Additionally, adding an image CDN to your website can provide a better user experience by delivering images faster. Cloudimage is a reliable and fast image CDN that can help improve the performance of your website.

Addional video resource from Google: How to improve Largest Contentful Paint for a better page experience

> See also: 10 reasons to use Cloudflare on your website

Optimise First Input Delay (FID)

To reduce the FID you can look at the following key elements:

  • Break down large JavaScript files and only load the necessary ones for the page.
  • Minify and compress your JavaScript files.
  • Defer non priority JavaScript files.
  • Review the 3rd party scripts that you are using and make sure that they are coming from a CDN and are minified.
  • Review 3rd party widgets that you are using (social media widgets for example) and try to include as few as possible.

Addional video resource from Google: How to improve First Input Delay for a better page experience

Optimise Cumulative Layout Shift (CLS)

To reduce the CLS you can look at the following key elements:

  • Add width and height attributes to your images and video elements.
  • If you have 3rd party ADS on your page, you are probably setting their placeholders dynamically to allow these slots to expand or collapse depending on the AD. You could try to predefine the AD slot area or move them down the middle or the bottom of the page, so they shift less elements than if they were at the very top of the page.
  • Review embeddable widgets  and iframes that can cause content shifting when loading (maps, social media posts, etc). Try to define the height of your embeds to minimize the amount of content that will be shifted down when the page loads.
  • If you use a custom web font, use the preload attribute to get the browser to load the font early in the page lifecycle. This will increase performance and will reduce CLS.

Addional video resource from Google: How to improve Cumulative Layout Shift for a better page experience

Wrapping It Up

With Google giving priority to the Mobile Index and incorporating Core Web Vitals as an important user experience signal, optimising for quality of user experience should be a must in your SEO strategy.

LCP Core Web Vitals Metric and how to improve it

Core Web Vitals - LCP Status Metrics

LCP should occur within 2.5 seconds of when the page first starts loading.
How to fix LCP issues: Get a quality server to host your website. Choose a CDN to server your images. Review your code for quality. Minify and defer your CSS/JS when possible. Add cache components at different levels (Varnish, Redis, Cloudflare, cache plugins and so on).

FID Core Web Vitals Metric and how to improve it

Core Web Vitals - FID Status Metrics

Pages should have a FID of less than 100 milliseconds.
How to fix FID issues: Break down large JS files and load only the ones needed for the page, defering their load when possible. Review carefully the 3rd party scripts and widgets that you use.

CLS Core Web Vitals Metric and how to improve it

Core Web Vitals - CLS Status Metrics

Pages should maintain a CLS of less than 0.1.
How to fix CLS issues: Define the areas that your images, iframes and ADS take on your page, setting the appropriate dimensions (width and height) so the screen doesn’t jump when the page is loading. Preload your fonts when possible.

References & Credits

https://web.dev/vitals/

https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

https://developers.google.com/web/tools/chrome-user-experience-report

Are you struggling with Google Core Web Vitals?

If you have been unable to improve the Core Web Vitals for your website, we would be happy to help. Please don’t hesitate to contact us for assistance.

Looking for professional SEO services?

Look no further! Our team of experts will help you get the traffic and visibility you need to take your business to the next level.

Juan Pineda Juan Pineda

Managing Partner at Agile Digital Agency. Juan is an experienced digital professional with more than 20 years of experience in web solutions, digital marketing, and innovation. He holds a degree in Computer Sciences, and has worked internationally for renowned digital agencies. Juan provides clients with his skills and expertise in the digital field to create successful online solutions.