Learn how to improve your Core Web Vitals For better SEO

27 Oct 2020 Last updated: 15 Jan 2024 By Juan Pineda

It is a well-known fact that users prefer websites with exceptional page experiences.

Google has a long-standing reputation for prioritising the best possible user experience (UX). In recent years, the company has introduced further criteria to its search engine ranking algorithms, including website performance and mobile compatibility, to guarantee that users consistently receive the best experience when using Google to search for information online.

What Are Core Web Vitals?

According to Google:

“Core Web Vitals is a set of real-world, user-centred 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 aimed at identifying and offering a unified guide to the quality signals that are critical to delivering an exceptional user experience on the web.

Core Web Vitals is a subset of the Web Vitals metrics that is relevant to all web pages. These metrics focus on speed, responsiveness, and visual stability. Google aims to assist website owners in measuring user experience on the web and creating a superior online experience for their users.

When Did Core Web Vitals Roll Out?

In May 2020, Google announced that the search engine would incorporate Core Web Vitals as a fundamental evaluation for the page experience. The new page experience signals merge Core Web Vitals with the search engine’s existing signals, including mobile-friendliness, HTTPS security, and intrusive interstitial guidelines.

Starting from May 2021, Google began using page experience signals in its mobile ranking, with the rollout being completed by the end of March 2022, including the use of them in desktop ranking.

If you’re unsure where to begin, don’t worry! This article will guide you through the basics of enhancing your Google Core Web Vitals for SEO. We’ll also provide you with some useful tools and resources to get started. So let’s get going!

Are Core Web Vitals Important For Seo?

As a seasoned SEO agency, we are often asked about the significance of Google Core Web Vitals in search engine ranking. Core Web Vitals are essential for website optimisation and are among the numerous factors that Google takes into account when ranking a website. Optimising these elements can increase your website’s ranking and enhance your online visibility.

However, there are over 200 ranking factors, many of which have limited weight. The impact of Core Web Vitals on SEO can be significant for websites with poor page experience, but it will not affect websites with good user experience. This is because Google still places priority on other ranking factors, such as the quality of content, site authority, and backlinks when determining website rankings.

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 in the Core Web Vital signal will change over time, but as of March 2022, they include:

Largest Contentful Paint (LCP)

The LCP metric helps users understand the time they need to wait for the main content of the page to load, enabling them to determine whether the page is worth their time.

For an optimal user experience, LCP should occur within 2.5 seconds of the page beginning to load.

First Input Delay (FID)

The FID metric measures responsiveness and evaluates the experience users have when they initially interact with the page. A low FID helps guarantee that the page is user-friendly.

For an optimal user experience, pages should have a FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS)

The CLS metric calculates visual stability and determines the amount of sudden design change in the visible content of the page. A low CLS helps create a satisfying experience for users.

For an optimal 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

Google provides several popular tools for web developers that support the measurement of Core Web Vitals, enabling you to conveniently identify and resolve user experience issues. These include Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension and a Chrome UX Report API.

Using the Google Measure tool, you can track and retain records of your page’s performance history.

Learn more about Google’s tools to analyse and improve the performance of your website.

Workflow To Improve Your User Experience With Core Web Vitals

If you’re looking to improve your website’s performance, Google has some recommendations for you. To optimise your website, follow these steps:

  1. Check the Core Web Vitals report in your Google Search Console to identify which pages require improvement.
  2. Use Google PageSpeed Insights (PSI) to examine the Largest Contentful Paint, Total Blocking Time (which correlates with FID), and Cumulative Layout Shift metrics for each page.
  3. Use the Lighthouse dev tool to measure Core Web Vitals and receive actionable guidance on what to improve. You can access Lighthouse by opening your Chrome browser and selecting Developer Tools.
  4. Run a performance report using Lighthouse.
  5. If you’d like real-time monitoring, install the Web Vitals Chrome extension to get a live view of key metrics.
  6. Deploy your changes and use PSI to analyse the improvements, then confirm better metrics are reported by the Google Search Console.

Read more about this workflow as recommended by Google.

Optimise Largest Contentful Paint (LCP)

To optimise your LCP, you can consider the following key factors:

  • Server: Choose a hosting provider that offers a fast response time, such as Temok. They offer a free migration, fast hosting infrastructure, and effective caching mechanisms, as well as a Content Delivery Network (CDN) via Cloudflare. This can help ensure that your website loads quickly for visitors. Temok also provides a free SSL certificate and a free Web Application Firewall (WAF) to keep your website secure.
  • Caching: Implementing a caching mechanism on your website can help to serve content from its cached version, reducing the number of requests to the database server. Consider using the Autoptimize plugin for WordPress, which helps to compress and optimise assets.
  • Front-end Code: Minimise and defer non-critical CSS and JS files. If you are using a commercial theme, it should already implement these best practices. If you are creating a custom theme, ensure you follow WordPress’ recommended practices.
  • Prefetch and preconnect: If your website is connecting to 3rd party domains, you can improve your web performance metrics if you place dns-prefectch and preconnect directives in the head element of your website.
  • Content: Make sure the content above the fold is minimal and optimised for your key pages. Try to put your large elements, such as embeds, videos, and image galleries below the fold on your key pages.
  • Images: Optimise images to the correct format, size and resolution, and use an image optimisation tool if necessary. Consider using an image CDN, such as CloudImage, which can help improve the performance of your website by delivering images faster, and using modern image formats.

Additional 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 First Input Delay (FID), consider the following steps:

  • Split large JavaScript files into smaller parts, and only load the necessary ones for the specific page.
  • Minimise the size and compress the JavaScript files.
  • Delay the loading of non-priority JavaScript files until after the main content has loaded.
  • Check the third-party scripts that you are using and make sure they are being served from a Content Delivery Network (CDN) and are minimised.
  • Consider the third-party widgets that you are using, such as social media widgets, and aim to use as few as possible to reduce the impact on the FID.

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

Optimise Cumulative Layout Shift (CLS)

To reduce CLS, consider the following key elements:

  • Adding width and height attributes to images and video elements.
  • Addressing dynamic placeholder settings for third-party ads, by predefining the ad slot area or placing them further down the page to limit content shifting.
  • Reviewing embeddable widgets and iframes that may cause content shifting during loading, and defining the height to minimize the shift.
  • Using the preload attribute for custom web fonts (Google fonts or others) to improve performance and reduce CLS.

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

Wrapping It Up

Optimising for a high-quality user experience should be an integral part of your SEO strategy, with Google placing priority on the Mobile Index and incorporating Core Web Vitals as a key indicator of user experience.

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 serve 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, deferring 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 Having Difficulties With Google’s Core Web Vitals?

We’re here to help you!

If you’ve been struggling to enhance your website’s Core Web Vitals, you don’t have to worry anymore. Our team of search engine optimisation consultants is ready to assist you. Please feel free to contact us for support.

Top Technical SEO London 2024 - By Clutch

Our commitment to excellence is underscored by our recognition as a Top Technical SEO Company in London for 2024.

Juan Pineda Juan Pineda

Managing Partner at Agile Digital Agency, Juan brings over two decades of digital expertise to the forefront. With a degree in Computer Sciences and a rich professional background spanning internationally acclaimed digital agencies, Juan is a seasoned digital professional. Specialising in web solutions, digital marketing, and innovation, he channels his skills to craft successful online solutions for clients.