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

Contents

  1. Introduction
  2. What are Google Core Web Vitals?
  3. How important are Google’s Core Web Vitals?
  4. Key Metrics of Google’s Core Web Vitals
  5. How to improve your Core Web Titals scores?
  6. Conclusions

What are Core Web Vitals?

Core Web Vitals is the algorithm from Google that can calculate the main factors that could affect the user experience. Google has identified three main web vitals of user experience:

  • Interactivity — First Input Delay (FID)
  • Visual stability — Cumulative Layout Shift (CLS)

How important are Google’s Core Web Vitals?

Now one of the most important factors of ranking in Google is user experience.

Google with all new updates of its algorithm makes this factor more and more important for ranking. And on 28 of May 2020 Google announced that they will use new factor for ranking “Page Experience”. But what is Page Experience for Google? As we said before Core Web Vitals is a part of Page Experience and here are the other parts of PE:

  • Mobile friendliness
  • Lack of interstitial pop ups
  • Lack of malware

Key Metrics of Google’s Core Web Vitals

What are the key metrics of CWV and how to improve them?

Largest Contentful Paint (LCP)

LCP is time with what page will be loaded for real users. In other words, it is a time from clicking a link to the moment when most of the content appears on the FIRST screen of the website. LCP is measured in seconds. LCP is about User Experience because it is a time from loading the page to the moment when users get the ability to interact with your site. To find this metric you can use Google PageSpeed Insights. Example of LCP calculating

  • Render-blocking JavaScript and CSS
  • Slow resource load times
  • Client-side rendering

First Input Delay (FID)

If your site has a good LCP the next step is to understand how much time is needed to interact with your site. So FID is how long it takes for something to happen on the page after you click (or other interaction). There are some examples of interactions:

  • Clicking on a link in the site’s navigation
  • Entering your email into a field
  • Opening “burger” menu on the mobile phone
  • Remove any non-critical third-party scripts
  • Use a browser cache

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) — it is a metric that shows how stable your page is after it is loaded. For example, if your page has an ad block, that appears after the page is loaded, then you will have high CLS.

  • Make sure ads elements have a reserved space
  • Add new UI elements below the fold

How to improve your Core Web Vitals scores?

The time you’ll spend to Influence your web vital scores and improve them will depend on the page content amount and abundance of JavaScript code on it. Here are some tips and free tools to refine them.

Optimize your images

  • Use for background blobs or patterns.
  • Use native attribute loading=”lazy” for images. More about lazy loading find here.
  • Leave the first mobile screen for text, without images.

Preload Fonts

If your website doesn’t have font preloading, you might run into a situation when a browser is ready to load your site’s text, but it can’t because the font isn’t available yet because it needs to download the font before it can paint the text. Add to your website Font preloading. It makes a user’s browser load important fonts early on so that the browser can start displaying text as soon as it’s ready, rather than potentially waiting to load the font.

Advanced Options

You can use Webpack to optimize, modify JavaScripts, CSS and images, as well as simplify their cashing. Also, there are cases when Code Splitting may be effective, for instance, dealing with animation.

Conclusions

The relevance of the question of how to optimize Core Web Vitals progresses day by day. Customers working practically in any domain, especially e-commerce, real estate, mass media, and a range of others that crucially depend on their visibility on the Internet, urgently search for this expertise and information. The earlier you start optimizing your website, the better. If you need website development with a focus on speed and performance or assistance and help with your website Core Web Vitals, feel free to contact us.

We build software and we do it right | Custom web and mobile development | https://anadea.info/

We build software and we do it right | Custom web and mobile development | https://anadea.info/