Why are core web vitals important?

Posted on by Lani Haque

What exacltly are these core web vitals? These are 3 metrics that are not just ranking factors for SEO but they help determine the potential user experience level of a webpage and website.

3 metrics used to measure core web vitals.

  1. Speed
  2. Interactivity
  3. Visual stability,

of a webpage

These core web vitals are ranking factors for SEO.  They are part of the factors in Google’s “page experience” score.

3 Core Web Vitals

Largest Contentful Paint (LCP)

  • This measures how long it takes the largest content element to load on a page.
  • Ideally, we want to LCP to be less than 2.5 seconds for a good user experience.

Cumulative layout shift (CLS)

  • This measures how much a page’s layout shifts unexpectedly as it loads.
  • Ideally, we would like CLS to be less than 0.1 for good user experience.  (What is the unit of measure for this?)

First input delay (FID)

  • This measures how long it take for browser to respond to a user’s first interaction with a page.  E.g. click, tap
  • Ideally, we want to be less than 100 milliseconds for a good user experience.

Interaction to next pain (INP)

  • This will replace FID in March 2024
  • Ideally, we would like to be less than or equal to 200 milliseconds for fast and responsive experience.
  • This can be found in GSC under “enhancements”.

Page Experience

This is an official Google ranking factor.  This includes the following:

  1. https
  2. mobile friendliness
  3. lack of interstitial pop ups
  4. safe browsing (no malware on page)
  5. core web vitals.

Note, there are approximately 200 ranking factors Google uses.

How to improve each core web vital

LCP (Large contentful paint)

This is how long it take a webpage to load from the point of view of the user.  E.g. time from clicking on the link to seeing most of the content. 

This score can be checked using,

  1. Google Page Speed Insights – Shows how pages performs in the real world based on Chrome data.
  2. Website Checker

GSC is another place to look at LCP facts. This data comes from the Chrome user experience.

Ideally, you want every page to hit LCP within 2.5 seconds. This can be tough for large web pages or pages with lots of features.  Installing a CDN can help.

Solutions for LCP

  1. Remove unnecessary third-party scripts.  Each third-party scripts slow a webpage down by 34 milliseconds
  2. Upgrade your web hosting.  Better hosting = faster loa times, overall
  3. Set up lazy loading. This optimizes how images and loads so they are only downloaded when someone scrolls down the page.
  4. Remove large page elements.  Google Page speed Insights will tell you if your page has elements that are slowing down LCP.
  5. Minify your CSS.  Bulky CSS can slow down LCP.

First Input Delay (FID)

FID measures the time it take for a user to interact with your page.   For example,

  • Choosing an option from a menu
  • Clicking on a link in the site’s navigation
  • Entering email into a field
  • Opening an “accordion text” on a mobile device.

This is important to Google because it takes into account how real life users interact with websites and webpages.

When a page is 100% content, blog post, articles, FID is not as big a deal. The main and only interaction is probably scrolling down the page, pinching and zooming.

When is FID a big deal?

  1. For pages with logins
  2. Sign up pages.
  3. Pages where users have to click on something.

Solutions for FID

  1. Minimize, or defer, JavaScript.  It is impossible for the user to interact with a page if the browser is loading JavaScript.
  2. Remove any non-critical third-party scripts.  As with FCP, third party scripts like GA, heat maps, etc. can negatively impact FID.
  3. Use a browser cache.  This helps load content on a page faster.  It helps the browser blast through JavaScript loading tasks faster.

Cumulative Layout Shift (CLS)

This is how stable a webpage is as it loads, visual stability. E.g If elements on the page move around as the page loads, CLS is high, which means instable and is bad.

Ideally, you want a webpage’s elements to be stable as it loads so users don’t have to relearn where elements are, click on something by accident, or must wait too long.

Solutions for CLS

  1. Use set size attribute dimensions for any media, e.g. videos, images, gifs, infographics, etc.  The browser will know how much space that element requires and won’t change it as the page loads.
  2. Make sure ads elements have a reserved space  If they don’t, they can suddenly appear on the page pushing content / elements on the page around.
  3. Add new UI elements below the fold. This way new elements don’t push content the user expects to find above the fold down.

Interaction to Next Paint (INP)

INP measures the time it takes browser to respond to a user’s interaction with a page.  E.g. click, tap, after page has finished loading. 

It is like FID but focuses on responsiveness after the page has loaded.

Solutions for INP

  1. Reduce JavaScript execution time.
  2. Minimize third party scripts.
  3. Use a CDN
  4. Optimize image sizes.
  5. Use browser caching.

References

  1. www.banklinko.com/hub/seo/core-web-vitals
Lani Haque
Latest posts by Lani Haque (see all)
Avatar for Lani Haque
Lani Haque

I enjoy learning and sharing that knowledge. Sharing has been in many forms over the years, as a teaching assistant, university lecturer, Pilates instructor, math tutor and just sharing with friends and family. Throughout, summarizing what I have learnt in words has always been there and continues to through blog posts, articles, video and the ever growing forms of content out there!

You May Also Like

More From Author