Core Web Vitals

03 March, 2023

Search Engine optimization

Core Web Vitals

Core Web Vitals is a set of metrics that evaluate key components of page performance, such as loading speed, interactivity, and visual stability. By improving these elements, developers can ensure their websites are optimized for users, resulting in a better overall user experience.

What are Core Web Vitals?

Core Web Vitals are a set of specific ranking factors that Google considers important for the overall user experience of a website.

Core Web Vitals consist of three specific measurements of page load speed and user interaction:

  • Largest content image
  • First input delay
  • Cumulative layout shift

In short, Core Web Vitals are a subset of factors that are part of Google's "Page Experience" score (basically Google's way of evaluating the overall UX of your page).

You can find your website's Core Web Vitals data in the "Enhancements" section of your Google Search Console account.

Largest Content Image (LCP)

LCP is the time a page takes to load from the perspective of an actual user. In other words, it's the time from clicking a link until the majority of the content is displayed on the screen.

LCP differs from other page load metrics. Many other page load metrics (such as TTFB and First Contextual Paint) do not necessarily represent what it is like for users to open a web page.

LCP, on the other hand, focuses on what really matters when it comes to page load speed: the ability to see and interact with your page.

You can check your LCP score with Google PageSpeed ​​Insights. This is particularly helpful for identifying areas where you can make improvements.

It's recommended to check the LCP data in your Google Search Console. Why? Well, like Google PageSpeed ​​Insights, the data in Search Console comes from the Chrome User Experience Report. However, unlike PageSpeed ​​Insights, you can see LCP data across your entire website. So instead of randomly analyzing individual pages, you get a list of URLs that are good, bad, or somewhere in between.

Google has specific LCP guidelines. They divide LCP speed into three categories:

  • good
  • Improvement needed
  • bad

In short, you want every page on your website to reach LCP within 2,5 seconds. This can be a real challenge for large websites or pages with many features.

Therefore, the LCP on this page is 5,1 seconds (which is considered "bad").

This shows that improving LCP isn't as simple as installing a CDN. In this case, you might actually need to remove some images from the page and clean up the page's code.

Hard work? Absolutely. Is it worth it? Absolutely.

How do you improve the LCP of a website?

  • Remove unnecessary third-party scripts.

    A PageSpeed ​​study has shown that each third-party script slows down a page by 34 ms.

  • Update your web host

    Better hosting = faster overall loading times (including LCP).

  • Set up lazy loading

    Lazy loading ensures that images are only loaded when someone scrolls down your page. This means you can reach LCP (Lazy Computing Point) much faster.

  • Remove large side elements

    Google PageSpeed ​​Insights shows you if your page contains an element that slows down your page's LCP (Last Page Rendering Program).

  • Minify your CSS

    Bulky CSS can significantly delay LCP times.

First Input Delay (FID)

Next, we'll take a look at Google's second Core Web Vital: First Input Delay (FID).

At this point, your side has reached FCP. But the question is:

  • Can users interact with your site?

Well, that's exactly what FID measures: the time it takes users to actually interact with your site.

Examples of interactions include:

  • Selecting an option from a menu
  • Clicking on a link in the page navigation
  • Enter your email address in a field
  • Opening «Accordion Text» on mobile devices

Google considers FID important because it takes into account how users actually interact with websites. And, as with FCP, there are specific criteria for what constitutes an acceptable FID.

Yes, FID technically measures how long it takes for something to happen on a page. In that sense, it's a page speed score. But it goes beyond that and measures the time users need to actually do something on your page.

For a page that consists 100% of content (like a blog post or news article), FID probably doesn't play a significant role. The only real "interaction" is scrolling down or zooming in on the page.

In fact, my Search Console isn't even reporting FID for my website. I think that's because I don't have any login pages or other pages where someone would have to enter something immediately.

But for a login page, a registration page, or any other page where users need to click on something quickly, FID is extremely important.

What can be done to improve the FID scores of a website?

  • Minimize (or delay) JavaScript

    It's nearly impossible for users to interact with a page while the browser is loading JavaScript. Therefore, minifying or delaying JavaScript on your page is key to FID (Full Interface Delay).

  • Remove all non-critical third-party scripts.

    As with FCP, third-party scripts (such as Google Analytics, heatmaps, etc.) can have a negative impact on FID.

  • Use a browser cache

    This helps content on your page load faster. This helps your users' browsers navigate through the loading of JS tasks even faster.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) refers to the stability of a page during the loading process (also known as "visual stability").

In other words, if elements on your page move during the loading process, you have a high CLS (Clause Rate). That's bad.

Instead, your page elements should remain fairly stable during the loading process. This way, users don't have to relearn where links, images, and fields are located once the page has fully loaded, or accidentally click on something.

How can I minimize CLS?

  • Use fixed-dimensions for all media (videos, images, GIFs, infographics, etc.): This way, the user's browser knows exactly how much space the element will occupy on the page and won't change it quickly once the page has fully loaded.
  • Make sure that ad elements have a reserved space: otherwise they may suddenly appear on the page and move content down, up, or to the side.
  • Add new UI elements below the fold: This way you avoid moving content that users "expect" to stay in place.

How can you improve Core Web Vitals?

  • Implement a caching solution.
  • Remove blocking resources that are hindering rendering.
  • Delay the loading of JavaScript.
  • Use a Content Delivery Network.
  • Resize and optimize your images properly.
  • Implement lazy loading.
  • Optimize your website fonts.
  • Improve your WordPress hosting.

Similar articles:

Request free SEO consultation

Enter your details and we will contact you 📅

    Increase your traffic!

    Analyze your website now ➜

    Switzerland Flag