According to StatCounter, Google dominates the search engine market with an overwhelming 93.37% share, leaving its closest competitor, Bing, with just 2.81%. This market dominance highlights the critical importance for developers to optimize their sites for Google’s ranking algorithms.

To rank websites Google employs a variety of methods, including the most recent and crucial method – Core Web Vitals, which began rolling out in June 2021.

Core Web Vitals assesses website performance with metrics such as page loading times. It’s worth noting that a delay of just one second in page load times can lead to a significant reduction of up to 20% in a website’s conversion rates.

It is therefore vital for any website developer to understand how these web vitals are measured, and what they can do to optimize their site to boost both their performance, and their position in the SERPs. In this article, we will identify exactly what Google’s Web Vitals are, how they impact your site, and how you can improve your site’s score.

Let’s get started!

Understanding Google’s Core Web Vitals

Google’s Core Web Vitals consists of a set of specific website performance metrics that are used to determine the overall user experience of a website.

It is a combination of three main parameters that measure specific aspects of page speed and responsiveness. These metrics include:

  1. Visual load, measured by largest contentful paint (LCP)
  2. Visual stability of web pages, measured by Cumulative Layout Shift (CLS)
  3. Interactivity, which is measured by First Input Delay (FID)

The Core Web Vitals are part of Google’s Page Experience Ranking Signals, which also include factors such as mobile friendliness, browsing safety, HTTPS, and Intrusive Interstitials (or popups).

A study from Google found that when a site meets the optimal thresholds for the three Core Web Vitals metrics, users were 24% less likely to abandon page loads. On top of that, they found a 22% decrease in news site abandonments and 24% fewer abandonments of shopping sites.

The Two Types Of Data Used For Core Web Vitals

Before we get into the optimization of sites, it is necessary to understand the kinds of data processed for measuring Core Web Vitals metrics. The two main types of data are:

Field Data 

Field Data is generated from the Chrome User Experience Report (CrUX) and includes real user metrics. Google collects information from Chrome users who have opted to share information, such as browsing history, and uses the data to compute the three Core Web Vitals metrics. The aim is to understand how real-world Chrome users experience the web.

You can see a summarized view of your site’s Core Web Vitals under the Google Search Console, and your page-level metrics in PageSpeed Insights under the Field Data category. However, you should note that this data is based on a rolling 28-day average, which means that any change in your site won’t be reflected in your Field Data report for around 28 days. This is where Lab Test Data comes to the rescue. 

Lab Test Data

Lab Test Data is generated by tools that are designed to run tests consistently under the same conditions. Because of factors such as internet speed and geographical location this data does not reflect real-world data. You can view your site’s Lab data with the Lighthouse Chrome extension.

The metrics are assessed at the 75th percentile of users. For example, if we look at the Page Speed Insights for the Gumroad site we will see that all Core Web Vitals metrics have greater than 75% results, so the site passes the Core Web Vitals assessment. If one or more metrics have less than 75% positive loads, it does not pass the Core Web Vitals assessment.

Another thing to note is that metrics are measured by device type, meaning that mobile Core Web Vitals will be assessed separately from desktop ones.

Before analyzing and optimizing the Core Web Vitals, it’s essential to assess the other basics of Google’s page experience signals, such as mobile friendliness and the use of HTTPS. We must remember that the Core Web Vitals are just a part of Google’s page experience signals.

You need to take care of basic optimizations for page speed, such as having good hosting, compressing your images, caching your content, and setting up a Content Delivery Network (CDN). All of these things will inevitably contribute to improving your site’s Core Web Vitals.

Core Web Vitals Metrics

Largest Contentful Paint (LCP)

Largest Contentful Paint tells us about the visual loading performance of a website. It measures the time it takes for the web page’s main content to load. LCP is simply the single largest visible element loaded in the viewport, which is the area of a web page visible to a user. You should aim to minimize this metric as much as possible – the recommended target is to have your LCP under 2.5 seconds.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the visual stability of a web page. CLS looks at how much visible elements have shifted in the viewport as remaining elements are loaded, and measures the distance the affected elements were shifted. In some web pages pop-up ads and videos appear out of nowhere and shift the content, which is annoying and results in a bad user experience.

Previously, CLS was recorded continually to measure stability even after the page had loaded. But recently Google has revised the way CLS is measured; it is now calculated in terms of 5-second sessions. The metric that is reported is the 5-second timeframe in which the most shifting occurred. The recommended threshold by Google is to have a score of less than 0.1.

First Input Delay (FID)

First Input Delay measures interactivity. The purpose of this metric is to gain an understanding of a user’s first impression of a site’s interactivity and responsiveness. It measures the time from when a user first interacts with a page to the time when the browser is able to respond to that interaction. 

Different types of interaction will include clicking a link or a button, inputting text into a blank Field, selecting a drop-down menu, etc. The recommended speed for First Input Delay is anything under 100 milliseconds.

Measuring Your Website’s Core Web Vitals

A variety of browser extensions, tests, and reports are avaiLable that will help you analyze your site’s Core Web Vitals. Here are some of the most important ones.

Core Web Vitals Assessment in Google’s PageSpeed Insights

PageSpeed Insights is a tool developed by Google that reports on the user experience of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. It has two sections:

  • Core Web Vitals assessment lets you discover what your real-world users are experiencing
  • PageSpeed Insights score helps you diagnose performance issues with the help of Lab data

This Core Web Vitals assessment is part of the Field Data report. The Diagnostics section in PageSpeed Insights also provides useful information about elements that affect each of the three Core Web Vitals metrics.

PageSpeed Insights uses Lab data in addition to real user metrics to calculate the overall optimization score, and also provides suggestions for improvements.

You should note that in some cases PageSpeed Insights doesn’t provide a Field summary. This usually happens for small websites because the Chrome User Experience Report cannot collect enough Field data. Fortunately there are other sources that will provide you with Field data.

Core Web Vitals Report In Google’s Search Console

Google’s Search Console Tools is a web service by Google that allows users to measure a site’s traffic and performance, fix common issues, and make the page perform better in Google search results.

Google Search Console has two Core Web Vitals reports, tailored for both mobile and desktop versions. Each of these reports provides you with the Field data for a group of URLs, and offers insight into their performance. These reports are beneficial for finding common issues and similar errors across a group of URLs. This ensures you get information about the entire site – instead of just information on one page at a time.

For example, if you have many product pages where the largest element is an image or a banner, the Largest Contentful Paint (LCP) metric will be similar for all of them. In such a case, Google Search Console finds LCP issues across all of these identical product pages.

In the console you can alert Google after resolving any Core Web Vitals problem by clicking on Validate Fix.

Using the Core Web Vitals Chrome Extension

Chrome’s Core Web Vitals extension offers a quick way to check your Core Web Vitals. This extension automatically gives you a brief audit of Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay. It can audit the website’s performance for other users compared with its performance on your own device.

Using Chrome User Experience Report For Extracting Field Data

Gaining access to the Chrome User Experience Report (CrUX) requires more time and effort than simply running your site through PageSpeed Insights or Google Search Console. However, going through this report also provides more ways to organize and visualize your site’s Field data. 

There are two main ways to directly access the CrUX dataset:

  1. BigQuery: This method requires a Google Cloud project and SQL expertise
  2. The Chrome UX Report API: This method requires some developer experience with both JavaScript and JSON

If you can afford the time and possess the technical expertise, it is worth experimenting with both methods above.

Optimizing Your Site For Core Web Vitals

After measuring your site’s Core Web Vitals, the next step is to optimize it for them. You need to keep in mind that every website is built differently, and we can’t possibly fix every potential problem. Below we’ll discuss several tried and tested techniques for improving web performance.

It is important to keep in mind that your site’s performance can also be affected by factors that aren’t discussed here. You always need to examine your specific problems before implementing any optimizations.

Analyzing and Optimizing Largest Contentful Paint (LCP)

As discussed above, Largest Contentful Paint (LCP) measures the time it takes for the largest element in the viewport to load. Anything below 2.5s is considered to be a good LCP score. If the largest viewport element loads faster than that for 75% of all recorded page loads, the web page passes the LCP assessment.

A quick and easy way to check which element triggers the LCP metric is to run the page through PageSpeed Insights. In the dashboard, scroll down to the Diagnostics section and click on the Largest Contentful Paint element.

The same can be done with Chrome’s DevTools. For this, open the page you want to inspect in Chrome, right-click and select Inspect, then go to Performance. Now, click on the Reload button, and wait for the browser to examine the page.

Core Web Vitals Metrics

You’ll be able to locate a small LCP icon in the Timings section. When you hover your cursor over it, the largest element of the page will be highlighted with a blue shade.

For additional insight you can use a waterfall chart to see how many resources were loaded before the LCP. Here’s how the waterfall chart looks for our example website, Gumroad, created using GTmetrix:

Tips To Improve LCP Time

Here are a few measures you can take to improve your LCP load time:

  1. Optimize your images: Inefficiently formatted and very large images are often the biggest reason for slow websites. For faster loading, images must be properly converted to the right format, compressed, and resized. Lossless compression maintains roughly the same image quality while reducing the size of the image file.
  2. Preload hero images: Hero images are usually the most prominent above-the-fold elements, so loading them quicker is crucial for a fast and responsive user experience. This tells the browser to prioritize the specific hero images when rendering the web page.

Preloading significantly improves LCP, especially on pages where hero images are loaded with JavaScript and the background-image property in CSS. Browsers usually discover these images later, so using link rel=preload helps improve both actual and perceived performance.

  1. Find a better hosting plan: Using a cheap, shared hosting plan will always lead to slow execution times because of the slow host server. Upgrade your hosting plan to have a fast server response time, and both stabilize and speed up your site. 

If you are looking for a new hosting solution, consider using RunCloud for managing your servers.

  1. Implement Critical CSS: Critical CSS is a technique that extracts the viewport content in order to render content to the user as quickly as possible. Critical CSS finds the CSS necessary to load above-the-fold content and inline it in the <head> tag. Doing so improves both actual and perceived performance. 
  2. Use a Content Delivery Network (CDN): Using a CDN splits the load by hosting assets on servers that are geographically closer to the users, thus greatly improving a site’s performance.

Analyzing And Optimizing Cumulative Layout Shift (CLS)

We already know that Cumulative Layout Shift measures the effect of unexpected layout alterations in a web page that occurs when content moves around the page without user input. A visually stable page maintains a CLS score of 0.1, and if that’s true for the 75th percentile of recorded page loads, the web page passes the CLS assessment.

Google computes the CLS score by measuring how much of the viewport the layout shift affected, and how far the elements moved from their original position during the shift. The final CLS score is calculated as the total of all individual unexpected layout shift scores.

Chrome’s DevTools can help detect unexpected layout shifts. You need to right-click on the page you want to analyze and select Inspect. Navigate to More Tools and click on Rendering. At the bottom of the Inspect console you’ll see a Layout Shift Regions option with a checkbox on the left. Click on the checkbox to ensure it’s selected.

Now every time the layout of the page shifts, the shifted area will be highlighted in blue.

This CLS generator tool is also great for discovering layout shifts. it computes your overall CLS score and shows shifting areas. 

Fixing Common CLS Issues

Here are a few tips for improving your layout shifts.

  1. Add width and height attributes to images and videos: Adding attributes of height and width in the HTML markup enables the browser to allocate the correct amount of space for each element in advance. This renders a blank element in place of the image, and replaces the element with the actual image when it is loaded. This drastically reduces layout shift issues.
  2. Optimize Font Delivery: Unoptimized web font delivery can cause huge layout shifts. Using font-display: optional in combination with link rel: “preload” for the site’s most prominent fonts is typically considered the best practice. The optional value avoids causing a re-layout when the web font is ready, and this ensures a layout shift does not happen.
  3. Don’t insert ads and pop-ups on top of other content: Adding intrusive ads and pop-ups are the most common ways to ruin your CLS score. Many elements can cause this issue, including ads, promotional banners, search bars, etc. If you must place such elements on your page, implement them in a way such that it does not negatively impact the user experience.
  4. Reserve space for iFrames, ads, and dynamic content: These elements can cause significant layout shifts if they don’t have reserved space, just like images and videos. You need to use containers with proper dimensions and use the overflow: hidden property to make sure larger content doesn’t overflow its container.
  5. Make interactions faster: Make sure user interactions are completely executed within 500 milliseconds of the input trigger. Lightening up page loads by using OS fonts, compressing and preloading visual content, and using proper containers all prove to be helpful in making interactions faster.

Analyzing and Optimizing First Input Delay (FID)

We have already discussed that First Input Delay measures the time it takes for the browser to begin processing the first user interaction on a web page. However, scrolls and zooms don’t affect FID; this metric only keeps track of distinct actions such as clicks or taps. A low FID is crucial because first impressions leave a mark on the users, and most users instantly leave and, in most cases, never return if a website irritates them on their first visit.

A web page’s FID should be less than 100 milliseconds for 75% of all recorded page loads for it to pass the FID test. 

The main culprit of FID issues is usually JavaScript. Excessive usage of JavaScript leads to Long Tasks. These are periods of time when the UI is unresponsive to user interaction. If the main thread is blocked for more than 50 milliseconds it is considered a Long Task.

To find Long Tasks on your web page, open the page, right-click, and select Inspect. From the Inspect console, open the Performance panel and reload the web page. Now, you must click Main and select the Bottom-up analysis button.

You will find the Long Tasks in the Main section. These tasks are usually painted in gray with a red overlay. The Bottom-Up analysis also lets you group files by URL, and helps you pinpoint what causes delays. In the above example, the first script alone takes more than 400 milliseconds, which is far too long. 

As you dive deeper into the Bottom-Up analysis, you’ll find that a few longer functions contribute to most of the delay. In some other cases, functions might be running quickly – but adding too many of them together in a single task converts into a Long Task. 

WebPageTest is another useful tool that provides an in-depth processing breakdown, helping you to find problem areas. It provides a detailed page summary which provides insight into the site’s performance, and helps you by providing information that allows you to tweak your site for a better Core Web VItals ranking.

Fixing Common FID Issues

There are multiple ways to minimize your First Input Delay. Some of the most popular ones include:

  1. Compress or minify code files: Removing unnecessary parts from the code such as whitespaces and line breaks (minification), and modifying and compressing code files to make them smaller helps significantly reduce FID.

Minimizing third-party JavaScript requests for analytics, social media widgets, discussion forums, etc., that quickly mount up to several megabytes of JavaScript also helps with FID issues. There are some hosting services and CDN providers that implement these features by default, making the process easier for users.

  1. Break up Long Tasks: This is arguably the most effective way to reduce FID, as Long Tasks block the main thread from responding to user interactions quickly. By dividing them into smaller parts you can significantly improve the performance of your website. You can take advantage of JavaScript features such as requestCallback, setTimeout, and requestAnimationFrame to break long-running JavaScript tasks into a series of smaller tasks.
  2. Use web workers: Web workers enable web content to run scripts in background threads without affecting the main thread. It is generally considered a good practice to move non-UI operations to a background thread. Additionally, you can use asynchronous, deferred, or ESS module JavaScript to run some scripts later.
  3. Remove or delay non-critical third-party scripts: Sometimes third-party scripts can prevent your own scripts from executing on time. You need to prioritize the scripts according to their importance and rearrange their execution pattern. For example, if you are showing ads on your website, or if you are tracking user interactions, you should defer executing those scripts until the website is loaded.
  4. Optimize CSS: While JavaScript is the root cause of most FID issues, CSS is also render-blocking by default. Excessive CSS hurts the user experience, and you need to make sure you avoid expensive CSS properties such as box-shadow and filter. Besides implementing Critical CSS and minifying and compressing CSS files, it is also important to get rid of all unnecessary CSS on your site.

After Action Report

Google’s introduction of the Core Web Vitals was a major step in the right direction toward making the web better for everyone. The Core Web Vitals are important for all websites as part of Google’s page ranking algorithm. 

That is why it has become necessary to continuously monitor these metrics, even if you don’t notice any major issues right now.

Going forward, here is a quick checklist of things that you need to remember:

  • You should run a test at least once a month. 
  • Prioritize Field data over Lab test data, as the former accurately represents how actual users experience your site.
  • Make use of Google’s Search Console to find issues across a set of web pages.
  • Use PageSpeed Insights to understand and monitor how your site performs.
  • For a deeper understanding of your site’s performance and for further customization, extract data from the CrUX and gain additional control over your Field data.

If you are looking for an easy and painless way to manage your web servers then you should start using RunCloud. RunCloud makes it easy to deploy new servers, update DNS records, deploy new WordPress sites, manage database users, monitor NGINX logs, and more. Start using RunCloud today!