Welcome to the latest guide to Core Web Vitals, or Core Web Metrics. This is a knowledge base that will allow beginners in the SEO or Web Dev industry to understand this not-so-obvious topic. More experienced professionals, on the other hand, will refresh themselves with previously acquired information and perhaps learn something new.

What are Core Web Vitals?

Core Web Vitals (the Polish term for CWV) are actually a set of specific factors that Google considers important to the overall user experience of a website. According to the architects of this solution, the user experience is primarily affected by the speed and performance of the site.

In 2021, users have a huge choice of substantive websites or online shops with favorable offers. They are also accustomed to them loading smoothly and running smoothly. Those that do not meet these conditions are usually treated worse by users. Therefore, in theory, CWV is supposed to be used to sift out technically inferior sites by Google and suggest those that meet their guidelines.

This is one part of Google’s changing direction in terms of generating search results. User experience is to be increasingly influential, rather than factors that do not necessarily affect it per se (such as external linking). While realistically measuring the satisfaction of those using Google is still a song of the future, attempts to favour user experience over search are being made more and more boldly by its developers.

On the other side of the coin, however, there are claims that Google is doing this to limit the indexation of less quality sites in order to save its resources. The infrastructure necessary for indexation, as well as the entire search engine, is not made of rubber. More and more indexed pages generate more and more data, which needs to be stored somewhere.

While such an argument may sound convincing, the CWVs themselves are also helping to change the attitudes of site creators towards their technical state. This is an issue that definitely works in favor of all internet users.

Which indicators do we divide Core Web Vitals into?

Core Web Vitals are based on 3 basic parameters:

• LCP (Largest Contentful Paint) 
• FID (First Input Delay)
• CLS (Cumulative Layout Shift)

These factors are part of Google’s “quality” score for a page, which is their way of determining the UX level of a page. They provide a meaningful way to evaluate a page’s performance and take reasonable action to make it better in the eyes of Google, as well as users.

CWV status is determined by the following gradation:

• Poor (red colour informing about poor performance)
• Needs improvements (yellow indicating an average score)
• Good (green for an acceptable score)

These are dependent on standards set by Google and each indicator is set at a different level.

Largest Contentful Paint (LCP)

This factor determines the page load time from the point of view of the real user. It refers to the time it takes for the largest block of image or text in the visible area to render in relation to when the page first loads.

LCP at an inadequate level results in high waiting times for page elements to load. This is definitely not a desirable phenomenon, as it will also indirectly increase the rejection rate, i.e. less valuable traffic to the website.

First Input Delay (FID)

FID refers to the time it takes for a user to actually interact with your site. Taking a slightly more abbreviated approach to this definition, it is the indicator that technically measures how long it takes for “something” to happen on a page. Examples of interactions taken are clicking on menu buttons, typing an email address into a text field, opening text placed in a so-called accordion, or clicking on an active link.

However, it is not always a key indicator, because websites based primarily on the content (for example blogs) do not usually have many elements for interaction. 

We should care about this indicator most of all in the case of online shops which have many interactive elements. The faster a customer is able to visit a given category or product, the greater the chance that this will turn into a valuable conversion. Such an approach to the technical optimization of a website brings it closer to achieving a lower FID.

Cumulative Layout Shift (CLS)

CLS focuses on representing the level of stability of page loading, or what is known as “Visual stability“. If the elements on your page move during loading, then the CLS index score will be high.

If specific links or menu items appear in a given place during the loading and then move somewhere else in a moment, the user may feel lost on the page while visually searching for them. 

It also influences the user’s potential to click on another element, which at the same time appears in place of the first one. These are situations that definitely have a negative impact on the perception of the site from a technical point of view.

How to check the status of Core Web Vitals on a website?

Below are 3 sources of knowledge about the state of CWV indicators that we have chosen. They are fully sufficient to realistically verify them and potentially implement corrections based on them.

PageSpeed Insights

A basic and accessible source of knowledge for everyone is Page Speed Insights, which has already started to oscillate primarily around CWV since 2020. While the overall score itself is also important for gaining positions in SERPs, it is worth focusing primarily on the details of the indicators. They provide much more valuable data, from which equally valuable conclusions can be drawn.

After the tool verifies the site, we get three versions of the study. The first is the time-stretched results shown on the screen above. They are based on the analysis of the website data for the last 28 days. On the basis of data loading during these days, the percentage of actions that met the given guidelines is calculated, and only from this is the final result drawn.

The second type of summary is the one based on the status of the indicators at the time of the survey. It presents specific data on additional metrics not considered part of the CWV. They are also worth taking into account when taking care of improving the technical condition of the page, as they continue to influence the overall Page Score.

The third type are recommendations (divided into sections “Opportunities” and “Diagnostics“), which directly indicate what should be improved on the website. It is worth bearing in mind that they do not have a direct influence on the website. Google itself informs about it, however, introduced amendments may bring the website closer to achieving better results.

An interesting option is filtering the results into those relating to one of the three CWV metrics and Total Blocking Time (the time the page cannot respond to user input, such as mouse clicks, screen taps, or keyboard taps). It is worth mentioning that TBT alone, along with LCP, are the indicators that have the greatest impact on Page Speed Score.

Google Search Console

The most accurate source of information about CWV on our site right now is Google Search Console and a set of options called “Performance“. This is where there is a special section dedicated to the described indicators. The aim is to help website owners to adapt their websites to the new standards as quickly and effectively as possible.

The first view that appears after entering the aforementioned tab is a summary of all indexed subpages in terms of CWV, divided into mobile and desktop versions of the website. It is based on presenting the level of indicators on particular subpages via graphs from the last 3 months. In this way, it is possible to verify more precisely which subpages work properly and which require improvement.

When you click on “Open Report“, you will see more detailed data, which shows the number of pages in a given “quality” range on a graph. It is also worth visiting the “Details” tab, which counts all subpages that do not meet the conditions of a given CWV index.

There it is also possible to check each URL taken into consideration in the general calculation, which is definitely useful during web development works. Thanks to such a summary, we have the possibility to choose the most prioritized parts of our website and act on the places that require the most technical improvements.

GTMetrix

The first tool on our list to indirectly analyze CWV from outside the Google stable. It can become a valuable addition to studies previously carried out through PSI. In its case, the first recommended action is to create an account, thanks to which we get the possibility to customize the location of the test server.

If we give up this option, the data contained in the study will be much more inaccurate, because the default server is the one located in Canada. This does not give a chance for fully effective verification of e.g. European websites.

The look and feel of the tool itself is similar to the PSI. Here, we also find data relating to Core Web Vitals, but the FID indicator has been replaced by the TBT indicator. In addition to this difference, the examined website also receives an overall grade modelled on those of American schools (from A to F). This is closely linked to the percentage grades relating to its performance and structure. It is drawn from Google Lighthouse data combined with GTMetrix’s proprietary audits.

Much more interesting data are recommendations of improvements worth making to the site, but also tabs relating directly to CWV. Definitely worth attention is the visualisation of indicators and the time of their occurrence based on the actual loading of the website. It allows us to see in a more tangible way how specific indicators behave.

An even more attractive option in our opinion is the performance summary. In this case, all Core Web Vitals metrics are presented in an accessible and consistent form, further defined by acceptable ranges according to guidelines from Google. 

This is also a good place for beginners when it comes to CWV issues. All thanks to the option of including more detailed information (“More details” slider), sufficient to understand the issues involved.

Other CWV verification tools

Other notable tools are:

• web.dev – a tool from Google, a kind of extension of PSI itself
• Lighthouse – another tool from Google available via Chrome DevTools, very similar to PSI
• Google Web Developer – launched from the Chrome browser, designed for more experienced users
• WebPage Test – slow tests are compensated by the detailed visualisation of the performance of indicators on the website
• Ahrefs – integration of Site Audit with CWV introduced at the beginning of July this year, which is still in the testing phase

How to improve Core Web Vitals?

Analyses themselves are of course crucial for proper verification of the state of our website, but what if we have done them, and our site is not adjusted to CWV standards? Then it is worth deciding on your own or with the help of an experienced Web Developer to technically enhance the site. Below we present universal advice relating to what is worth improving in the context of a given Core Web Vitals indicator.

Improving LCP

• Take care of the state of your hosting – as a first step, we recommend improving your hosting speed. Better hosting means faster page loading, which is a key aspect of LCP. If the current solutions do not work, it is worth considering an issue such as migrating the site to another hosting.
• Remove unnecessary external scripts – these types of scripts can harm the site in terms of loading speed and slow it down by up to several dozen milliseconds (this is a lot in the case of LCP). Most elements should load from the server, which definitely helps to maintain a higher level of responsiveness.
• Configure “Lazy load” – Lazy load makes sure that unnecessary (i.e. not visible) elements (mainly images) don’t load at the moment. Only when someone scrolls down the page, they start to be loaded on the page. Such a solution is usually achieved with plugins, but in the case of custom solutions, it can be implemented with JavaScript.
• Remove excessively large page elements – sometimes one component of a page can weigh on the state of the LCP indicator. PageSpeed Insights or GTMetrix may mention a particular image or template element that is worth removing or replacing.
• Minimise CSS size – CSS styles that are too large are a killer for the LCP indicator. It’s worth making them thinner, which any experienced web developer should be able to handle.

Improve FID

• Use cache – it helps to load the content of a given page faster. This means that users’ browsers will load the JavaScript parts much faster, which improves FID performance.
• Remove any external scripts you are not actively using – external scripts include code from analytical tools, placed e.g. in the header of the page. If you do not need a given code from Google Analytics or code belonging to HotJar and generated heat maps, it is worth removing them. This guarantees an improvement of the FID indicator.
• Minimise (or dispense with) JavaScript – the reality about JavaScript is that it does not allow the user to interact with the page while it is loading. Therefore, the key to improving FID levels is to reduce the impact of JS on the page. 

Improving CLS

• Add the most important page elements in the part visible on the screen – proper page layout is not just a typically visual issue. With this approach, the most frequently used elements don’t push the content that the user was expecting. Instead, they will remain in the expected place after the entire page has loaded.
• Make sure that advertising elements have a reserved place on the page – an unacceptable situation from the technical point of view, as well as taking care of the CLS itself, is the appearance of ads in uncontrolled places. Vertical and horizontal scrolling of the page can be avoided by taking care of it from the back-end of the website.
• Use the “set size” attribute for any media (video, images, infographics or GIFs) – This way, the user’s browser knows exactly how much space a given element will take up on the page. This way, there will be no self-interpretation on the part of the browser, and the media displayed will remain where it was intended to appear after the page loads.

How important are Core Web Vitals and when will they be introduced?

The official release of the Core Web Vitals update has been postponed until August 2021. Nevertheless, it has already been phased in since June so that Google can monitor how it behaves on the “living organism” that is the search engine. It is hard to predict how SERPs will behave after the final introduction of CWV.

In our opinion, no spectacular changes should occur. Google wants to change its search engine, but it is such an extensive network that such drastic changes could reflect too negatively on users, websites, and ultimately Google itself. 

However, it won’t be a non-issue either, so some reshuffling is to be expected. After all, the uproar in the SEO industry (sparked in part by Google itself and statements from their employees) about this topic has been brewing since 2020. The search engine giant can’t afford image damage from over-inflating its balloon.

However, these are estimates based on simple analyses. Real conclusions will have to wait until the next few months when everything will be verifiable with real data. Preliminary verification of the technical state of the sites has instead been done by the backlinko team, which examined over 200,000 sites for their readiness for CWV.

It turns out that in terms of each indicator, the number of sites meeting the CWV standards is well over 50%, which is rather good. Is it then worth following the example of potential competitors? In our opinion, yes, and preparing for a new update is good protection against possible position drops, which without taking action are possible. Therefore, based on our article and other sources, we recommend improving your pages in terms of indicators and, consequently, their overall performance.