{"id":10779,"date":"2021-10-08T14:16:51","date_gmt":"2021-10-08T11:16:51","guid":{"rendered":"\/\/?p=10779"},"modified":"2026-05-18T22:33:52","modified_gmt":"2026-05-18T22:33:52","slug":"why-core-web-vitals-matter","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/why-core-web-vitals-matter.html","title":{"rendered":"What Are Core Web Vitals and Why They Matter"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Core Web Vitals or CWVs is a buzz phrase these days. If you are the owner of a website or online store, you must have heard it several times in the past few months. People might have also said that CWVs were important for some reason, and you wondered what it was.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">So you started looking for answers and landed on this page. Right in the bull\u2019s eye! In this post, we will dot all the i\u2019s and cross all the t\u2019s as far as CWVs are concerned. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><a id=\"definition\"><\/a>Core Web Vitals: The Basics&nbsp;<\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">If you look up the word &#8220;core&#8221; in a dictionary, you will see that it means &#8220;the central part or the part inside an object that is nearest its center.&#8221; The word &#8220;vital,&#8221;&nbsp; in turn, means something, &#8220;important, necessary, or essential.&#8221;&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Now answer, what is a central, essential characteristic of any website? That\u2019s right. <\/span><b>User experience<\/b><span style=\"font-weight: 400;\">. The success of any website or online store largely hinges on how convenient it is for the people who visit it.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Elaborating further, we can say that a site is convenient, <\/span><i><span style=\"font-weight: 400;\">among the rest<\/span><\/i><span style=\"font-weight: 400;\">,&nbsp; when it <\/span><b>loads fast<\/b><span style=\"font-weight: 400;\">, allows users to <\/span><b>interact <\/b><span style=\"font-weight: 400;\">with it <\/span><b>immediately<\/b><span style=\"font-weight: 400;\">, and has its <\/span><b>content firmly in place<\/b><span style=\"font-weight: 400;\"> instead of jumping around all the time.<\/span><\/p>\n\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Fast-loading, stable websites that feel solid from the first click<\/h2>                                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/order-now\/website-development\" target=\"_blank\">Order from $499<\/a>\r\n                            <\/div>\r\n                    <\/section>    \r\n\r\n\n\n\n<p><span style=\"font-weight: 400;\">Surprise, surprise! Google knows this, too. That\u2019s why in May 2021, it announced that it would update its algorithm by introducing new <\/span><b>Core Web Vitals<\/b><span style=\"font-weight: 400;\">. These are a<\/span><b> set of three key measurements<\/b><span style=\"font-weight: 400;\"> designed to gauge user experience:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"><strong>LCP<\/strong> \u2014 <strong>Largest Contentful Paint&nbsp;<\/strong><\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>FID<\/strong> \u2014 <strong>First Input Delay&nbsp;<\/strong><\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>CLS<\/strong> \u2014 <strong>Cumulative Layout Shift<\/strong><\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">All three have the corresponding \u201c<strong>poor<\/strong>,\u201d \u201c<strong>needs improvement<\/strong>,\u201d and \u201c<strong>good<\/strong>\u201d thresholds.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Along with non-Core Web Vitals (safe browsing, mobile friendliness, intrusive interstitials, and HTTPS), these metrics constitute one single \u201c<strong>Page Experience Signal<\/strong>,\u201d as the tech giant dubbed it. Starting from June this year, Core Web Vitals are an<\/span><b> official page experience ranking factor<\/b><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s go over each of the Core Web Vitals now.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><a id=\"details\"><\/a>Core Web Vitals: The Three Metrics in Detail&nbsp;<\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details-1024x448.png\" alt=\"\" class=\"wp-image-10789\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details-1024x448.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details-300x131.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details-768x336.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details-1536x672.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132543\/core-web-vitals-details.png 1947w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<h3><span style=\"font-weight: 400;\">Largest Contentful Paint (LCP)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The present-day Internet is several light years faster than it used to be a couple of decades ago. Back then, when you opened a website with a high-resolution image, it often loaded in portions, painfully slowly.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s all different now. Thanks to powerful hardware and fast Internet, even visually heavy websites can load in split seconds. It\u2019s precisely these seconds that Google decided to focus on with the new Core Web Vitals metric \u2014 Largest Contentful Paint.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In essence, it\u2019s the time it takes a page to <\/span><b>load the largest visible piece of content<\/b><span style=\"font-weight: 400;\">. This can be a hero image, a video background, or a large chunk of text.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unlike some other page speed measurements, LCP is user-centered. It gauges how fast a visitor to your site can actually <\/span><b>see <\/b><span style=\"font-weight: 400;\">the majority of its content.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What if there are several big blocks of content that are equal in size? These are treated on the last-come-counts-higher basis. For example, if a large video background loads after a sizable chunk of text, Google considers the background as the LCP primary reference point.&nbsp;<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">LCP Thresholds&nbsp;<\/span><\/h4>\n<table style=\"height: 10px; width: 100%;\">\n<tbody>\n<tr style=\"height: 10px;\">\n<td style=\"background-color: #80e63c; height: 10px; text-align: center; width: 24.6429%;\">\n<p><b>Good ( &lt;= 2.5s)<\/b><\/p>\n<\/td>\n<td style=\"height: 10px; width: 47.9762%; background-color: #f0bb71; text-align: center;\">\n<p><b>Needs Improvement (<\/b> <b>&gt; 2.5s &lt;= 4s)<\/b><\/p>\n<\/td>\n<td style=\"height: 10px; width: 26.4286%; background-color: #e33939; text-align: center;\">\n<p><b>Poor (<\/b> <b>&gt; 4s)<\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><span style=\"font-weight: 400;\">First Input Delay (FID)&nbsp;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Most of us have been in this situation at least once when visiting one website or another. A registration page seems to have been loaded. You click inside a form field, expecting to start editing it straight away, but discover that the box is still disabled.&nbsp;&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s when the First Input Delay metric comes in. It measures the time it takes for a user to <\/span><b>perform an action<\/b><span style=\"font-weight: 400;\"> on a web page after opening it in the browser.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note that FID is not concerned with the time it takes to process the event. Nor does it care about the time it takes to re-render the interface after the event has been processed. No. It\u2019s only focused on <\/span><b>how fast the page responds to a user-initiated event<\/b><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apart from filling in text fields, possible events include choosing a dropdown option, clicking on a link, selecting a checkbox, and other interactions. Scrolling and pinching <\/span><b>are not counted<\/b><span style=\"font-weight: 400;\"> as interaction events owing to their specific nature.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For some sites, FID is not as critical as for others. For instance, if you own a blog without a sign-up\/sing-in form or user menus, you can safely ignore this metric. Otherwise, especially if you are an e-commerce website owner, FID is over-important. Leave it poor and risk losing customers.&nbsp;<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">FID Thresholds&nbsp;<\/span><\/h4>\n<table style=\"height: 10px; width: 100%;\">\n<tbody>\n<tr style=\"height: 10px;\">\n<td style=\"background-color: #80e63c; height: 26px; text-align: center; width: 24.2857%;\">\n<p><b>Good (&lt;= 100ms)<\/b><\/p>\n<\/td>\n<td style=\"height: 26px; width: 48.6905%; background-color: #f0bb71; text-align: center;\">\n<p><b>Needs Improvement (<\/b><b>&gt; 100ms &lt;= 300ms<\/b><b>)<\/b><\/p>\n<\/td>\n<td style=\"height: 26px; width: 26.0715%; background-color: #e33939; text-align: center;\">\n<p><b>Poor (&gt; 300ms<\/b><b>)<\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS)&nbsp;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The purpose of this metric is to measure <\/span><b>how stable the content on a web page is <\/b><span style=\"font-weight: 400;\">as it loads in the browser. That is, what total effect all page elements that \u201cshift\u201d during the loading process have on user experience.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider this example. You hit a &#8220;Request a Quote&#8221; button but see a page with a large photo of the latest model of a vacuum cleaner. Why is that? What happened?&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The truth is that you probably clicked on the banner ad right beneath the button. Why? Because the page content suddenly shifted a bit.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CLS is a score that represents the<\/span><b> sum of all unexpected layout shifts<\/b><span style=\"font-weight: 400;\"> (like the example above) within a page as it loads. The higher it is, the less stable the page is in Google\u2019s eyes.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Layout shifts occur when a piece of content is added after another without observing layout rules properly. For instance, a banner that loads after a link can push the latter to the right or left.&nbsp;<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">CLS Thresholds&nbsp;<\/span><\/h4>\n<table style=\"height: 10px; width: 100%;\">\n<tbody>\n<tr style=\"height: 10px;\">\n<td style=\"background-color: #80e63c; height: 64px; text-align: center; width: 24.1667%;\">\n<p><b>Good (&lt;= 0.1)<\/b><\/p>\n<\/td>\n<td style=\"height: 64px; width: 48.3333%; background-color: #f0bb71; text-align: center;\">\n<p><b>Needs Improvement (&gt; 0.1 &lt;= 0.25<\/b><b>)<\/b><\/p>\n<\/td>\n<td style=\"height: 64px; width: 26.5477%; background-color: #e33939; text-align: center;\">\n<p><b>Poor (&gt; 0.25<\/b><b>)<\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<p><span style=\"font-weight: 400;\"><strong>NOTE:<\/strong> To pass Google\u2019s CWV test, you need to have a \u201c<\/span><b>GOOD\u201d SCORE FOR EVERY METRIC&nbsp; \u2014 LCP, FID, and CLS.&nbsp;<\/b><\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132531\/cvw-test-amazon-1024x735.png\" alt=\"\" class=\"wp-image-10791\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132531\/cvw-test-amazon-1024x735.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132531\/cvw-test-amazon-300x215.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132531\/cvw-test-amazon-768x551.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/08132531\/cvw-test-amazon.png 1459w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<h2><span style=\"font-weight: 400;\"><a id=\"importance\"><\/a>How Much Can Core Web Vitals Scores Affect Your Page Rankings?\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Page experience is one of the most important factors that can have a profound effect on search engine visibility. Users hate slow-loading, unstable, and hard-to-interact-with sites. When they land on a site like that, they tend to hit the back button immediately. This may increase the bounce rate and push the website down in search results.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, the<\/span><b> page experience signal is only one of around two hundred other indicators <\/b><span style=\"font-weight: 400;\">that Google uses to rank sites. Still, the latest algorithm update implies that the tech giant is very serious about punishing sites with bad user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Good page experience is particularly crucial for the owners of online stores and sites used for lead generation. The bottom line: if you don\u2019t want to lose search engine visibility and keep your traffic flow stable, you need to improve your Web Core Vitals scores now. There is no time to wait any longer.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a id=\"measures\"><\/a>How Can You Improve Your Core Web Vitals Scores?\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are a number of ways in which you can bring your CWV scores to a level that Google considers acceptable. Here are some of these:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">LCP: minify CSS files, reduce image file sizes, get rid of web fonts.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">FID: revise your site\u2019s reliance on third-party code and minimize the number of server requests.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">CLS: avoid adding new content atop the content that\u2019s already on the page.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These measures are not something that an ordinary user without a web development background can easily implement. That\u2019s why the best solution as far as Core Web Vitals optimization goes is to seek professional assistance.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Core Web Vitals Optimization Service from GetDevDone\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To help businesses meet Google\u2019s tough CWV requirements, GetDevDone has launched a<\/span><b> Core Web Vitals optimization service<\/b><span style=\"font-weight: 400;\"> for <\/span><b>WordPress-base<\/b><span style=\"font-weight: 400;\">d sites.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will begin by checking your current CWV scores for free. If we discover that they are in the \u201cpoor\u201d or \u201cneeds improvement\u201d zone, we will take all the necessary steps to make Google paint them green.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Don\u2019t let your site\u2019s rankings drop. Order our Core Web Vitals optimization service today to keep your existing clients and generate leads!\u00a0<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Websites engineered for speed, stability, and smooth interaction<\/h2>                                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/order-now\/website-development\" target=\"_blank\">Order now<\/a>\r\n                            <\/div>\r\n                    <\/section>    \r\n\r\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><section id=\"faq-section-block_83b3fd0e2499fd4eeed24ad6d60f6fb7\" class=\"faq new-faq-design\" aria-labelledby=\"faq-title-271146167\">\n\t<h2 id=\"faq-title-271146167\">Core Web Vitals FAQs<\/h2>\n\t\t\t<div class=\"accordion-filter accordion-faq\">\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tAre Core Web Vitals still important for SEO in 2026?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Yes, Core Web Vitals are still relevant for SEO in 2026, but they should not be treated as a shortcut to rankings. Google still uses Core Web Vitals in its ranking systems, and the current set is LCP for loading, INP for interactivity, and CLS for visual stability.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The practical point is not to chase a perfect score for its own sake. Core Web Vitals matter most when several pages are otherwise similar in relevance and usefulness, or when poor performance creates obvious user friction. A slow page, unstable layout, or delayed interaction can increase bounce rate, reduce conversions, and make the page harder to trust. For business websites, ecommerce pages, and lead generation pages, that makes Core Web Vitals both an SEO issue and a revenue issue.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat changed when INP replaced FID in Core Web Vitals?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">INP replaced FID because it gives a broader view of how responsive a page feels to real users. FID measured only the delay before the first interaction could start being handled. INP looks at interactions across the page visit, including clicks, taps, and keyboard input, and reflects how long the user waits until the page responds visually.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This matters because many modern sites do not fail on the first click. They fail later, when a visitor opens a menu, uses a filter, submits a form, interacts with a checkout step, or clicks a CTA after several scripts have loaded. The old article section about FID should now be read as historical context. For current Core Web Vitals work, interactivity should be assessed through INP.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhich Core Web Vital should be fixed first if a site fails more than one metric?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The first metric to fix should be the one that creates the biggest user and business problem, not automatically the one with the worst color in a report. If a landing page looks blank or slow, start with LCP. If forms, menus, filters, checkout steps, or CTAs feel delayed, start with INP. If users may click the wrong element because content shifts, start with CLS.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agencies, the safest workflow is to group pages by template and intent before promising fixes. A homepage, product page, blog post, and lead form can fail for different reasons. In GetDevDone-style delivery work, the useful first step is usually diagnosis by page type: which templates fail, which metric blocks the user journey, and which fixes can be applied without damaging layout, tracking, CMS editing, or client-side scripts. For broader technical examples, see these<\/span><a href=\"https:\/\/getdevdone.com\/blog\/optimize-website-performance-real-world-fixes.html\"> <span style=\"font-weight: 400\">website performance fixes that work<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tCan a site have good PageSpeed scores but still fail Core Web Vitals?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Yes, a site can have a good PageSpeed or Lighthouse score and still fail Core Web Vitals in field data. Lab tests are run in controlled conditions, while Core Web Vitals are based on real user experience where devices, networks, browser state, location, and user behavior vary.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This gap is especially common with INP and post-load CLS. A lab test may not reproduce the exact interaction that feels slow to users, such as opening a mobile menu, using filters, typing into a form, or interacting with a third-party widget. It may also miss layout shifts that happen after consent banners, ads, embeds, or personalization scripts appear. Lab scores are useful for debugging, but field data should carry more weight when deciding whether users are actually getting a good experience.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow do Core Web Vitals affect ecommerce and lead generation websites differently from simple blogs?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Core Web Vitals usually matter more commercially for ecommerce and lead generation websites because those pages depend on interaction, trust, and conversion flow. A simple blog post may mainly need fast loading and stable reading. An ecommerce or lead generation site needs visitors to browse, filter, open menus, complete forms, move through checkout, and trust that the page is working correctly.<\/span><\/p>\n<p><span style=\"font-weight: 400\">That makes INP and CLS more sensitive for revenue-focused pages. A slow product filter, delayed add-to-cart button, shifting form field, unstable pricing block, or late-loading chat widget can damage the conversion path even if the page eventually loads. For agencies delivering client sites, this means Core Web Vitals should be checked on the templates that make money, not only on the homepage or a sample blog post.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat usually causes poor LCP on business websites?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Poor LCP on business websites is usually caused by a slow or heavy main content element near the top of the page. In many cases, that element is a hero image, video background, large heading block, slider, or above-the-fold banner.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The common causes are oversized images, unoptimized image formats, slow server response, render-blocking CSS or JavaScript, delayed font loading, heavy themes, and third-party scripts that compete for early loading time. Sometimes the problem is also a well-intended optimization mistake, such as lazy-loading the actual LCP image or relying on a large background image that is hard to prioritize correctly.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The fix is not always just image compression. A proper LCP cleanup may involve template changes, critical CSS, font handling, CDN settings, server response time, and removing unnecessary code from the initial render path.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat usually causes poor INP on modern websites?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Poor INP is usually caused by JavaScript that keeps the browser too busy to respond quickly to user interactions. The page may look loaded, but clicks, taps, menu actions, filters, or form inputs feel delayed because the main thread is occupied.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Typical causes include heavy third-party scripts, analytics and tracking stacks, chat widgets, personalization tools, complex event handlers, large DOM structures, expensive front-end frameworks, and poorly optimized custom code. On ecommerce and lead generation pages, INP problems often appear around product filters, checkout steps, forms, calculators, popups, and mobile navigation.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is why INP is more demanding than the old FID metric. FID could miss problems that happen after the first interaction. INP is better at exposing real interaction friction across the full visit.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat usually causes CLS problems after a website redesign or page update?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">CLS problems after a redesign or page update usually come from new elements loading without reserved space. The page may look correct in a static design file, but shift in the browser when images, fonts, banners, embeds, forms, ads, cookie notices, or third-party widgets load later than the surrounding content.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This often happens after marketing changes rather than during the original build. A new promo banner is inserted above existing content. A tracking or A\/B testing script changes the layout after load. A web font swaps late and moves text. An embedded video or form loads without fixed dimensions. The result can be accidental clicks, unstable CTAs, and a page that feels less trustworthy.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agency delivery, CLS should be checked on staging and again after post-launch marketing scripts are added. Otherwise, a page can pass QA at launch and fail after the first real campaign update.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow long does Core Web Vitals optimization usually take?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Core Web Vitals optimization can take from a small cleanup cycle to several development sprints, depending on the cause. A few template-level issues, such as oversized images, missing dimensions, or unnecessary scripts, may be fixed relatively quickly. Deeper issues involving front-end architecture, third-party code, CMS templates, hosting, checkout flows, or legacy themes need more careful planning and QA.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The visible report update can also lag behind the development work. Lab tools can show improvements immediately, but field-based Core Web Vitals data depends on real user visits over time. That means a fix can be technically deployed before Search Console or PageSpeed field data fully reflects the improvement.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agencies, the safer promise is not &#8220;we will make everything green this week.&#8221; A better promise is: audit the failing templates, identify controllable causes, fix the highest-impact issues, and validate the result through lab checks, staging QA, and field data.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat should agencies check before promising Core Web Vitals improvements to clients?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Agencies should check the real source of the failing metrics before promising Core Web Vitals improvements. The basic checklist is: which metric fails, which templates are affected, whether the problem appears in field data or only lab data, and whether the agency has control over the code, hosting, CMS, scripts, and third-party tools involved.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The risk is overpromising. Some issues are inside the website code and can be fixed through normal<\/span><a href=\"https:\/\/getdevdone.com\/front-end-development-services.html\"> <span style=\"font-weight: 400\">front-end development work<\/span><\/a><span style=\"font-weight: 400\">. Others depend on ad networks, tracking tags, CRM embeds, booking tools, ecommerce apps, hosting limits, or client-managed scripts added after launch. Those need either client approval, third-party replacement, or a more limited promise.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Before committing to results, agencies should define the baseline, target pages, accepted tools, staging process, rollback plan, and reporting window. That makes the promise more realistic and protects both the client relationship and the delivery team.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn why Core Web Vitals matter for SEO, user experience, and conversions. Discover how to improve website speed, stability, and performance.<\/p>\n","protected":false},"author":4,"featured_media":11166,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[739,748],"tags":[858,764,765],"class_list":["post-10779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-website-development-services","tag-core-web-vitals","tag-performance-optimization","tag-technical-seo"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">Guide<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Website development services<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Guide<\/span>","<span class=\"advgb-post-tax-term\">Website development services<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Core Web Vitals<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Performance optimization<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Technical SEO<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Core Web Vitals<\/span>","<span class=\"advgb-post-tax-term\">Performance optimization<\/span>","<span class=\"advgb-post-tax-term\">Technical SEO<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5 years ago","modified":"Updated 2 weeks ago"},"absolute_dates":{"created":"Posted on October 8, 2021","modified":"Updated on May 18, 2026"},"absolute_dates_time":{"created":"Posted on October 8, 2021 2:16 pm","modified":"Updated on May 18, 2026 10:33 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2021\/10\/29113139\/illustration.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"COO of GetDevDone","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"how-to-choose-best-magento-development-company-important-things-to-consider","name":"How to Choose the Best Magento Development Company: 5 Important Things to Consider"},"next_post":{"slug":"customize-wordpress-dashboard-without-plugins","name":"Customize a WordPress Dashboard Without Plugins"},"related_posts":["guide-to-wordpress-api","consent-management-platforms","best-headless-cms-for-agencies-guide-html"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/10779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=10779"}],"version-history":[{"count":42,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/10779\/revisions"}],"predecessor-version":[{"id":25870,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/10779\/revisions\/25870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/11166"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=10779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=10779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=10779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}