If you have any interest in SEO and achieving higher rankings on Google, you will at some point have heard about Google’s page experience update and their use of Core Web Vitals.

This post will provide you with a basic explanation of the three metrics Google uses to determine if your site provide a good user experience for your visitors.

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!)”

What are the three core web vitals?

  • LCP, or Largest Contentful Paint
  • FID, or First Input Delay
  • CLS, or Cumulative Layout Shift

What is LCP (Largest Contentful Paint)?

This measures how long it takes for the largest piece of content to appear on the screen. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

What is FID (First Input Delay)?

This measures how long it takes for the site to react to the first interaction. This could be a tap on a button, for instance. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

What is CLS (Cumulative Layout Shift)?

This measures the visual stability of your site. In other words, does stuff move around on the screen while it is loading. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

How do you measure Core Web Vitals?

Google offers the following ways to measure your Core Web Vitals:

  • Search Console
  • PageSpeed Insights
  • Lighthouse
  • Chrome DevTools
  • Chrome UX Report
  • Web Vitals Extension

How to measure Core Web Vitals using Google Search Console:

Visit your Google search Console account here and select the “Core Web Vitals” option in the main menu as shown below.

Here you’ll see an overview of your site, with the mobile and desktop versions listed separately.

Click “Open Report” to delve deeper into any issues.

How to measure Core Web Vitals using Google PageSpeed Insights:

Visit the Google PageSpeed Insights page by clicking here and typing in the full URL of the page you’d like to test. You’ll see a result showing the following information.

Scroll further down the page to the diagnostics section and you’ll be given actionable tips on how to improve your Core Web Vitals.

How do you improve Core Web Vitals?

Here is a small selection of pointers from Google PageSpeed Insights:

  • Minimize main-thread work
  • Avoid chaining critical requests
  • Keep request counts low and transfer sizes small
  • Avoid large layout shifts
  • Avoid long main-thread tasks
  • Avoid non-composited animations
  • Eliminate render-blocking resources
  • Properly size images
  • Defer offscreen images
  • Minify CSS
  • Minify JavaScript
  • Efficiently encode images
  • Serve images in next-gen formats
  • Enable text compression
  • Preconnect to required origins
  • Keep initial server response time short
  • Avoid multiple page redirects
  • Preload key requests
  • Use video formats for animated content
  • Remove duplicate modules in JavaScript bundles
  • Preload Largest Contentful Paint image
  • Uses efficient cache policy on static assets
  • Avoids an excessive DOM size
  • User Timing marks and measures
  • Ensure all text remains visible during webfont load
  • Minimize third-party usage
  • Lazy load third-party resources with facades
  • Use passive listeners to improve scrolling performance
  • Ensure image elements have explicit width and height

You’ll find the resources below from around the web extremely helpful:

7 Tips to Improve Your Core Web Vitals Scores & Page Experience Signals – by Search Engine Journal

Here’s a quick summary of what you’ll learn:

  • Preload key resources to speed up visual load times
  • Optimize main thread activity by minimizing long tasks
  • Reserve space for images & embeds to load into
  • Make sure key page templates are mobile-friendly
  • Audit your site for security issues
  • Make sure forms & embedded resources are served over https
  • Ensure interstitials don’t obstruct crucial content

Check out their post here for full details.

Core Web Vitals: What They Are & How to Improve Them – by Backlinko

Here’s a quick summary of what you’ll learn:

  • Remove any unnecessarily third-party scripts
  • Upgrade your web host
  • Set up lazy loading
  • Remove large page elements
  • Minimize (or defer) JavaScript
  • Use a browser cache

Check out their post here for full details.

5 Ways to Improve Your Core Web Vitals – by Yoast

Here’s a quick summary of what you’ll learn:

  • Optimize your images
  • Stabilize loading by specifying room for images and the like
  • Speed up your server to get that loading time down
  • Look into critical CSS to load above the fold content quicker
  • Improve loading of third-party scripts

Check out their post here for full details.

Core Web Vitals Report: 28 Ways to Supercharge Your Site – by Search Engine Watch

Core Web Vitals sign made with tile letters. SEO term, new ranking signal

Here’s a quick summary of what you’ll learn:

  • Image optimisation
  • CSS optimisation
  • JavaScript optimisation
  • Video optimisation
  • Font and icon optimisation
  • Server optimisation

Check out their post here for full details.

How to Optimize Core Web Vitals for WordPress (Ultimate Guide) – by WP Beginner

Here’s a quick summary of what you’ll learn:

  • Optimise your WordPress hosting
  • Improving Largest Content Paintful (LCP) score
  • Improving First Input Delay (FID) score
  • Improving Cumulative Layout Shift (CLS) score
  • Eliminate render blocking elements
  • Properly size images in WordPress
  • Use a CDN to server to improve Web Vitals score

Check out their post here for full details.

Need help?

Get in contact today if you need help optimising your website for Google.