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<\/strong>. Achieving good Core Web Vitals is recommended for success in Google Search, as it helps ensure a fast, responsive, and visually stable user experience.<\/p>\n\n\n\n The three Core Web Vitals are: <\/p>\n\n\n\n Google uses these quality signals as part of its ranking algorithm, and improving them can boost your search rankings.<\/strong><\/p>\n\n\n\n Largest Contentful Paint (LCP)<\/strong> measures how long it takes for the largest visible content element on a page to fully render<\/strong>. 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.<\/p>\n\n\n\n Here\u2019s how Google defines LCP scores:<\/p>\n\n\n\n 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.<\/strong><\/p>\n\n\n\n A high LCP means your users are waiting too much time<\/strong> 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.<\/p>\n\n\n\n The three most common factors that negatively affect LCP are:<\/p>\n\n\n\n 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.<\/p><\/div>\n\n\n\n Interaction to Next Paint (INP)<\/strong> is a real-user web performance metric that measures the responsiveness of a web page.<\/strong> 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n Unlike FID, which only measures the delay for the first input, INP considers the responsiveness of the entire page throughout the user’s session.<\/p>\n\n\n\n Here\u2019s how Google defines INP scores:<\/p>\n\n\n\n A common reason for a bad INP score is unoptimized JavaScript and CSS files. We\u2019ll show you how to measure and improve INP later on.<\/p>\n\n\n\n Cumulative Layout Shift (CLS)<\/strong><\/a> measures the visual stability of a page by tracking unexpected layout shifts.<\/strong> 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<\/strong>, leading to a frustrating experience for users.<\/p>\n\n\n\n Here\u2019s how Google defines CLS scores:<\/p>\n\n\n\n A score less or equal to 0.1 seconds means the page\u2019s contents are fully static during their lifecycle. A higher score means the contents are moving.<\/p>\n\n\n\n Usually, layout shifts are commonly caused by:<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Field data, also known as real user monitoring (RUM), reflects real users\u2019 browsing experience<\/strong>. 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.<\/p>\n\n\n\n Keep in mind that Google is using field data to rank your site.<\/strong> Therefore, if you want to inspect your real user experience, you should use field tools.<\/p>\n\n\n\n Google Search Console<\/strong> 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<\/strong>, Needs Improvement<\/strong>, or Poor<\/strong>.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n You should look into both desktop and mobile scores,<\/strong> as they might differ. At the top of the report, PageSpeed Insights<\/a> clearly indicates whether your page meets the thresholds for a good experience based on the site\u2019s Core Web Vitals. <\/p>\n\n\n\n The Chrome User Experience Report (CrUX) provides real-world performance data from Chrome users<\/strong>. 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)<\/a>, and more.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n Web.dev offers a free measurement tool to run a performance audit on your site. Moreover, you can check your site\u2019s performance across different areas and get tips on improving metrics like the site\u2019s performance, progressive web app status, accessibility, use of best practices, and SEO<\/strong>. It also supports the Core Web Vitals metrics.<\/p>\n\n\n\n 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<\/strong>, with predefined device and network specifications. They are useful in reproducing and debugging possible website performance issues, but don\u2019t give you real user experience information.<\/p>\n\n\n\n Lighthouse is an open-source, automated website auditing tool that helps developers diagnose issues and improve the quality of web pages. <\/p>\n\n\n\n A lab tool like Lighthouse can\u2019t measure Interaction to Next Paint (INP), because it requires real user interaction.<\/strong> However, you can monitor Total Blocking Time<\/strong> (TBT), which measures the total amount of time between First Contentful Paint and Time To Interactive. By improving your TBT, you\u2019ll most likely improve your INP as well.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n With the Chrome DevTools<\/strong>, you have the Performance option,<\/strong> which includes Core Web Vitals. The Performance panel also has an Experience<\/strong> section where you can detect unexpected layout shifts. Therefore, you can identify and fix any visual instability and improve your Cumulative Layout Shift metric.<\/p>\n\n\n\n In order to access the Chrome DevTools Performance Panel, Open Google Chrome<\/strong> (use incognito mode so there\u2019s no browser cache) and press Command+Option+I (Mac)<\/strong> or Control+Shift+I (Windows, Linux)<\/strong> to open DevTools<\/strong>. <\/p>\n\n\n\n Select the Layout Shift<\/strong> to view its details in the Summary<\/strong> tab.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n When you enable full-page caching, your site\u2019s 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\u2019s memory, making your site much faster, and ultimately improving your LCP metric.<\/p>\n\n\n\n SiteGround users take advantage of our unique full-page caching solution, called Dynamic caching<\/strong>, enabled for all sites by default. Depending on the type of site, we see up to 5 times faster page loading.<\/a><\/p>\n\n\n\n One of the most common reasons for a bad LCP is a slow server response time<\/strong>. First, check your Time to First Byte (TTFB)<\/a> \u2013 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.<\/strong> <\/p>\n\n\n\n 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. <\/p><\/div>\n\n\n\n Besides the server that hosts your site, you can use a content delivery network <\/strong>(CDN)<\/strong><\/a> to speed up all your visitors\u2019 loading time. The CDN will cache your content across a <\/strong>global network of servers<\/strong><\/a> and load your website from the one closest to the visitor<\/strong>, thus enhancing their experience with your page.<\/p>\n\n\n\n SiteGround has developed its own CDN infrastructure to increase website performance and security for all of its users. <\/p>\n\n\n\n Optimizing images will improve your Largest Contentful Paint score<\/strong> since they are often the largest page element.<\/p>\n\n\n\n Always compress your images and scale them correctly. It is recommended to serve images in next-gen formats such as WebP<\/strong><\/a>, to improve performance.<\/p>\n\n\n\n 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. <\/p><\/div>\n\n\n\n Reducing CSS and JavaScript that slow down the page load can improve your overall Core Web Vital score and user interaction.<\/p>\n\n\n\n While the browser is loading JavaScript, users cannot interact with the web page. That\u2019s why sometimes you can see the term \u201cRender-blocking JavaScript.\u201d Deferring your JavaScrips means the browser will process and load JS files only after parsing the HTML document<\/strong>. <\/p>\n\n\n\n In other words, rendering your website will be much faster because there won\u2019t be anything to block the process. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n Minification optimizes your code by removing any unnecessary characters, resulting in improved render time and faster websites<\/strong>. <\/p>\n\n\n\n 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.<\/strong><\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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<\/strong> and overall performance.<\/p>\n\n\n\n Instead of having large tasks run directly in the browser\u2019s 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.<\/p>\n\n\n\n Optimized event handlers reduce input delay and improve site speed<\/strong>, contributing to better Core Web Vitals metrics.<\/p>\n\n\n\n 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\u2019s main thread is idle. This ensures the interaction is smooth and the user doesn\u2019t experience delays. <\/p>\n\n\n\n It is strongly recommended to remove any third-party scripts which don\u2019t 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\u2019t used for your core audience, can significantly improve both your Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) score.<\/p>\n\n\n\n Setting size attribute dimensions will tell the user\u2019s browser exactly how much space that element needs. Let\u2019s use an image element as an example.<\/p>\n\n\n\n If you don\u2019t set the width and height attributes for an image, the browser won\u2019t know the exact size this image will occupy until it fully loads, which can cause a layout shift. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n Fonts improve the readability of your page, and convey your brand image. <\/strong>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.<\/p>\n\n\n\n To preload fonts, you use the <link rel=”preload”><\/strong> tag in the <head><\/strong> of your HTML document. You need to specify the as=”font” attribute<\/strong> and include crossorigin<\/strong> if the font is being loaded from an external source (like a CDN). <\/p>\n\n\n\n By doing this, you\u2019ll improve your CLS metric score.<\/p>\n\n\n\n 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.<\/p><\/div>\n\n\n\n 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\u2019t reserve sufficient space for the ads on your site, they can pop up unexpectedly and ruin user experience.<\/p>\n\n\n\n Layout shifts<\/strong> during animations often disrupt the user\u2019s experience and can significantly impact your Cumulative Layout Shift (CLS)<\/strong> score. By using the CSS transform<\/strong> property for animations, you can avoid causing elements on the page to move unpredictably. <\/p>\n\n\n\n Transform animations, such as scale<\/strong> or translate<\/strong>, help maintain the position of other content on the page. This leads to a more stable experience on your site.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n To improve visual stability, it\u2019s important to pre-allocate space for dynamically loaded content. <\/strong>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:<\/p>\n\n\n\n This minimizes the impact on the user experience while also improving performance metrics related to your layout shift score. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n It\u2019s important to note that Google\u2019s ranking algorithm is continuously updated<\/strong>. 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\u2019s ranking algorithms evolve. This way, you\u2019re setting your site up for long-term success. <\/p>\n\n\n\n For more expert tips on website optimization<\/strong>, you can download our WordPress Speed Optimization ebook<\/strong><\/a> or watch our video guide and learn how to build a high-performance website. <\/p>\n\n\n\n\n
Largest Contentful Paint (LCP)<\/strong><\/h3>\n\n\n\n
![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/1_Largest_Contentful_Paint-1024x339-1.jpg\")
<\/figure>\n\n\n\n![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/2_LCP_Score-1024x339-1.jpg\")
<\/figure>\n\n\n\n\n
\n
Interaction to Next Paint (INP) <\/strong><\/h3>\n\n\n\n
![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/3_First_Input_Delay-1024x505-1.jpg\")
<\/figure>\n\n\n\n![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/4_FID_Score-1024x339-1.jpg\")
<\/figure>\n\n\n\n\n
Cumulative Layout Shift (CLS)<\/strong><\/h3>\n\n\n\n
![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/5_Cumulative_Layout_Shift-1024x505-1.jpg\")
<\/figure>\n\n\n\n![\"Illustration](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/6_CLS_Score-1024x339-1.jpg\")
<\/figure>\n\n\n\n\n
\n
<\/span>How to measure Core Web Vitals? <\/strong><\/span><\/h2>\n\n\n\n
Field tools<\/strong><\/h3>\n\n\n\n
Google Search Console<\/strong><\/a> (GSC)<\/strong><\/h4>\n\n\n\n
![\"Screenshot](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/7_Google_Search_Console-1024x497.jpg\")
<\/figure>\n\n\n\nPageSpeed Insights<\/strong><\/a><\/h4>\n\n\n\n
![\"Screenshot](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2024\/07\/pagespeed-insight-core-web-vitals-1024x628-1.jpg\")
<\/figure>\n\n\n\nChrome UX Report<\/strong><\/a> (CrUX) <\/strong><\/h4>\n\n\n\n
Web Vitals Chrome \u0415xtension<\/strong><\/a> <\/strong><\/h4>\n\n\n\n
![\"Screenshot](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/10_Web_Vitals_Chrome_Extention-1024x433.jpg\")
<\/figure>\n\n\n\nWeb.dev<\/strong><\/a> <\/strong><\/h4>\n\n\n\n
![\"Overview](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/11_Web_dev-1024x458.jpg\")
<\/figure>\n\n\n\nLab Tools<\/strong><\/h3>\n\n\n\n
Lighthouse<\/strong><\/a><\/h4>\n\n\n\n
![\"Overview](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/12_Lighthouse-1024x479.jpg\")
<\/figure>\n\n\n\nWebPageTest.org <\/strong><\/a><\/h4>\n\n\n\n
![\"Overview](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/13_WebPageTest-1024x201.jpg\")
<\/figure>\n\n\n\nChrome DevTools Performance Panel<\/strong><\/h4>\n\n\n\n
![\"Overview](\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/05\/14_Chrome_DevTools-1024x915.jpg\")
<\/figure>\n\n\n\n<\/span>How to Improve Core Web Vitals<\/strong><\/span><\/h2>\n\n\n\n
How to Improve Largest Contentful Paint (LCP)<\/strong><\/h3>\n\n\n\n
Enable full-page caching<\/strong><\/h4>\n\n\n\n
Choose Fast and Reliable Web Hosting <\/strong><\/h4>\n\n\n\n
Use a CDN<\/strong><\/h4>\n\n\n\n
Optimize images<\/strong><\/h4>\n\n\n\n
Optimize JavaScript and CSS<\/h4>\n\n\n\n
\n
\n
How to Improve Interaction to Next Paint (INP)<\/h3>\n\n\n\n
Remove large page elements and long tasks<\/h4>\n\n\n\n
Use Web Workers<\/h4>\n\n\n\n
Optimize Event Handlers <\/h4>\n\n\n\n
Reduce third-party scripts <\/strong><\/h4>\n\n\n\n
How to Improve Cumulative Layout Shift (CLS) <\/strong><\/h3>\n\n\n\n
Set size attributes<\/strong><\/h4>\n\n\n\n
<img src=\"image.jpg\" width=\"600\" height=\"400\" alt=\"A scenic view of mountains\"><\/code><\/pre>\n\n\n\nPreload fonts<\/strong><\/h4>\n\n\n\n
Reserve Space for Ads<\/strong><\/h4>\n\n\n\n
Use CSS <\/strong>transform<\/strong> for Animations<\/strong><\/h4>\n\n\n\n
Minimize Dynamically Injected Content<\/strong>: <\/h4>\n\n\n\n
<div id=\"dynamic-content\" class=\"ad-container\"><\/div>\n\n<script>\n const adContainer = document.getElementById('dynamic-content');\n adContainer.style.width = '300px'; \/\/ Fixed width\n adContainer.style.height = '250px'; \/\/ Fixed height\n\n \/\/ Dynamically inject content\n adContainer.innerHTML = '<p>Ad will appear here<\/p>';\n<\/script><\/code><\/pre>\n\n\n\n<\/span>Why are Core Web Vitals important?<\/span><\/h2>\n\n\n\n