What are core web vitals what do they affect and how can they be improved | entheosweb

On May 5, 2020, the developers of the Chromium browser announced the launch of the Web Vitals program, which aimed to analyze the interaction of users with websites and establish criteria for improving sites´ effectiveness. Shortly after, on May 28, 2020, a publication appeared on the Google blog in which it was announced that Core Web Vitals (CWV) would become part of the algorithm for evaluating and ranking sites in the framework of organic search.

In this article, we will analyze CWV as a full-fledged ranking factor for sites in Google search results, show you how to check your site for compliance with this metric, and give some practical tips on how to optimize Core Web Vitals on your site.

What are Core Web Vitals, and why are they important?
What metrics are included in Core Web Vitals?
What are the Core Web Vitals Thresholds?
How do I check Core Web Vitals?
- Google Search Console
- PageSpeed Insight
- Google Chrome Lighthouse
- Netpeak Checker

How to improve Core Web Vitals
Results

What are Core Web Vitals, and why are they important?

Core Web Vitals (CWV) is a set of metrics that evaluate the experience of visitors to a website and determine how convenient it is for them to use it.

If a site is uncomfortable to use, it has a poor CWV score. Conversely, if the site is user-friendly, the site will earn a good score on the Core Web Vitals report. Since all search engines, including Google, aim to return quality sites in their search results, it is important that your site has a good CWV score. This in turn earns your site higher positions in the search rankings and reduces the threat of being overtaken by competitors.

Now that we understand how CWV is related to SEO, let’s analyze which metrics are included in this report.

What metrics are included in Core Web Vitals?

The Core Web Vitals report contains 3 metrics:

LCP is the download speed of the main content. It is a measure of the number of seconds required to load the largest element on the first screen (form, block, video, image, etc.). The longer it takes to load the largest site elements, the less user-friendly the site is.
FID is the waiting time before the first interaction with the content. It is measured by the number of milliseconds required for the user to start interacting with the content on the site. The less time it takes for a site page to be ready for use, the sooner the user can start interacting with it and the less time they spend waiting for the site to fully load. If a user has to wait for the site to fully load before being able to use it, it makes the site inconvenient and has a bad impact on the user experience.
- Since it is impossible to directly measure FID in laboratory conditions (without the involvement of real users), you can focus on FCP (time in seconds to the appearance of the first content). This indicator is quite closely correlated with FID, because it is assumed that the faster the content appears on the page when the site is loaded, the sooner the user will be able to interact with it.
CLS is the cumulative layout shift, which determines the amount of unexpected shifts of content blocks on a site page during its loading. It is important to understand that not all block shifts have a negative impact on CLS, but only those that the user did not expect, and that can potentially interfere with the use of the site. For example, when the user presses one button, it suddenly moves to the right, and another button, which was on the left, takes its place. As a result, due to the unexpected loading of the form or image, the user performed a completely different action than intended, which is likely to cause some inconvenience.

Now that we’ve analyzed which metrics are included in Core Web Vitals, we will find out the values within which these indicators can be considered satisfactory or insufficient.

What are the threshold values for Core Web Vitals?

LCP threshold values:

FID threshold values:

FCP threshold values:

CLS threshold values:

How do I check Core Web Vitals?

You can check Core Web Vitals both with the help of built-in browser tools and by using special online services. Let’s consider four of these options in more detail.

Google Search Console

Google Search Console (GSC) is an online service from Google that generates reports with various data based on the interaction of the search bot with your site. In the Core Web Vitals report, graphs of FID, CLS, and LCP indicators of all indexed pages by device type are formed:

It is worth noting that the report contains data of indexed pages only, and that it cannot be used to measure the performance of a non-indexed site. If the site page is not in the Google index, then there will be no data on it.

PageSpeed Insight

PageSpeed Insight is an online tool from Google that allows you to measure site loading speed and metrics important for SEO, including Core Web Vitals.

To perform the analysis, simply enter the URL of the site in the text line and press Enter or the “Analyze” button:

This tool works even if the site pages are not in the search engine index, but the downside is that you can only check one page at a time. Also, it will not be possible to check the site if it is located on a local computer.

Google Chrome Lighthouse

Lighthouse is a tool built into the Google Chrome browser that allows you to analyze the quality of website pages. Among the many metrics this tool provides are the CWV indicators.

To open Lighthouse, launch the developer console in the browser using the keyboard shortcut Ctrl + Shift + C. In the console menu, select the “Lighthouse” item → select a Mobile or Desktop device → check the category option for “Performance” → click “Analyze page load”:

As a result, Lighthouse will issue an estimate of CWV metrics:

This tool works on the same principle as PageSpeed Insight but allows you to check any site, even if it is located on your local computer.

Netpeak Checker

Netpeak Checker is a software developed by Netpeak Software that allows you to batch-check the Core Web Vitals of any number of pages on a site, even if they are not in the search index.

To check CWV with Netpeak Checker, select “List of URLs” in the top menu → select “Enter manually …” → enter the list of URLs of the required pages → Click “Add” → select the required metrics (LCP, FID, CLS) in the sidebar on the right → click on “Start”:

The result of the check will be generated in the form of a table with a list of URLs and indicators, as seen here:

Now that we’ve broken down the CWV verification tools, it’s time to learn about possible ways to optimize your site for these metrics.

How to improve Core Web Vitals

In order to improve CWV, we recommend following the following tips:

Use the correct image size. Large images often take a long time to load, which negatively impacts LCP. Additionally, a long load time for images can provoke unexpected shifts of neighboring blocks, which will negatively affect CLS. Using images of a size sufficient for the correct display of a website page—but no larger—will regulate site load times and enhance the user experience.
Specify the exact dimensions of the images. In order for the browser to reserve the space it needs for the image, it is recommended to clearly indicate each image’s size using the width=”” and height=”” attributes, for example, <img src=”image.jpg” width=”600″ height=”400″>.
Use responsive images. These are copies of the same image that display at different sizes depending on the screen size of the device. The srcset attribute is used to display responsive images, as in this sample code:

</picture>

On mobile devices with a screen no larger than 360 px in width, the small-image.jpg image will be loaded. All other devices will download big-image.jpg.

Adaptive imaging can significantly improve LCP.

Configure lazy loading of hidden images using the loading=”lazy” attribute, which should be added to the <img> tag of all images that are outside the first screen. In this way, the images will not be loaded immediately when the site is opened, but only when they fall into the visible area of the screen. Setting up delayed loading of hidden images improves all CWV metrics. The “lazy” attribute can be used like this: <img src=”image.png” loading=”lazy”>
Configure gzip content compression on the server to compress content (fonts, JS and CSS files, images, video, audio, etc.) “on the fly” and transfer it to the client (browser) in a compressed form. Compressed content loads quickly because of its smaller size and therefore has a positive impact on all CWV metrics.
Compress images before uploading them to the server. Pre-compressed images will be smaller and therefore will load faster than uncompressed ones. The difference from the previous method is that the image will be compressed before it is uploaded to the server, and not during its transfer from the server to the browser. Accordingly, additional server resources will not be spent on compression.

You can compress the image using any free online service. Using this method can shave off 10% to 90% of the image size and its respective load time. The screenshot below, for example, shows the difference between compressed and uncompressed images, resulting in a 21% reduction in image size:

Conclusion and a Bonus for Those Who Read to the End

The Core Web Vitals indicators belong to the criteria for evaluating the quality of a site and its usability for users. Separately, CWV metrics (LCP, CLS and FID) do not have a significant impact on the site’s ranking in organic search results, but together with other factors (content quality, external links, etc.), they can become an effective tool for improving the site’s position in Google and other search engines. Therefore, it is worth monitoring these indicators on your site and making efforts to optimize them.

As an added incentive, readers interested in improving their website’s Core Web Vitals performance can take advantage of a special offer. By using the promo code “entheosweb,” you can enjoy a generous 20% discount on Netpeak Checker, a powerful tool that can help analyze and optimize these vital metrics.