Core Web Vitals: why is it important for Google, and therefore for you?

Core Web Vitals

Since 2021, Google’s algorithm has included Core Web Vitals as an element that directly impacts search results and the SEO of your website. Having good indices no longer gives you a simple competitive advantage, it is now an essential point for the visibility and sustainability of the latter.

In this article, we will see what Google Core Web Vitals are, why they impact your website and your SEO, and above all, how to improve these metrics.

What are Core Web Vitals or Essential Web Signals?

Summary

  • What are Core Web Vitals or Essential Web Signals?
    • Le LCP (Largest Concertful Paint)
    • Le FID (First Input Delay)
    • Le CLS (Cumulative Layout Shift)
    • Other Core Web Vitals Clues
  • How to improve Core Web Vitals for the benefit of SEO?
    • Improve your FID
      • Optimization du code CSS
      • Idle until urgent
    • Improve CLS
      • Use aspect ratios on images
      • Precalculated the space for your images
      • Preload your fonts
    • How to improve the LCP?
      • Image optimization
      • Choose a lightweight theme
      • Don’t use too many plugins
    • What to remember about CWVs
      • Frequently Asked Questions
      • What is Core Web Vitals?
      • Why is it important to optimize Core Web Vitals?
      • How to optimize Core Web Vitals?
      • Pay-per-click (PPC For Plastic Surgeons)

It was Google, the leader of search engines, which developed and introduced the concept of Core Web Vitals abbreviated as CWV and translated as Essential Web Signals. These are web performance indices, purely internal and specific to the pages of your site.

The 3 indices of the Core Web Vitals are as follows:

  1. Le LCP (Largest Concertful Paint)
  2. Le FID (First Input Delay)
  3. Le CLS (Cumulative Layout Shift)

The introduction of these CWVs starts from an observation that could not be more logical. Users prefer websites that provide a great user experience!

By implementing technical SEO that elevates CWV scores, websites can then provide higher quality search results for both Google and searchers. This means that sites with a good Core Web Vitals score are more likely to achieve higher search rankings than sites with a poor Core Web Vitals score.

These indices are governed by technical factors that generally require the expertise of a senior web developer who knows how to modify your site at the code level in order to improve its performance and meet the page experience criteria required by Google.

Before even wanting to modify the CWVs of your website, we invite you to take a Core Web Vitals test or to consult these indices from the Google Search Console

Now, let’s see how to understand these clues and how to improve them!

Le LCP (Largest Concertful Paint)

Source: https://www.sooyoos.com/publication/core-web-vitals-ou-limportance-grandissante-de-lux-en-seo/

LCP (Longest Concertful Paint) refers to the time it takes for a page to load from the perspective of a real user.

It measures the time that elapses between when you click on a link and when you see the majority of the content on the screen. The time it takes for the most important piece of content (usually an image, graphic, or video) to render on the page is specifically referenced.

You can check your LCP score using Google Page Speed ​​Insights, as well as the Lighthouse audit tool. Google has specific LCP guidelines. They divide the LCP speed into three categories:

  1. Good: The largest piece of content is rendered in less than 2.5 seconds.
  2. Medium: Largest piece of content renders in less than 4 seconds, but takes longer than 2.5 seconds.
  3. Bad: Rendering the largest piece of content takes longer than 4 seconds.

If at least 75% of page views on a site meet the “good” threshold, the site is classified as performing well on the LCP metric. Conversely, if at least 25% of the page views meet the “average” threshold, the site is classified as having fair/improvable LCP performance.

Le FID (First Input Delay)

First Input Delay (FID) measures the time it takes for a user to actually interact with your page. To put it another way, it measures the time between page loading and when a user can interact with the content.

FID technically measures how long it takes for something to happen on a page. In this sense, therefore, it is a page speed score. However, the FID goes a little further and measures the time it takes for users to perform an action on your page.

Here are some examples of these interactions with users:

  • Choose an option from a menu
  • Clicking on a link in the site navigation
  • Enter their email address in a field
  • Open “accordion text” on mobile devices

Which scores are considered good for FID? They are divided into three categories:

  1. Good: Your page has an excellent FID score if it is less than 100 MS.
  2. Medium: If your page score is above 100 MS, but below 300 MS, your FID score needs improvement.
  3. Bad: An FID scores greater than 300 MS is considered poor performance.

Le CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) measures the visual stability of a web page as it loads. CLS in particular is a very mobile-centric Core Web Vital metric, since screen size challenges are mostly non-existent on desktop websites.

CLS specifically measures how often page elements “move” across the screen. This parameter, if neglected, can therefore seriously harm the UX by making it difficult for users to interact with content on smaller mobile screens. Typical causes of screen elements lag include advertisements, images, and other layout elements that display after the user has already begun to interact with and navigate the content of the page.

In summary, if your page elements move around too much when loading, you have a high CLS, which is bad. CLS scores are divided into three categories:

  1. Good: Your page has a good CLS score if it is below 0.1.
  2. Medium: Your page’s CLS score should be improved if it’s below 0.25 but above 0.1.
  3. Bad: If your page’s CLS score is poor and above 0.25, it means it needs a lot of work.

Other Core Web Vitals Clues

The LCP, FID and CLS are the 3 Essential Web Signals, but be aware that there are other clues that are important to Google. You must therefore ensure that the score of these is “good” if you want to have optimal functioning for your site, as well as a good natural referencing.

To a lesser extent, you should also seek to optimize Secondary Web Vitals, in other words, Secondary Web Signals. They include the following criteria:

  • Have a responsive website, which is displayed on smartphones and tablets as well as on computers
  • A secure site (https)
  • The presence of GDPR
  • A site not spammed with ads

How to improve Core Web Vitals for the benefit of SEO?

 

As you will have understood, CWVs are now essential to optimize the SEO for Jewelry Business of your site. It would also be more accurate to say, the SXO of your site. Seeking to improve them will therefore be all the more important if your traffic acquisition strategy is based on natural referencing.

Here are some useful practices to improve your CWV scores quickly!

Improve your FID

Optimization du code CSS

When it comes to CSS files, they should be downloaded and parsed as quickly as possible so that the browser can render the layout of the page. Because of this, your options for reducing the impact of CSS on your first input time are limited. However, you can refer to best practices, such as minifying and compressing your files or removing unused CSS code.

Idle until urgent

Idle until urgent is a code evaluation strategy. The latter incorporates elements of the two most popular approaches to code evaluation: eager evaluation and lazy evaluation.

  • The eager evaluation means that all your code is executed immediately. This approach results in a page that loads for a long time until it is fully interactive and runs smoothly.
  • Lazy evaluation is the opposite approach: your code is only executed when it is needed. While it has its advantages and can be useful for some sites, lazy evaluation means you may experience an input lag once the code needs to run.

Idle until urgent takes the best aspects of both approaches to provide an intelligent way to evaluate your code, so that input delay is minimal.

This allows you to run your site’s code during periods of inactivity, using the main thread as much as possible. At the same time, it ensures that urgently required code is executed immediately.

To sum up this computer gibberish, tell yourself that your page will only display what your prospects need right away and then load the heavier code. This increases the speed of your website, making it immediately functional.

Improve CLS

Now that we know the main causes of the cumulative layout shift, we can apply best practices to bring it back to zero on every page.

Use aspect ratios on images

This is in line with the principle of the responsive website we were talking about a little earlier.

Since mobile responsiveness became the norm, modern browsers set the default aspect ratio of images based on their width and height, so developers can set those parameters.

When using responsive images, the screw attribute sets them. You then allow the browser to select the size of each image and choose a different one. You just need to make sure that each image uses the same aspect ratio.

Precalculated the space for your images

Bake space for graphics to prevent them from causing CLS issues. To do this, just follow these steps:

  1. Get the dimensions of your site by “Right click” + “Inspect”
  2. Create a placeholder for integration in these dimensions
  3. Once the embed is loaded, your frame will be resized to fit its content

Preload your fonts

First, you can reduce font download time by using the Font Loader API. You can also use the font-display tool to change the rendering of custom fonts.

The only problem is that all of this time saving can result in a re-layout of the page, which will worsen your CLS score.

The most effective way to improve your CLS is therefore to preload all the fonts. Whenever possible, only use fonts already preloaded by your CMS

How to improve the LCP?

Image optimization

Image optimization is a collection of techniques that can improve all Core Web Vitals metrics and reduce layout lags.

Here’s how to optimize your images to make them less heavy, and therefore improve your LCP

  1. Image compression

Compression consists of applying different algorithms to remove or group parts of an image, thus making it smaller.

There are two types of compression: lossy and lossless.

Lossy compression removes portions of data from the file, resulting in a lower quality, lighter image. JPEG and GIF are examples of lossy image types.

Lossless compression maintains nearly the same image quality, i.e., it does not drop any data. It produces heavy, high-quality images. RAW and PNG are lossless image types.

There is many software online to reduce the weight of your images such as Loving or Optimizely.

  1. Choose the right size

The trickiest part of choosing image formats is finding a balance between “quality” and “loading speed”.

High quality images are heavy, but look great. Low resolution images look less beautiful, but load faster.

In some cases, high resolution images are necessary to stand out from the competition. Think of photography and fashion sites for example.

For others (news sites and personal blogs), lower resolution images are fine.

The choice here depends on your personal needs. Again, you need to run tests to see how the quality of the images affects the behavior of your visitors.

Advice:

  • Use the SVG format for images made up of simple geometric shapes like logos.
  • Use the PNG format whenever you need to preserve quality while sacrificing a bit of speed.
  • For the best balance between quality and UX, use Web while keeping the original format as a backup since Web is not supported by all browsers.

Again, don’t forget to experiment with compression levels after choosing your image type.

Choose a lightweight theme

A free theme on a CMS like Shopify or WordPress will tend to quickly reach its limits and get heavy quickly.

Luckily, some themes are also suitable for web, even with a lot of content. So, make your choice carefully, and don’t just watch the demos.

Don’t use too many plugins

While plugins offer useful features, most of them also come at a performance cost. They increase the amount of code to execute, which leads to greater resource consumption. Research each plugin carefully and monitor your site’s performance after adding them.

What to remember about CWVs

As you will have understood, Essential Web Signals or Core Web Vitals are, as their name suggests, essential for the good referencing of your website. Both taken into account by search engines and appreciated by Internet users when they are optimized, these performance indices are not the most popular. And for good reason! SEO is a big subject; it is estimated that the Google algorithm takes into account more than 200 criteria to establish the rankings of web pages. Criteria such as LCP, FID and CLS are therefore not the ones that should be treated as a priority to obtain more organic traffic.

 

By zainliaquat