{"id":55392,"date":"2021-07-08T05:22:25","date_gmt":"2021-07-08T05:22:25","guid":{"rendered":"https:\/\/www.incrementors.com\/blog\/?p=55392"},"modified":"2025-01-04T08:36:47","modified_gmt":"2025-01-04T08:36:47","slug":"core-web-vitals-improve-them-to-rank-higher","status":"publish","type":"post","link":"https:\/\/www.incrementors.com\/blog\/core-web-vitals-improve-them-to-rank-higher\/","title":{"rendered":"Core Web Vitals: How To Measure &#038; Improve Them To Rank Higher"},"content":{"rendered":"\n<p>Google is highly focused on making the user experience as better as possible, that\u2019s why they always come up with new algorithm updates. Do you know that 88% of users are less likely to return to a website after a bad user experience?<\/p>\n\n\n\n<p>Recently Google updated their page experience signals and added <strong>Core Web Vitals<\/strong> signals to evaluate the quality of web pages to make the user experience of the website more positive. And it comes into effect as an important ranking factor from May 2025.<\/p>\n\n\n\n<div class=\"blogncta\">\n<div class=\"blogctaimg\">\n<center><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2024\/01\/audit-report.png\" alt=\"\" title=\"\"><\/center>\n<\/div>\n<div class=\"blogctahead\">\n<h3>Unlock Your Free SEO Audit Now<\/h3>\n<p>Unlock your website&#8217;s full potential! Get a FREE SEO Audit with 60+ checks. Don&#8217;t miss insights for online success.<\/p>\n\n<a href=\"https:\/\/www.incrementors.com\/tools\/seo-audit\/\" class=\"blognbutton\">Get a Free Audit<\/a>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>It is one of the most <a href=\"https:\/\/www.incrementors.com\/blog\/complete-seo-google-ranking-factors-updated-list\/\" target=\"_blank\" rel=\"noreferrer noopener\">important ranking factors of Google<\/a>. In this article, we\u2019ll discover what core web vitals are, how you can measure them, and most importantly how you can optimize your website in the best way to rank higher on Google.<\/p>\n\n\n\n<p>Optimizing your website for a great user experience is the key to long-term success. It doesn\u2019t matter whether you&#8217;re a business owner, marketer, or developer.<\/p>\n\n\n\n<p>Before we move further, I would like you to watch the video this.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"5 Useful Core Web Vitals Tips To Improve Your Website&#039;s Speed\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/nm90Xa3PUYo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Are Core Web Vitals?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/page-experience-signal-4.jpeg\" alt=\"Search Signals for Page Experience\" class=\"wp-image-55404\" title=\"\"><\/figure>\n\n\n\n<p>Core web vitals is a subset of Google page experience ranking signal. It\u2019s a Google method of measuring the quality of your webpage for a better user experience.<\/p>\n\n\n\n<p>It consists of three major metrics which include largest contentful paint, first input delay, and cumulative layout shift. Core web vitals can help you to measure the key areas of improvement of your site for a better user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Are Core Web Vitals Important?<\/strong><\/h2>\n\n\n\n<p>This tweet is enough to tell you why it is going to be a very important factor from an SEO perspective because it&#8217;s all about ranking &amp; who doesn\u2019t want to rank on Google.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/tweet-page-ranking-signals.png\" alt=\"Google&#039;s tweet on core web vitals update\" class=\"wp-image-55405\" style=\"width:512px\" title=\"\"><\/figure><\/div>\n\n\n<p>Just think if you write the best content in the world &amp; when people come to read it and get annoyed by technical issues like the slow content load on the page, interactivity issues, and input delays that will surely ruin their experience. As a result, they will bounce back from your site and Google will consider it as a negative signal.<\/p>\n\n\n\n<p>If you want to <a href=\"https:\/\/www.incrementors.com\/blog\/optimize-your-content-for-search-intent\/\" data-type=\"link\" data-id=\"https:\/\/www.incrementors.com\/blog\/optimize-your-content-for-search-intent\/\">rank your content in 2025<\/a> then you need to focus on both the content &amp; user experience. Google wants to make their user\u2019s experience as good as possible by eliminating those websites that have bad page experiences with lots of technical errors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Largest Contentful Paint<\/strong><\/h2>\n\n\n\n<p>The Largest Contentful Paint (LCP) metric defines the rendering time of the largest image or text block of the web page to the user in their browser.<\/p>\n\n\n\n<p>It means how much time your page takes to load its largest content element on the screen. In relation to the time of when the page started to load when the user opened it on their browser.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/largest-contentful-paint.png\" alt=\"Largest Contentful Paint\" class=\"wp-image-55406\" title=\"\"><\/figure><\/div>\n\n\n<p>Let\u2019s try to understand with an example if you have a simple page that has just text &amp; image so the largest content element is an image that loads on-screen after the text.<\/p>\n\n\n\n<p>Because the size of the image is larger than the text block. So if you want to make your page open up faster then you should focus on optimizing your image.<\/p>\n\n\n\n<p>You can check your LCP score using the Google PageSpeed Insights tool.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/LCP-Score-Screenshot.png\" alt=\"LCP Score Screenshot\" class=\"wp-image-55411\" style=\"width:750px\" title=\"\"><\/figure><\/div>\n\n\n<p>Google PageSpeed Insights tool gives you detailed information about the main area of improvement to boost your LCP score. Take a look at the screenshot below, the tool returns all the possible opportunities for improvement within your site. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/improvement-suggestion-for-lcp-score.png\" alt=\"Google PageSpeed Insight&#039;s Improvement Suggestion for LCP Score \" class=\"wp-image-55412\" title=\"\"><\/figure><\/div>\n\n\n<p>For more convenience you can use the Google search console it will show the complete report of your site in one place.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/GSC-suggestions.png\" alt=\"GSC suggestions\" class=\"wp-image-55413\" title=\"\"><\/figure><\/div>\n\n\n<p>A good LCP score according to Google guidelines is less than 2.5 sec, which means at least 80% of the page content should be loaded within that time frame on both mobile &amp; desktop.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/googles-largest-contentful-paint-guidelines.png\" alt=\"Google&#039;s Largest Contentful Paint Guidelines\" class=\"wp-image-55414\" title=\"\"><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimize Your LCP Score<\/strong><\/h2>\n\n\n\n<p>Once you figure out the area of improvement after running your page in core web vitals tools, you need to optimize it accordingly.<\/p>\n\n\n\n<p>Here are key areas where you can work to improve the performance of your webpage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Improve Server Response Times<\/strong><\/h3>\n\n\n\n<p>It\u2019s a time taken by the server to deliver web page content to the browser when a user makes a request from his browser by clicking on a link or entering a URL into the address bar, the less time it takes the better it is for your user experience. It can be achieved by having a fast website hosting service provider.<\/p>\n\n\n\n<p>For reducing your server response time you need to host your website on the fast hosting service provider and having a Content Delivery Network (CDN) setup or you can.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reduce Javascript-Blocking Time<\/strong><\/h3>\n\n\n\n<p>Unnecessary javascript can affect your page load significantly. If the script isn\u2019t required at the beginning of the page load. Then you need to make sure it\u2019s loaded after visible content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Minify CSS<\/strong><\/h3>\n\n\n\n<p>It means you remove the unnecessary characters, spaces, or comments from your source code to reduce the overall file size of it&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Remove Large Page Elements<\/strong><\/h3>\n\n\n\n<p>You can easily find the largest element on your website which is slowing down your website performance via the PageSpeed Insight tool and remove it for better performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Route Users to a Nearby <\/strong>CDN<\/h3>\n\n\n\n<p>CDN can store the cache version for your webpage. When a user\u2019s request a file from your site this request is routed to the closest CDN network&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set up Lazy Loading<\/strong><\/h3>\n\n\n\n<p>It\u2019s a technique where instead of loading the entire webpage in one go. We postpone the loading of the image for later and load them when those images are needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>First Input Delay<\/strong><\/h2>\n\n\n\n<p>It\u2019s a metric that measures the interactivity &amp; responsiveness of the page. In other words, it\u2019s about how much time the elements of your page take to respond to the first input given by users. It calculates the length of time in milliseconds between the first user interaction on a web page and the browser\u2019s response to that interaction.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/first-input-delay.png\" alt=\"First Input Delay\" class=\"wp-image-55415\" title=\"\"><\/figure><\/div>\n\n\n<p>For example, if someone is trying to click on a link or button and your page takes more time to respond then it\u2019ll ruin the user experience. That\u2019s why you should optimize your web page responsiveness. According to Google, your page should respond to the first input by the user within 100 milliseconds.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/googles-first-input-delay-guidelines.png\" alt=\"Googles First Input Delay Guidelines\" class=\"wp-image-55416\" title=\"\"><\/figure><\/div>\n\n\n<p>You can check the FID report by using PageSpeed Insight Tool &amp; Google Search Console Tool.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/fid-report-1-1024x559.png\" alt=\"\" class=\"wp-image-55493\" style=\"width:1024px\" title=\"\"><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Optimize Your<\/strong> FID Score<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use a Browser Cache<\/strong><\/h3>\n\n\n\n<p>Browser caching allows the user\u2019s to save files of your website on their browser locally. So when they revisit your site next time, it will take less time to load the page by making fewer requests to the server &amp; downloading fewer pages again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimizing Your Javascript Code<\/strong><\/h3>\n\n\n\n<p>JavaScript tasks are usually the main reason when there\u2019s a long input delay. But by breaking long tasks into smaller one allows user input to be processed between those small tasks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use Web Workers<\/strong><\/h3>\n\n\n\n<p>A blocked main thread is one of the main causes of input delay. Web workers allow you to run scripts in the background without affecting the Main Thread. Moving Non-UI operations to a background thread is generally a good practice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cumulative Layout Shift<\/strong><\/h2>\n\n\n\n<p>CLS is a metric that measures the unexpected shifting of the web elements when the page is being rendered. It measures the visual stability of a webpage. For example, if users try to click on the button and due to element instability they click on it somewhere else, this is something no one likes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift.png\" alt=\"Cumulative Layout Shift\" class=\"wp-image-55418\" title=\"\"><\/figure><\/div>\n\n\n<p>In the example below, you can see when the user is trying to click on go back button but due to unexpected layout shift, he clicked on the place my order button. You can imagine how annoying it can be for someone who doesn&#8217;t want to make a purchase.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop src=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/how-it-can-impact-user-experience.webm\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can check the CLS report by using PageSpeed Insight Tool &amp; Google Search Console Tool.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/CLS-Report.png\" alt=\"CLS Report\" class=\"wp-image-55419\" title=\"\"><\/figure><\/div>\n\n\n<p>Having a high CLS score is bad for your website. According to Google, your CLS score should be under 0.1 or less. It&#8217;s considered good, while anything between 0.1 to 0.25 needs work, and beyond 0.25 is poor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/googles-cumulative-layout-shift-guidelines.png\" alt=\"Googles Cumulative Layout Shift Guidelines\" class=\"wp-image-55421\" title=\"\"><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Optimize Your<\/strong> CLS Score<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set Width And Heights On Images<\/strong><\/h3>\n\n\n\n<p>By mentioning the width &amp; height of an image you tell the user browser to load that image only for that dimension. Which stops your image from moving unnecessarily to make a content shift.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Make Sure Embeds, and Iframes Have Fixed Space<\/strong><\/h3>\n\n\n\n<p>Dynamically injected content should never appear above content. That\u2019s already loaded. You can achieve this by minimizing CLS by precomputing sufficient space for embeds with a placeholder or fallback.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Remove Any Custom Fonts<\/strong><\/h3>\n\n\n\n<p>Prevent the Flash of Invisible Text (FOIT) because it can affect your CLS score. When the user browser loads the page text, content may be ready to render before your custom fonts fully download. This process makes your text hidden for a brief time. But you can easily fix this issue by preloading the web fonts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tools To Measure Web Vitals<\/strong><\/h2>\n\n\n\n<p>Before we get to know about the tools, it\u2019s very important to know the difference between how these tools collect these core web vitals metrics.<\/p>\n\n\n\n<p>It has two categories, the first is field tools which means they gather data from real-world users.<\/p>\n\n\n\n<p>Second is lab tools, they provide insight into how a potential user will experience your website and offer results for further optimization.<\/p>\n\n\n\n<p>These tools can help you to measure your site&#8217;s core web vitals and suggest improvements.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"https:\/\/www.incrementors.com\/blog\/wp-content\/uploads\/2021\/07\/Vitals-Tools.png\" alt=\"Core Web Vital Tools\" class=\"wp-image-55422\" style=\"width:2560px\" title=\"\"><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Here Is the List of All the Tools<\/strong><\/h3>\n\n\n\n<p>1 Google PageSpeed Insights<\/p>\n\n\n\n<p>2 Google Search Console&nbsp;<\/p>\n\n\n\n<p>3: Google Lighthouse<\/p>\n\n\n\n<p>4: Chrome DevTools<\/p>\n\n\n\n<p>5: Web.dev<\/p>\n\n\n\n<p>6: WebPageTest<\/p>\n\n\n\n<p>7: GTmetrix<\/p>\n\n\n\n<p>8: Cumulative Layout Shift Debugger<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Core Web Vitals Chrome Extensions<\/strong><\/h3>\n\n\n\n<p>1: Web vitals<\/p>\n\n\n\n<p>2: Core SERP Vitals<\/p>\n\n\n\n<p>3: Core Web Vitals Annotations<\/p>\n\n\n\n<p>4: CLS Visualizer <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>If you want to win the game of SEO then you have to work on every aspect of it. And improving the page experience of your website for your users is very important for increasing traffic, and gaining the trust of your users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google is highly focused on making the user experience as better as possible, that\u2019s why they always come up with new algorithm updates. Do you know that 88% of users are less likely to return to a website after a bad user experience? Recently Google updated their page experience signals and added Core Web Vitals signals to evaluate the quality of web pages to make &hellip; <\/p>\n","protected":false},"author":1,"featured_media":55397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/posts\/55392"}],"collection":[{"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/comments?post=55392"}],"version-history":[{"count":22,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/posts\/55392\/revisions"}],"predecessor-version":[{"id":74253,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/posts\/55392\/revisions\/74253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/media\/55397"}],"wp:attachment":[{"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/media?parent=55392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/categories?post=55392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incrementors.com\/blog\/wp-json\/wp\/v2\/tags?post=55392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}