Updated Core Web Vitals and guidelines for improving site pages to comply with it

Since its founding in 1998, Google has given increasing importance to the user experience, which prompted it to constantly update its algorithms. It has recently officially announced the inclusion of what it calls Core Web Vitals (basic web performance indicators) in the ranking of search results, within… The Page Experience Update initiative includes other ranking factors, such as compatibility with smart devices and SSL certificates.

Explanation of the Core Web Vitals update and instructions for improving site pages to be compatible with it

The Core Web Vitals standards offer an opportunity to improve your site’s ranking, but only if you understand them correctly and know what you need to do to make your site compliant. That is why we provide you here with a detailed explanation of this update, and we introduce you to the most important tools that enable you to evaluate the extent of your site’s compatibility with it, and we provide you with the most important instructions that must be followed to improve the site’s compatibility with its three factors.

What is the Core Web Vitals update?

Core Web Vitals are 3 important specific factors that measure the speed of a web page and its interaction with the user, that is, the performance of the page according to Real World Usage Data, and are part of the criteria for the “Page Experience” score. Core Web Vitals include three factors:

  • The speed at which the largest piece of content on the page (LCP) is displayed
  • Response time to first input (FID)
  • Cumulative Design Variables (CLS)
Image showing how core web trends relate to page experience

Core Web Vitals update agents

Each of the previous three factors – which represent the core web performance indicators (Core Web Vitals) – measures something specific related to the user experience, and they are page-specific factors, that is, each page of your site has values ​​​​independent of the others. Here we explain what each of these factors measures, and in the next paragraph we explain how to know the measurement value of the page for each factor.

Largest Content Part (LCP) display speed factor

LCP measures the speed of loading the page, but it differs from other metrics that measure speed, such as TTFB and FCP, which measure the response speed of the web server, and the time required to display the first element of content, respectively, as this factor depends on the time required to display the largest visible element of the page content, which is assumed It must be located within the display area.

Depending on the number that the page’s largest portion of content displays, the page’s status is defined as either “good,” “needs improvement,” or “slow,” and the following image shows the boundaries between these states:

Largest Content Piece (LCP) display speed limits

Response time to first input (FID)

The FID measures the amount of page interactivity, and represents the time required for the browser to respond to any interaction that the user makes with the page for the first time, whether this interaction is clicking on a button or link, entering an email in a field, or anything else. This measure is considered important in pages that Where the user needs to perform an action, such as login pages or registering on the site.

Depending on the value of the First Input Delay (FID), a page can be rated as Good, Needs Improvement, or Poor, and the following image shows the values ​​that make a page belong to each status:

Limits of response timeout states for the first input

Cumulative Design Variables (CLS)

The Cumulative Design Variability Factor (the third Core Web Vitals indicator) measures the level of visual stability of the page, that is, the amount of unexpected change in the design of the page. The more elements on the page move, the higher its CLS, and the worse this is, and this takes The operator is zero or any positive number, where zero indicates that the positions of page elements do not change unexpectedly (without user interaction).

Google considers page visual stability important, as it says that difficulty for the user to interact with page elements due to their changing locations is one of the characteristics of a poor user experience. Also, if the positions of visible page elements are stable while loading, users will not have to re-search for the links, images, and fields they saw while loading the page after the browser has finished loading. Optical stabilization will also prevent the user from clicking on elements by mistake.

It should be noted here that the belief that the Cumulative Design Variables (CLS) factor only measures the visual stability of the page while it is loading is a misconception, as this factor measures the stability of the page throughout the entire life of the page.

Like LCP and FID, the CLS factor is either good, needs improvement, or poor, and the boundaries that separate these states are shown in the following image:

Limits of factor states of cumulative design variables

The following table summarizes the concepts of the three Core Web Vitals, explaining the most common values ​​they can take, and when values ​​are considered good, bad, or need improvement:

Core Web Vitals agent Largest piece of content (LCP) display speed Response time to first input (FID) Cumulative Design Variables (CLS)
The thing that the worker measures Page loading speed The amount of interactivity of the page The extent of visual stability of page elements
Good values 2.5 seconds or less 100 milliseconds or less 0.1 or less
Values ​​that need improvement From 2.5 to 4 seconds From 100 milliseconds to 300 milliseconds From 0.1 to 0.25
Bad values More than 4 seconds More than 300 milliseconds More than 0.25
A table summarizing the concepts of Core Web Vitals factors and their respective state limits

Measuring Core Web Vitals

Currently, there are several methods and tools that measure the Core Web Vitals of web pages, including:

  • Google SEO Tools (Google Search Console).
  • PageSpeed ​​Insights Toolkit.
  • Google Lighthouse tool.
  • Chrome DevTools.
  • Web Vitals add-on for Google Chrome.

We will not explain here all of the Core Web Vitals measurement tools mentioned above, but we will explain the first and second tools, as well as the Google Chrome plugin (Web Vitals) that you can install on your browser from here .

1- Google Search Console tools

Google Search Console tools provide you with a lot of data about your websites, to which we have added a Core Web Performance Indicators report that provides you with the ability to see the current and past status of your website addresses, on mobile phones and computers, each one separately. When you open a page Core Web Vitals report for your site. You will find two cards, the first showing the site’s performance on mobile phones, while the second shows its performance on computers. You will be able to open the Core Web Vitals report on either of them by clicking on the “ Open Report ” button located at the top of the card.

Core Web Vitals report for a site in Google Search Console

If you click on the “ Open Report ” button located on the two cards, the tool will show you more detailed data about the good, bad and need improvement pages on your site, taking into account the three Core Web Vitals factors, and you will be able to export the report in the form of a Google spreadsheet or a file. Excel or CSV file by clicking the “ Export ” button.

Core Web Vitals report on mobile from Google Search Console

Please note that the Google Search Console Core Web Performance Indicators report may not include all the web pages on your site, as it only shows URLs that have been indexed, and which have a minimum amount of data to calculate at least one of the three factors.

2- PageSpeed ​​Insights Toolkit

PageSpeed ​​Insights provides you with a lot of data about any web page you have a link to. Unlike Google Search Console, you do not need the web page to be part of a site you own to know the status of its Core Web Vitals factors. It is only enough for you to enter the page link. Then you click the “Analyze” button.

Evaluate the Core Web Vitals factors for a web page from PageSpeed ​​Insights

It is worth noting that you can get the basic web performance indicator values ​​for the page on a mobile phone and on a computer, by switching between two tabs by clicking on the two icons located at the top right in the previous image (mobile – desktop).

A3- Web Vitals add-on for Google Chrome

The Web Vitals add-on for Google Chrome is the ideal solution to know the values ​​of the Core Web Vitals factors for a page you are browsing, as after installing it, it measures the LCP, FID, and CLS of all pages that you visit if they are activated. Notice in the following image, the plugin calculates the LCP and CLS factors for the search results page on Google by simply searching for the phrase “WordPress in Arabic,” and it waits for interaction with one of the page elements to occur in order to calculate the FID factor.

Evaluate the basic web performance indicators of the search results page for WordPress in Arabic from the Web Vitals plugin

It must be noted that in order for this add-on to calculate the factors correctly, the tab must be open from the time the page starts loading until it is completely loaded, otherwise the add-on will show unreal numbers. Also, the values ​​of some factors are affected by the speed of your Internet connection, and perhaps the specifications of the computer you are using, so we do not advise you to use this method to measure indicators.

Does a page’s compliance with Core Web Vitals improve its placement in search results?

Google developed the Core Web Vitals factors primarily to help content publishers improve the user experience, but these factors have recently become secondary factors in the ranking of search results, meaning that pages that match the basic web performance indicators will have priority in the rankings if the other ranking factors are equal. .

However, the Core Web Vitals factors have not become a deciding factor in the rankings, as some articles have exaggerated their importance. Dr. John Mueller from Google confirms that relevance to the topic being searched, and which the user wants to reach, is still the most powerful factor in ranking.

But this does not mean that you should ignore these factors. Although they may not have a significant impact on the rankings (because they are a secondary ranking factor), if your site is not compatible with them, it will have many negatives that have a strong impact, such as lower profits and lack of popularity. Which in turn leads to a lower rating as well.

Therefore, your site’s compatibility with basic web performance indicators positively affects the ranking of its pages in two ways, one directly resulting from the search engine’s preference for pages that match these indicators, and the other indirectly provided by the popularity of your site in multiple ways, such as increasing the number of links that lead to the site’s pages (Backlinks). .


Compatibility with Core Web Vitals

Although making your site pages compatible with basic web performance indicators will not move it from the tenth page to the first page of search results, as we explained in the previous paragraph, these factors still have an impact on rankings, so here we will highlight the most important practices and methods. Which is useful in making your website pages compatible with it.

Practices that help improve LCP

If your Largest Page Element (LCP) rendering speed is low, doing the following will be helpful to increase it:

  • Remove unnecessary third-party scripts, a study found that each one of these scripts slows down the page by 34 milliseconds.
  • Improve the server response time if it is high. The slower the server response, the longer it takes to display any element on the page, and the higher the LCP.
  • Minimize CSS files, postpone the browser reading unnecessary files, and try to place the necessary CSS codes inline.
  • Optimize and compress images, use modern formats such as JPEG 2000, JPEG XR, or WebP, and do not use images that are not related to the topic.
  • Fetch important items and have the browser load them before others.
  • Use Lazy Loading, which loads content on demand. For example, if you use lazy loading, web page images will load when they become part of the browser’s display.

For more tips that enable you to increase the loading speed of your WordPress site pages, and reduce the time that visitors must wait until they get what they want, see the comprehensive guide to increasing the speed of your WordPress site .

Practices that help improve FID

Executing heavy JavaScript (JS) codes is usually the main reason for the long first input response (FID) delay, as it is almost impossible for the user to interact with the page while the browser is loading JS, so improving the way JavaScript is parsed and executed, deferring its execution, and minimizing it will have a positive impact. And directly in the FID.

Other practices that can improve response time to first input include:

  • Remove unnecessary third-party scripts.
  • Use the browser’s cache, as this helps the browser load JS faster.

Practices that help improve CLS

Cumulative design parameter optimization practices are primarily based on making elements not move unexpectedly (i.e. without the user interacting with the page in a way that causes the elements to move), because this factor measures how much the page layout changes between two displayed frames.

The most notable things you can do to reduce the value of your CLS include:

  • Use the width and height properties of media, whether images, videos, or graphs.
  • Reserve enough space for inclusions and ads so that their sudden appearance does not push other elements to the bottom, top, or side.
  • Do not insert new content on top of existing content, unless it is in response to user interaction with a page element.

To this point, we have finished explaining the Core Web Vitals update (basic web performance indicators), introduced you to the most important tools that enable you to measure its factors, pointed out its role in ranking the site’s pages, and highlighted the most important procedures and practices that will help improve the values ​​of the factors of this update. .

In the end, we note that these factors were originally developed to help you improve the user experience. Even if their impact is not decisive in the ranking of search results, you must still improve their values ​​in order to provide an optimal experience for your website visitors.

Avatar photo
I am a young man who has been working in WordPress and e-marketing for 10 years. I would like to share my experience with you so that we can become professional in WordPress I will be happy to share the experience with you.