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 June – August 2021 has become a buzz phrase 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 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:

Mobile-friendliness

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:

• Optimizing website loading time
• Making your website responsive
• Simplifying navigation
• Being thumb-friendly
• Making your content easy for users to read

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.

HTTPS-security

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 (loading), First Input Delay (interactivity), and Cumulative Layout Shift (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)

LCP 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?

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 a 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:

• Large, unoptimized media – images & video
• Render-blocking JavaScript
• Slow resource load time

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

First Input Delay (FID)

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.

What is a good FID score?

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

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

Cumulative Layout Shift (CLS)

CLS is a user experience metric that measures the web page’s visual stability defined from 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?

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, 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 the improvement of 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.

Moreover, Google is rolling 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.

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.

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.

Web.dev 

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 you tips on improving metrics like site’s performance, progressive web app status, accessibility, use of best practices, and SEO. It also supports the Core Web Vitals metrics.

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

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).

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.

WebPageTest.org 

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.

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. 

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 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 strong defence 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 optimizing your code by removing any unnecessary characters, resulting in improved render time and faster websites. 

Easy and effective way to manage your CSS and JavaScript files is to use SiteGround Optimizer dedicated features to 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. 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 any more 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, that 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 are recommending the WebP format
• Correctly scale images
• Lazy load static content: but 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, 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 your 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.