Understanding Core Web Vitals

Core Web Vitals: Complete Guide on What They Are and How to Improve Them

The upcoming Core Web Vitals update planned by Google to roll out in the period of June – August 2021 has become a buzzphrase on the SEO horizon. The Core Web Vitals are 3 new metrics that measure the user experience created by a website, putting website speed in the SEO spotlight. They will be added to the existing Page Experience signals: mobile-friendliness, safe-browsing, intrusive interstitial guidelines, and HTTPS security and as a result, will become an official ranking factor. Although their relative importance amidst 200 other factors will be low, webmasters should take them as a signal to invest in improving the overall interaction between users and the website by making it faster and more stable.

Read on to find out what the Core Web Vitals metrics are and how to test and optimize them.

What are Google’s existing page experience signals?

Let’s first quickly review which are the four Page Experience signals that have been a ranking factor since November last year and should serve as a starting point for the whole user experience improvement process as seen by Google:


There are a set of factors that determine whether the mobile version of your website is user-friendly. The main difference between mobile and desktop versions comes from the viewport, computing power, and connection speed. To build a mobile-friendly website, you should follow the best practices of accessibility and user-driven design. Some of the ways you can use to make your websites mobile-friendly include:

Safe browsing 

Your website should not be affected by malicious software. In 2007, Google launched its Safe Browsing initiative to protect users against malicious downloads. Now, it covers unwanted downloads and social engineering attacks, such as phishing, deceptive content, and more.

You can use Google Search Console (in the Security & Manual Actions) to check if your website is free from malicious software.


The HTTPS protocol is an internet communication protocol that SSL/TLS secures. The protocol will ensure that no one can steal or modify the data sent between the user and the server.

Google is not looking at sites using the HTTP protocol since they are considered not secure. So, if you want your website to be even considered for ranking, you should go with the HTTPS protocol.

No Intrusive interstitials

It is a bad practice for your page to show intrusive pop-ups, banners, and overlays on mobile devices. However, you won’t be penalized for displaying any popup ads at all. Google provides some guidelines about what’s okay in terms of intrusive interstitials. For example:

  • Required by law popups: cookies, age verification, etc.
  • Popups populating a reasonable amount of screen space

However, Google will not tolerate:

  • Ads that are above the fold leaving your main content below the fold
  • Popups that obscure your main content

What are Core Web Vitals?

Core Web Vitals are the new unified metrics, part of Google’s Page Experience signal, designed to measure and improve user experience. They aim to help site owners and developers focus on what matters most – the positive interaction between users and websites. Currently, Core Web Vitals consists of three metrics focused on real user experience data:

  • Largest Contentful Paint (measures loading performance)
  • First Input Delay (measures interactivity)
  • and Cumulative Layout Shift (measures visual stability). 

While you can monitor the Core Web Vitals metrics for both desktop and mobile, only mobile signals will be used for ranking pages. Also, keep in mind, when we talk about Web Core Vitals scores, the metrics will be assessed at the 75th percentile of users. Meaning, if you want to pass the Core Web Vitals metrics, your pages should meet the recommended scores for at least 75% of page visits.

Largest Contentful Paint (LCP)

Illustration of the differences between First Paint, First contentful paint and Largest Contentful Paint.

LCP (Largest Contentful Paint) is a user-centric metric that evaluates the page’s loading performance and measures how long it takes for the main content on your site to load. Usually, the LCP element is your site’s hero section, featured image, or a large text paragraph. Unlike First Contentful Paint (FCP) which measures when the first content loads, LCP focuses on the most meaningful content relevant to the user.

Studies show that the essential element on a web page that users want to see first is typically the largest one. The largest element is measured by its width multiplied by its height. Note that CSS margin, padding, and border don’t affect the size of that element. Keep in mind that your LCP element might be different for desktop (i.g. image) and mobile (i.g. text).

What is a good LCP score?

Illustration of how Google defines Largest Contentful Paint and its scores - Good, Need improvement and Poor.

Here’s how Google defines LCP scores:

  • Good: 2.5 seconds or less
  • Needs improvement: Less than or equal to 4.0 seconds
  • Poor: More than 4.0 seconds 

For your website to pass the Core Web Vitals, you need an LCP score of 2.5 seconds or less for 75% of all your page views.

A high LCP score means your users are waiting too much time to load the largest piece of content on your page. For website owners, this means long render times reflecting in big bounce rates and low conversion rates.

The three most common factors that negatively affect LCP are:

  1. Large, unoptimized media – images & video
  2. Render-blocking JavaScript
  3. Slow resource load time

Continue reading on, to learn how to measure and improve LCP score.

First Input Delay (FID)

Illustration of First Input Delay - a person clicking on a mobile device and waiting

First Input Delay (FID) is a real-user web performance metric that measures the interactivity and responsiveness of the web page. It takes into account users’ first impressions and evaluates the “delay” in event processing.

In other words, it measures the delay between the time when a user first interacts with your site (i.g. clicking a button or a link) and the time that the browser responds to your interaction and starts processing it.

FID only measures the first user interaction on your page because the first one is considered fundamental in user experience. FID does not consider scrolling and zooming as interactions. For pages that don’t offer any user interaction, FID won’t be reported.

A familiar metric close to FID is Time To Interactive. TTI measures the time it takes for a page to be fully interactive, while FID measures user interaction that happens before the page is fully interactive.

Google is replacing FID with INP as a Core Web Vitals metric

Google announced, that INP (Interaction to Next Paint) is officially replacing the FID (First Input Delay) as the new Core Web Vitals metric for responsiveness. The replacement will be effective as of March 2024.

What is a good FID score?

Illustration of how Google defines First Input Delay and its scores - Good, Need improvement and Poor.

Here’s how Google defines FID scores:

  • Good: Less than or equal to 100 milliseconds
  • Needs Improvement: Less than or equal to 300 milliseconds
  • Poor: More than 300 milliseconds

A common reason for a bad FID score is unoptimized JavaScript and CSS files. Continue reading to find out how to measure and optimize FID.

Cumulative Layout Shift (CLS)

Illustration of what Cumulative Layout Shift means - web page shifting down, before the user clicks

CLS (Cumulative Layout Shift) is a user experience metric that measures the web page’s visual stability defined by an unexpected layout shift.

Suppose a visible page element changes its position or size and affects the content position around it – that’s considered a layout shift. For example, a user accidentally clicks the wrong button because the late-loading content caused a button to shift. What you want as a website owner is for your page elements to be static as they load. 

CLS sums all layout shifts by looking at the proportion of the viewport impacted by the shift and the movement distance of the elements.

What is a good CLS score?

Illustration of Cumulative Layout Shift's score and score definitions - good, need improvement or poor.

Here’s how Google defines CLS scores:

  • Good – Less than or equal to 0.1 seconds
  • Needs Improvement – Less than or equal to 0.25 seconds
  • Poor – More than 0.25 seconds

A score less or equal to 0.1 seconds means the page’s contents are fully static during their lifecycle. A higher score means the contents are moving.

Usually, layout shifts are commonly caused by: images, ads, embeds, iframes without dimensions, dynamically injected content, and web fonts causing Flash of Invisible Text and Flash of Unstyled text. 

Google has updated the CLS metric based on community feedback. The metric was considered inadequate for web pages that are open for a long time, penalizing those pages with lower scores. Examples of such pages are social media apps with infinite scroll and single-page applications. The new change will not affect 55% of websites, but the rest will see an improvement in the metric. Most of them will see a slight difference in their results, but around 3% will see a huge improvement, and the metric from “poor” or “needs improvement” will be marked as “Good.”

New Labels in Search Results

Another benchmark Google considers is adding new labels in search results to notify users which pages provide a good user experience.

How to measure and test Core Web Vitals?

The new Page Experience signal, including Core Web Vitals, will affect both mobile and desktop organic results and whether your site will appear in Top Stories. With the addition of the new CWVs metrics, Google is removing AMP as a requirement from the Top Stories feature on mobile.

Understanding the new metrics and taking them into account is important for your overall website performance. Below, you’ll find useful tools to measure and test your website’s Core Web Vitals score.

Field tools

The field data, also known as real user monitoring (RUM), reflects real users’ browsing experience. It takes into account real users, various devices, different network connections, different connections, historical data, and the data is aggregated for the entire domain or per URL. Keep in mind that Google is using field data to rank your site. Therefore, if you want to inspect your real user experience, you should use field data.

Google Search Console (GSC)

Google Search Console has launched a Core Web Vitals report. It helps you identify groups of pages that have similar issues. You need to be aware that here you cannot detect individual pages’ issues. The GSC will break down Core Web Vitals by its three metrics: LCP, FID, and CLS for both mobile and desktop. Google Search Console requires DNS verification to view your website report.

Screenshot from Google Search Console's Core Web Vitals report

Moreover, Google rolled out a new Page Experience report within the Google Search Console. The report includes the Core Web Vitals Report alongside the existing page experience signals: mobile-friendliness, HTTPS, safe browsing status, and absence of intrusive interstitials. The new report enables you to quickly evaluate site performance by providing a percentage of URLs with good page experience and search impressions over time and looking into specific pages in need of improvements.

Screenshot from Google Search Console's Page Experience report

PageSpeed Insights

PageSpeed Insights, a browser-based page speed testing tool, also includes Core Web Vitals score in their report. Unlike Google Search Console, here you can evaluate your website performance page-by-page. Also, PageSpeed Insights provides its users with actionable recommendations on how to improve their site performance. Core Web Vitals are annotated with a blue ribbon.

Screenshot of PageSpeed Insights and its result based on the Core Web Vitals

Keep in mind that you should look into both desktop and mobile scores as they might differ. PageSpeed Insights clearly indicates whether or not your page meets the thresholds for good experience relating to the Web Core Vitals metrics at the top of the report.

Chrome UX Report (CrUX) 

CrUX is a publicly accessible dataset of real-world Chrome user experience from millions of websites. The Chrome UX Report focuses on website loading performance. It measures the Core Web Vitals metrics and metrics like Time to First Byte (TTFB) and more.

Web Vitals Chrome Еxtension 

The extension performs real-time measures of the three Core Web Vitals metrics – loading, interactivity, and visual stability, in Chrome for desktop use. It is essentially a diagnostic tool that evaluates the performance of Core Web Vitals as you browse the web.

Screenshot from Google Chrome browser, while having opened the Web Vitals Chrome extension


Web.dev offers a free measurement tool to run a performance audit on your site. Moreover, you can check your site’s performance across different areas and give tips on improving metrics like the site’s performance, progressive web app status, accessibility, use of best practices, and SEO. It also supports the Core Web Vitals metrics.

Overview of web.dev Measure page for website performance audits

Lab Tools

The lab data refers to conducting tests in a controlled environment and seeing how a potential user will experience your website. Unlike field data, lab data works with simulated data, with predefined device and network specifications. It is useful in reproducing and debugging possible website performance issues, but it doesn’t give you real user experience information.


Lighthouse is an open-source, automated website auditing tool that helps developers to diagnose issues and improve the quality of web pages. The latest version – Lighthouse 6.0 introduces three new metrics to the report, including Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) as lab implementations of Core Web Vitals metrics. The third new metric is Total Blocking Time (TBT).

Overview of Lighthouse and the performance score based on the Core Web Vitals metrics

As you can see, a lab tool like Lighthouse can’t measure First Input Delay (FID), because it requires a real user’s interaction to be registered. However, you can monitor Total Blocking Time (TBT) which measures the total amount of time between First Contentful Paint and Time To Interactive. By improving your TBT, you’ll most likely improve your FIB as well. If you have a bad TBT score you should consider minimizing your third-party usage.


This is a free, open-source tool that measures your site speed performance. It loads your page in a real browser, helping you identify specific site sections that need more time to load.

Overview of webpagetest.org and its performance results regarding Core Web Vitals metrics

Chrome DevTools Performance Panel

Open Google Chrome in incognito mode and press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools. With the Chrome DevTools, you have the Performance option which includes the new Core Web Vitals. The Performance panel also has a new Experience section from where you can detect unexpected layout shifts. Therefore, you can identify and fix any visual instability and help with your Cumulative Layout Shift metric. 

Overview of Chrome's DevTools Performance tab

Select the Layout Shift to view its details in the Summary tab.

Be mindful that depending on which tool you use (based on field or lab data), the Core Web Vitals metrics might show different results.

How to Improve Core Web Vitals

Once you’re done analyzing your website, it’s time for action. The good news is that most of the tips for improving your Core Web Vitals are already part of the good practices for optimizing website performance. For more expert tips on website optimization, you can download our WordPress Speed Optimization ebook and learn how to make a high-performance website.

Improving LCP and FID

Choose Fast and Reliable Web Hosting 

One of the most common reasons for a bad LCP is a slow server response time. First, check your Time to First Byte (TTFB) – how long it takes for the browser to receive the first byte of content from the server. Have in mind that a fast server hosting service can have a huge impact on your website performance. To put it plain and simple, the faster the server response time – the faster your website performance will be

As a hosting provider, SiteGround continuously develops new tools and service upgrades that make your website faster and safer, and help you manage it easily. A glimpse of what we offer is an ultrafast hosting powered by Google Cloud, unique UltraFast PHP, custom MySQL database setup, and a strong defense system against any sort of potential threats.

Enable full-page caching

When you enable full-page caching, your site’s pages will be stored on the server as HTML files after the first time they are loaded. Only the first visitor of your site will load the entire page content from the database. All the rest will get the page output directly from the server’s memory, thus improving your site TTFB, making your site much faster, and ultimately improving your LCP metric.

SiteGround users take advantage of our unique full-page caching solution, called Dynamic caching, enabled for all sites by default. Depending on the type of site, we witness up to 5 times faster page loading.

Defer JavaScript

While the browser is loading the JavaScript, users cannot interact with the web page. That’s why sometimes you can see the term “Render-blocking JavaScript.” Deferring your JavaScrips means that the browser will process and load the JS files only after parsing the HTML document. In other words, rendering your website will be much faster because there won’t be anything to block the process. 

SiteGround’s SiteGround Optimizer plugin can easily take care of optimizing your JavaScript files. A dedicated tab will allow you to defer render-blocking JS, minify and combine JS, easily for faster website results.

Minify CSS and JS files

For easier readability, developers often leave characters such as spacing, indentation, or comments to the CSS and JS files. However, all these characters in the code are not essential for the browser. What minification does is it optimizes your code by removing any unnecessary characters, resulting in improved render time and faster websites

An easy and effective way to manage your CSS and JavaScript files is to use SiteGround Optimizer’s dedicated features for front-end optimization.

Optimize browser caching 

Browser caching is an efficient way that browsers download website images, data, and documents. To help your page load faster, make sure to set the right option for the static files that your browser keeps in its cache. 

All sites hosted with us can take advantage of our one-of-a-kind SuperCacher technology. SiteGround uses NGINX direct delivery to cache static resources, including proper expiration dates for browser caching. The memcached option is also available. 

Use a CDN

Besides the server that hosts your site, you can use a content delivery network (CDN) to speed up all your visitors’ loading time. The CDN will cache your content across a global network of servers and load your website from the one closest to the visitor, thus enhancing their experience with your page.

SiteGround partners with Cloudflare to bring customers enhanced speed and security. Cloudflare is a tool that speeds up your website when you have geographically dispersed traffic across multiple countries and continents. 

Remove any unnecessarily third-party scripts 

It is strongly recommended to remove any third-party scripts which don’t bring any clear value. For example, resources that you don’t use anymore but they impact your code. This will boost your Largest Contentful Paint (LCP) and First Input Delay score.

Optimize your images

Since images are often the LCP element for both mobile and desktop, optimizing them will inevitably improve your Largest Contentful Paint performance and score.

Here are some good practices on how to do that:

  • Always compress your images: reduce the image size without losing quality, which will improve your loading time
  • Serve images in next-gen formats: Such formats are JPEG 2000, JPEG XR, and WebP. Having this in mind, Google is recommending the WebP format
  • Correctly scale images
  • Lazy load static content: exclude your LCP element from lazy loading and display it directly in the page HTML
  • Use static images instead of a slider

An effective way to optimize your media is to take advantage of our SiteGround Optimizer plugin. It has dedicated features for media optimization from image optimization, supporting WebP format, to lazy load media (Iframes, videos, thumbnails, responsive images, widgets, and more). You can also easily exclude images from lazy loading. 

Use compression

Use applications for file compression, like Gzip and Brotli, to reduce the size of your CSS, HTML, and JavaScript files. As a result, the browser will be able to load those files faster, helping you improve LCP. 

SiteGround has deployed and enabled by default Brotli – the successor of gzip, the next-generation compression algorithm by Google. Our clients have gained up to 15-20% speed from using it.

Remove large page elements 

You can analyze the page elements which slow down your page’s LCP from Google PageSpeed Insights. We showed you how to do that in the How to Measure and Test Core Web Vitals section of the article.

Improving CLS

Make sure ads elements have a reserved space

Ads have a dynamic nature which can lead to unexpected layout shifts. This can have a negative effect on the user experience and thus can damage your CLS score. If you don’t reserve sufficient space for the ads being loaded, they can pop up unexpectedly and ruin your user experience.

Optimize your font delivery 

It goes without saying that every good website consists of carefully picked web fonts. Why carefully? Because fonts improve the readability of your page, and its accessibility, and convey your brand image. However, each font you use is an additional resource that may slow down your website. That’s not necessary if you optimize them. It is recommended to preload the fonts that you’re using to prevent layout shifts and flashes of invisible text. By doing this, you’ll improve your CLS metric score.

Our SiteGround Optimizer is also developed to help you in that area. Our dedicated Web Fonts Optimization functionality improves your render time resulting in better site performance.

Use set size attribute dimensions for any media 

Any media refers to videos, images, GIFs, infographics, and more. Setting the size attribute dimensions will tell the user’s browser exactly how much space that element will need. This will essentially minimize Cumulative Layout Shifts. 

The Core Web Vitals metrics and the way they’re scored may change over time. In fact, there is no doubt about it. Google has been changing the metrics used for measuring speed and indexing websites throughout the years. Giving a spotlight to page experience doesn’t mean that Google will stop seeking great page content. What we see is that user experience gains importance with each day and you better be prepared. After all, we all work together for a better web.

Updated: July 2023

Access email sent!

Sign Up For
More Awesome Content!

Subscribe to receive our monthly newsletters with the latest helpful content and offers from SiteGround.


Please check your email to confirm your subscription.

author avatar

Nikola Baldikov

SEO Manager until 2022

Nikola Baldikov is a SEO manager at SiteGround , specialising in SEO, content, and outreach strategies. Besides his passion for SEO, Nikola is an avid fan of football and he loves to dance.

Comments ( 7 )

author avatar


May 29, 2021

Hi when can we expect a fix for the lazy loading, which when enabled causes CLS (especially on slow connections)? Thanks Jan

author avatar

Hristo Pandjarov Siteground Team

Jun 01, 2021

Lazy loading done right does not cause CLS. Please, use the SG Optimizer plugin which improves the default WP lazy loading functionality.

author avatar


Jun 02, 2021

Mr. P :) How come our speed is very good/high on computer but very slow on mobiles using SG optimizer, and CloudFlare / fullpage caching? Tested on about 10-15 sites now, hard to get a decent score on mobile. I can easily do it with Nitro or Rocket(combined with their cdn). Yes someone on support should have passed my questions directly to you, i hope :)

author avatar

Hristo Pandjarov Siteground Team

Jun 03, 2021

Well, mobile score mostly depends on your actual web design. Google throttles the connection slowing down page loading times in order to simulate mobile phones. I would recommend checking the content you render on Mobile leaving only what you actually need.

author avatar

Mark Strong

Jun 06, 2021

Thanks Nikola, The information you provide is of the highest quality and very much appreciated. Trying to follow and adhere to the valuable insights shared. Wishing you and all the SG team a great year with continued success! Mark - VANJOBS

author avatar


Apr 26, 2023

I noticed my sites on siteground have a FCP around 1.5 seconds and LCP of 1.7. This is with no optimization, just a basic WP site. GT matrix says my root document took 967ms of waiting time before response. Until 1.5 seconds the speed visualization shows a blank screen. My question is what is happening on the server during that first second when nothing seems to be happening?

author avatar

Gabriela Andonova Siteground Team

May 02, 2023

Thanks for the comment, David. There are several factors that could affect the time of speed visualization (during which you see a blank screen), such as loading WordPress core files, executing PHP scripts, querying the database to fetch the content of the webpage, etc. Using dynamic caching and a CDN are the 2 most effective ways of reducing it. You can see more details about it here.


Start discussion

Related Posts