Slow loading times, unresponsive elements, or unexpected page shifts can frustrate users. This is why Core Web Vitals have become essential for optimizing your site and your chances of ranking higher in searches.
By improving your website performance on these metrics, you can provide a smoother experience for your audience. This results in better search engine rankings, increased engagement, and more conversions.
What are Core Web Vitals?
Core Web Vitals is a set of metrics from Google that measure real-world user experience for loading performance, interactivity, and visual stability of a webpage. Achieving good Core Web Vitals is recommended for success in Google Search, as it helps ensure a fast, responsive, and visually stable user experience.
The three Core Web Vitals are:
- Largest Contentful Paint (LCP) – Measures how long it takes for the largest visible element (like an image, video, or block of text) to load and become visible to the user.
- Interaction to Next Paint (INP) – Measures the time it takes for a website to respond visually after a user interaction, such as clicking a button or typing.
- Cumulative Layout Shift (CLS) – Measures how much visible content shifts unexpectedly during loading.
Google uses these quality signals as part of its ranking algorithm, and improving them can boost your search rankings.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element on a page to fully render. This could be an image, video, or a block of text that occupies the most space on the screen. This metric is important because it gives an accurate view of how fast a web page loads from the user’s perspective.
Here’s how Google defines LCP scores:
- Good: 2.5 seconds or less
- Needs improvement: Between 2.5 and 4 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 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, leading to big bounce rates and low conversion rates.
The three most common factors that negatively affect LCP are:
- Large, unoptimized media
- Render-blocking JavaScript
- Slow resource load time
Interaction to Next Paint (INP)
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.
Interaction to Next Paint (INP) is a real-user web performance metric that measures the responsiveness of a web page. It evaluates the time it takes for the browser to respond to user interactions, such as clicks or taps after the page has finished loading.
INP is designed to capture the user’s experience of how quickly and smoothly a site reacts to their inputs. It is a key indicator of the page’s interactivity and responsiveness.
Unlike FID, which only measures the delay for the first input, INP considers the responsiveness of the entire page throughout the user’s session.
Here’s how Google defines INP scores:
- Good: Less than or equal to 200 milliseconds
- Needs Improvement: Between 200 milliseconds and 500 milliseconds
- Poor: More than 500 milliseconds
A common reason for a bad INP score is unoptimized JavaScript and CSS files. We’ll show you how to measure and improve INP later on.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of a page by tracking unexpected layout shifts. These shifts often occur when new content loads, like images without specified dimensions or dynamically inserted ads. A high CLS score indicates a page is unstable, leading to a frustrating experience for users.
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 a flash of invisible text and a flash of unstyled text.
How to measure Core Web Vitals?
There are several tools available to measure Core Web Vitals, both using real-world data from users and lab metrics (simulated tests). These tools help site owners track their Core Web Vitals performance and identify areas for improvement.
Field tools
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, and historical data. The result 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 tools.
Google Search Console (GSC)
Google Search Console offers a Core Web Vitals report that shows how your site performs on desktop and mobile devices. It highlights affected pages and groups them by performance – Good, Needs Improvement, or Poor.
PageSpeed Insights
PageSpeed Insights analyzes individual web pages and provides detailed insights into their Core Web Vitals performance. It offers suggestions for improving page speed and site performance.
You should look into both desktop and mobile scores, as they might differ. At the top of the report, PageSpeed Insights clearly indicates whether your page meets the thresholds for a good experience based on the site’s Core Web Vitals.
Chrome UX Report (CrUX)
The Chrome User Experience Report (CrUX) provides real-world performance data from Chrome users. It shows how users experience your site on both mobile and desktop devices. The Chrome UX Report focuses on website loading performance. It measures Core Web Vitals, metrics like Time to First Byte (TTFB), and more.
Web Vitals Chrome Еxtension
The Web Vitals extension allows you to track Core Web Vitals directly in your Chrome browser as you browse your site. It’s a free tool that provides instant feedback on Core Web Vitals metrics.
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 get 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.
Lab Tools
This refers to conducting tests in a controlled environment and seeing how a potential user will experience your website. Unlike field tools, lab tools work with simulated data, with predefined device and network specifications. They are useful in reproducing and debugging possible website performance issues, but don’t give you real user experience information.
Lighthouse
Lighthouse is an open-source, automated website auditing tool that helps developers diagnose issues and improve the quality of web pages.
A lab tool like Lighthouse can’t measure Interaction to Next Paint (INP), because it requires real user interaction. 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 INP as well.
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
With the Chrome DevTools, you have the Performance option, which includes Core Web Vitals. The Performance panel also has an Experience section where you can detect unexpected layout shifts. Therefore, you can identify and fix any visual instability and improve your Cumulative Layout Shift metric.
In order to access the Chrome DevTools Performance Panel, Open Google Chrome (use incognito mode so there’s no browser cache) and press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools.
Select the Layout Shift to view its details in the Summary tab.
Keep in mind 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
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.
How to Improve Largest Contentful Paint (LCP)
Enable full-page caching
When you enable full-page caching, your site’s pages will be stored on the server after the first time they are loaded. Only the first visitor will load the entire page content from the database. All the rest will get the page output directly from the server’s memory, 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 see up to 5 times faster page loading.
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. The faster your server responds, the better your website will perform.
SiteGround offers a highly optimized hosting environment, powered by Google Cloud. We implement a unique UltraFast PHP, a custom MySQL database setup, and a strong defense system against potential threats.
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 has developed its own CDN infrastructure to increase website performance and security for all of its users.
Optimize images
Optimizing images will improve your Largest Contentful Paint score since they are often the largest page element.
Always compress your images and scale them correctly. It is recommended to serve images in next-gen formats such as WebP, to improve performance.
An effective way to optimize your media is to take advantage of our Speed Optimizer plugin. It has features for media optimization such as image compression, conversion to WebP format and lazy loading media.
Optimize JavaScript and CSS
Reducing CSS and JavaScript that slow down the page load can improve your overall Core Web Vital score and user interaction.
- Defer JavaScript
While the browser is loading JavaScript, users cannot interact with the web page. That’s why sometimes you can see the term “Render-blocking JavaScript.” Deferring your JavaScrips means the browser will process and load 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.
- Minify CSS and JS files
For easier readability, developers often leave characters such as spacing, indentation, or comments in CSS and JS files. However, all these characters in the code are not essential for the browser.
Minification optimizes your code by removing any unnecessary characters, resulting in improved render time and faster websites.
How to Improve Interaction to Next Paint (INP)
Remove large page elements and long tasks
Reducing long tasks prevents delays in responding to user interactions. A long task refers to any piece of JavaScript code that takes more than 50 milliseconds to execute. Large page elements like videos or background images can slow down code execution and impact INP.
Instead of using a high-resolution image for the background (e.g., a 4MB JPEG), consider using an optimized WebP image that reduces the file size significantly (e.g., 400KB). Similarly, videos can be lazy-loaded or replaced with static images for initial load, deferring the heavy media until after user interaction.
Use Web Workers
Using Web Workers allows heavy tasks to run in the background, preventing them from blocking the main thread. This reduces delays in user input and page load, optimizing the INP score and overall performance.
Instead of having large tasks run directly in the browser’s main thread (causing the page to freeze), the processing can be offloaded to a Web Worker. This lets the user continue interacting with the site without any noticeable lag, while the background task completes.
Optimize Event Handlers
Optimized event handlers reduce input delay and improve site speed, contributing to better Core Web Vitals metrics.
For example, when a user clicks a button, the event handler first logs the button click and defers the calculation to a less critical time when the browser’s main thread is idle. This ensures the interaction is smooth and the user doesn’t experience delays.
Reduce third-party scripts
It is strongly recommended to remove any third-party scripts which don’t bring any clear value. If your site includes multiple third-party scripts for analytics, ads, or social media widgets, evaluate whether they are necessary. Removing non-essential scripts, such as a redundant chat widget or ad tracker that isn’t used for your core audience, can significantly improve both your Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) score.
How to Improve Cumulative Layout Shift (CLS)
Set size attributes
Setting size attribute dimensions will tell the user’s browser exactly how much space that element needs. Let’s use an image element as an example.
If you don’t set the width and height attributes for an image, the browser won’t know the exact size this image will occupy until it fully loads, which can cause a layout shift.
<img src="image.jpg" width="600" height="400" alt="A scenic view of mountains">By specifying the width and height, you allow the browser to calculate the aspect ratio of the image and reserve appropriate space for it. This will minimize Cumulative Layout Shifts.
Preload fonts
Fonts improve the readability of your page, and convey your brand image. However, each font you use is an additional resource that may slow down your website. Preloading fonts is recommended to prevent layout shifts and flashes of invisible text.
To preload fonts, you use the <link rel=”preload”> tag in the <head> of your HTML document. You need to specify the as=”font” attribute and include crossorigin if the font is being loaded from an external source (like a CDN).
By doing this, you’ll improve your CLS metric score.
Our Speed 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.
Reserve Space for Ads
Ads have a dynamic nature which can lead to unexpected layout shifts. This can have a negative effect on your CLS score. If you don’t reserve sufficient space for the ads on your site, they can pop up unexpectedly and ruin user experience.
Use CSS transform for Animations
Layout shifts during animations often disrupt the user’s experience and can significantly impact your Cumulative Layout Shift (CLS) score. By using the CSS transform property for animations, you can avoid causing elements on the page to move unpredictably.
Transform animations, such as scale or translate, help maintain the position of other content on the page. This leads to a more stable experience on your site.
Minimize Dynamically Injected Content:
Dynamically injected content, such as ads, images, or videos that load after the initial webpage, often causes layout shifts. These shifts can negatively affect the Cumulative Layout Shift (CLS) score.
To improve visual stability, it’s important to pre-allocate space for dynamically loaded content. There are multiple techniques for that, like setting size dimensions in your CSS, JavaScript, or using Aspect Ratio boxes or Placeholders. You can see an example of setting size dimensions before injecting content dynamically with JavaScript below:
<div id="dynamic-content" class="ad-container"></div>
<script>
const adContainer = document.getElementById('dynamic-content');
adContainer.style.width = '300px'; // Fixed width
adContainer.style.height = '250px'; // Fixed height
// Dynamically inject content
adContainer.innerHTML = '<p>Ad will appear here</p>';
</script>This minimizes the impact on the user experience while also improving performance metrics related to your layout shift score.
Why are Core Web Vitals important?
The tips above are both recommended best practices for website optimization and also positively affect the page experience signals measured by Google’s Core Web Vitals.
As a website owner, it is important to understand these metrics. This can help you offer a positive user experience, and improve your search engine rankings and overall web page performance.
It’s important to note that Google’s ranking algorithm is continuously updated. Regularly monitoring your Core Web Vitals with tools like PageSpeed Insights or Search Console can help you make necessary adjustments, even as user expectations and Google’s ranking algorithms evolve. This way, you’re setting your site up for long-term success.
For more expert tips on website optimization, you can download our WordPress Speed Optimization ebook or watch our video guide and learn how to build a high-performance website.
Updated: October 2024
[subscribe_cta]
