{"id":3234,"date":"2022-05-23T11:47:29","date_gmt":"2022-05-23T11:47:29","guid":{"rendered":"https:\/\/www.lemosys.com\/blog\/?p=3234"},"modified":"2025-11-06T10:42:30","modified_gmt":"2025-11-06T10:42:30","slug":"google-core-web-vitals","status":"publish","type":"post","link":"https:\/\/www.lemosys.com\/blog\/google-core-web-vitals\/","title":{"rendered":"How to Optimize Your Site for Google\u2019s Core Web Vitals?"},"content":{"rendered":"<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\"><a href=\"https:\/\/www.lemosys.com\/blog\/web-stories\/core-web-vitals\/\"><strong>Core Web Vitals<\/strong><\/a>: Google launched an initiative to improve web performance. According to Google\u2019s business: web-based applications are slow and push users back to native applications.<\/span><\/p>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\">The way your content ranks in search results comes down to the keywords you use right now, the search traffic on your website, and the popularity of your website according to the number of new links to it from elsewhere. From August, Google is going to additionally consider the performance of your page according to the performance of your code.<\/span><\/p>\n<h2 style=\"text-align: justify;\"><strong>Why Core Web Vitals Are Important?\u00a0<\/strong><\/h2>\n<p style=\"text-align: justify;\">Core Web Vitals can help <a href=\"https:\/\/www.lemosys.com\/blog\/free-seo-tools\/\">improve your search results<\/a>. They are important because they help Google understand how well a website is performing and identify areas where it can improve.<\/p>\n<p style=\"text-align: justify;\">More specifically, these metrics consider:<\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Loading<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Interactivity<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Visual stability<\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">These are just a few factors that Google considers in its algorithms to measure the health of a website. It also considers mobile-friendliness. This is important because more people are using their mobile devices to access the web. If your website isn\u2019t mobile-friendly, you could be losing out on a lot of traffic and business.<\/p>\n<h2 style=\"text-align: justify;\"><strong><span data-preserver-spaces=\"true\">How Core Web Vitals Work?<\/span><\/strong><\/h2>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\"><strong>Core Web Vitals<\/strong> are a subset of factors belonging to <a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/experience\/page-experience\" target=\"_blank\" rel=\"noopener\">Google\u2019s Page Experience score<\/a>; a ranking signal rolled out in 2021. Let\u2019s take a closer look at the three specific measurements that make up Core Web Vitals:<\/span><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Largest Contentful Paint (LCP) \/ <\/span><\/strong>[<em>Page Loading<\/em>] :<span data-preserver-spaces=\"true\">\u00a0 LCP is the easiest Core Web Vital metric to comprehend, but it may not be obvious which element will be chosen for analysis. <img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3235 aligncenter\" src=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/lcp-300x75.webp\" alt=\"\" width=\"488\" height=\"122\" srcset=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/lcp-300x75.webp 300w, https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/lcp.webp 600w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/span><\/li>\n<\/ul>\n<p>According to Google&#8217;s best practices, your website must load the most meaningful piece of content on each webpage for the user within the first 2.5 seconds. The precursor to LCP as a metric was <strong>First Contentful Paint (FCP)<\/strong> which measured how long it took the website to load the first feature on any webpage visible in the user&#8217;s viewport.<\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">First Input Delay (FID) \/ <\/span><\/strong>[<em>Interactivity<\/em>] :<span data-preserver-spaces=\"true\">\u00a0The FID metric is calculated as the time between user interaction and the browser processing their request. It does not measure the time to run the handler function, which would typically process the input and update the DOM.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-3236 aligncenter\" src=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/fid-300x75.webp\" alt=\"\" width=\"488\" height=\"122\" srcset=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/fid-300x75.webp 300w, https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/fid.webp 600w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/p>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\">According to Google, the ideal delay would be no more than 100ms. Website visitors aren&#8217;t typically patient until the whole page loads and will commence clicking on various features on your website before loading is complete.<\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li><strong><span data-preserver-spaces=\"true\">Cumulative Layout Shift (CLS) \/ <\/span><\/strong>[<em>Visual Stability<\/em>] : <span data-preserver-spaces=\"true\">CLS calculates a score when elements move without warning or user interaction. You have probably experienced this when reading an article on a mobile device \u2013 the text suddenly jumps off-screen, and you lose your place. The worst examples could cause you to click an incorrect link.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-3237 aligncenter\" src=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/cls_8x2-300x75.webp\" alt=\"\" width=\"496\" height=\"124\" srcset=\"https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/cls_8x2-300x75.webp 300w, https:\/\/www.lemosys.com\/blog\/wp-content\/uploads\/2022\/05\/cls_8x2.webp 600w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/p>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\">Imagine you wanted to click on a link next to the &#8220;Checkout&#8221; button on an <a href=\"https:\/\/www.lemosys.com\/services\/ecommerce-development\">e-commerce website<\/a> and ended up making a purchase unintentionally because the button suddenly shifted its place. Based on Google&#8217;s metrics for CLS scoring, your website&#8217;s overall CLS score should not go above 0.1.<\/span><\/p>\n<h3 style=\"text-align: justify;\">Best tools to check core web vitals<\/h3>\n<p style=\"text-align: justify;\">Here are some of the best tools to check <strong>Core Web Vitals<\/strong> for your site:<\/p>\n<ul>\n<li style=\"text-align: justify;\">Core Web Vitals Dashboard in <a href=\"https:\/\/search.google.com\/search-console\/core-web-vitals\" target=\"_blank\" rel=\"noopener\">Google Search Console<\/a><\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a><\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noopener\">Lighthouse<\/a>\u00a0for Developers<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/performance\/\" target=\"_blank\" rel=\"noopener\">Chrome DevTools<\/a>, which you can find by going to the right-hand corner of your Chrome browser, hovering over More Tools, and selecting Developer Tools.<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\/related?hl=en\" target=\"_blank\" rel=\"noopener\">Web Vitals<\/a>\u00a0Chrome extension<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/www.experte.com\/web-vitals\" target=\"_blank\" rel=\"noopener\">Experte<\/a>\u00a0Core Web Vitals Check<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/rviscomi.github.io\/crux-dash-launcher\/\" target=\"_blank\" rel=\"noopener\">CrUX Dashboard Creator<\/a>\u00a0from Github<\/li>\n<\/ul>\n<h3 style=\"text-align: justify;\"><strong>Conclusion<\/strong><\/h3>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\">Search engine companies have started to make changes to algorithms to improve the user experience of visiting websites. Meaningful and relevant content must be presented to meet the search query, and the sites must be easy to navigate. Google has been working to come up with a new algorithm adjustment for a good user experience.<\/span><\/p>\n<p style=\"text-align: justify;\"><span data-preserver-spaces=\"true\">There has been a focus on websites that improve the experience of visitors. The <a href=\"https:\/\/web.dev\/vitals\/\" target=\"_blank\" rel=\"noopener\"><strong>Google core web vitals<\/strong><\/a> update caters to the needs of websites by assuring an enhanced experience for visitors while they are on the site.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Core Web Vitals: Google launched an initiative to improve web performance. According to Google\u2019s business: web-based applications are slow and push users back to native applications. The way your content ranks in search results comes down to the keywords you use right now, the search traffic on your website, and the popularity of your website<\/p>\n<div class=\"read-more-section\"><a class=\"custom-readmore-button\" href=\"https:\/\/www.lemosys.com\/blog\/google-core-web-vitals\/\">Continue Reading &rarr;<\/a><\/div>\n","protected":false},"author":1,"featured_media":3310,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[187,188,189,190,191,192,193,194],"class_list":["post-3234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-core-web-vitals","tag-cumulative-layout-shift","tag-first-input-delay","tag-google-core-web-vitals","tag-google-search-console","tag-largest-contentful-paint","tag-page-speed-insights","tag-search-console"],"_links":{"self":[{"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/posts\/3234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/comments?post=3234"}],"version-history":[{"count":1,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/posts\/3234\/revisions"}],"predecessor-version":[{"id":5518,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/posts\/3234\/revisions\/5518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/media\/3310"}],"wp:attachment":[{"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/media?parent=3234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/categories?post=3234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lemosys.com\/blog\/wp-json\/wp\/v2\/tags?post=3234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}