{"id":3217,"date":"2023-08-02T12:40:48","date_gmt":"2023-08-02T10:40:48","guid":{"rendered":"https:\/\/www.seobility.net\/?p=3217"},"modified":"2025-07-25T13:48:48","modified_gmt":"2025-07-25T13:48:48","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/","title":{"rendered":"Core Web Vitals: Everything You Need To Know"},"content":{"rendered":"<p><em>Last updated on February 1, 2024.<\/em><\/p>\n<p>Core Web Vitals are a set of real-world website performance metrics that Google considers critical to user experience.<\/p>\n<p>And Google has repeatedly stated that they have a direct influence on search rankings.<\/p>\n<p>Whether this holds true is a hotly debated topic, with many (read most) SEOs seeing very little, if any direct ranking impact when improving Core Web Vitals.<\/p>\n<p>So, does this mean that you can simply ignore these metrics?<\/p>\n<p>Definitely not! Because as we\u2019ll explain later, optimizing your Core Web Vitals, and your website\u2019s user experience in general, is something you don\u2019t want to neglect.<\/p>\n<p>In this guide, we\u2019re going to cover EVERYTHING you need to know about Core Web Vitals, including:<\/p>\n<ul>\n<li>EXACTLY what they are<\/li>\n<li>How they influence your Google rankings<\/li>\n<li>How Google measures them<\/li>\n<li>Where you can see your site\u2019s Core Web Vitals<\/li>\n<li>How to find and fix common issues with each of the three Core Web Vitals<\/li>\n<\/ul>\n<p>You can skip to a section using the menu below.<br \/>\n<div class=\"toc-container\"><div class=\"toc-h3\">Content<\/div><ul class=\"toc-list\"><li><a href='#content-what-are-core-web-vitals' class='toc-link toc-link-level-2'>What are Core Web Vitals?<\/a><\/li><li><a href='#content-why-optimizing-your-website-s-page-experience-is-essential-for-seo' class='toc-link toc-link-level-2'>Why optimizing your website\u2019s page experience is essential for SEO<\/a><\/li><li><a href='#content-how-does-google-measure-core-web-vitals' class='toc-link toc-link-level-2'>How does Google measure Core Web Vitals?<\/a><\/li><li><a href='#content-why-you-need-to-optimize-all-three-core-web-vitals' class='toc-link toc-link-level-2'>Why you need to optimize all three Core Web Vitals<\/a><\/li><li><a href='#content-first-input-delay-fid' class='toc-link toc-link-level-2'>First Input Delay (FID)<\/a><\/li><li><a href='#content-interaction-to-next-paint-inp' class='toc-link toc-link-level-2'>Interaction to Next Paint (INP)<\/a><\/li><li><a href='#content-largest-contentful-paint-lcp' class='toc-link toc-link-level-2'>Largest Contentful Paint (LCP)<\/a><\/li><li><a href='#content-cumulative-layout-shift-cls' class='toc-link toc-link-level-2'>Cumulative Layout Shift (CLS)<\/a><\/li><li><a href='#content-how-and-where-to-check-your-site-s-core-web-vitals' class='toc-link toc-link-level-2'>How (and where) to check your site\u2019s Core Web Vitals<\/a><\/li><li><a href='#content-you-re-all-set-to-improve-your-core-web-vitals' class='toc-link toc-link-level-2'>You\u2019re all set to improve your Core Web Vitals<\/a><\/li><\/ul><\/div><br \/>\nLet\u2019s get started by looking at what Core Web Vitals are, and how they impact your search traffic.<\/p>\n<h2 id='content-what-are-core-web-vitals'>What are Core Web Vitals?<\/h2>\n<p>Google wants to reward sites that provide a good experience for their users (UX).<\/p>\n<p>But there\u2019s a problem:<\/p>\n<p>For a search engine like Google, <a href=\"https:\/\/www.seobility.net\/en\/wiki\/User_Experience\" target=\"_blank\" rel=\"noopener\">user experience<\/a> can be tough to measure.<\/p>\n<p>Sure, metrics such as <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Bounce_Rate\" target=\"_blank\" rel=\"noopener\">bounce rate<\/a> and <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Dwell_Time\" target=\"_blank\" rel=\"noopener\">dwell time<\/a> may give Google hints. But they can also be gamed. And there can be big variations depending on the purpose of an individual page or site.<\/p>\n<p>Enter \u201cWeb Vitals\u201d.<\/p>\n<p>A set of metrics and signals that Google can definitively say have a positive (or negative) impact on user experience. And all of which can be detected (or considered) by an algorithm.<\/p>\n<p>Google\u2019s Web Vitals focus on speed, responsiveness (in terms of user interaction), and layout stability.<\/p>\n<p>Why? Because they\u2019re objective:<\/p>\n<ul>\n<li>A fast website is always going to be better for a user than a slow one.<\/li>\n<li>A website that responds quickly to user interactions is going to reduce frustration.<\/li>\n<li>A stable layout will help prevent unintended clicks.<\/li>\n<\/ul>\n<p>Makes sense right?<\/p>\n<p>Bottom line:<\/p>\n<p>Improving your site\u2019s user experience will bring you more search traffic.<\/p>\n<p>But\u2026<\/p>\n<p>\u2026.not every \u201cWeb Vital\u201d is a \u201cCore Web Vital\u201d.<\/p>\n<p>Let me explain.<\/p>\n<h3>How Core Web Vitals combine with other speed and UX factors to influence your Google rankings<\/h3>\n<p>This is partly semantics.<\/p>\n<p>But it gets a little confusing. So we\u2019ll keep this as simple as possible.<\/p>\n<p><a href=\"https:\/\/www.seobility.net\/en\/wiki\/Core_Web_Vitals\" target=\"_blank\" rel=\"noopener\">Core Web Vitals (CWV)<\/a> are a subset of Web Vitals. Over time Google might add more metrics to CWV. But for now, there are three.<\/p>\n<p><strong>Note<\/strong>: These metrics are a little complex to explain in one paragraph. So don\u2019t worry if you\u2019re unfamiliar with the terms \u2014 we\u2019ll go into full detail on all three of them shortly.<\/p>\n<h4>1. Largest Contentful Paint (LCP)<\/h4>\n<p>The time for the largest visible element (i.e. \u201cabove the fold\u201d) on a page to fully load. To pass Google\u2019s Core Web Vitals assessment, the Largest Contentful Paint element on a page must be fully loaded within 2.5 seconds.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3349\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility.png\" alt=\"largest contentful paint\" width=\"640\" height=\"429\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility-768x515.png 768w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<h4>2. First Input Delay (FID)<\/h4>\n<p>The delay between a user taking their first action on a page (i.e. clicking a button, clicking on a search box, opening a menu) and the website responding. To pass Google\u2019s Core Web Vitals assessment, a page must have a First Input Delay under 100 milliseconds.<\/p>\n<p><img decoding=\"async\" style=\"float:none;\" class=\"contentimage alignleft wp-image-3350\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility.png\" alt=\"first input delay\" width=\"640\" height=\"430\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility-768x516.png 768w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>FID has been part of CWV since they were first introduced, but on March 12, 2024 FID will be replaced by another metric called \u201cInteraction to Next Paint\u201d (INP).<\/p>\n<h5>New: Interaction to Next Paint (INP)<\/h5>\n<p>Measures the latency of all of a user\u2019s interactions on a page, so how quickly and consistently a page is able to respond to user interactions like clicks and key presses. The value it reports is the amount of time that (nearly) all interactions were below (meaning, the highest total interaction time, excluding outliers). A good INP is considered to be 200ms or less according to Google and anything over 500ms is considered poor.<\/p>\n<p>INP is set to replace FID to address some of the limitations of FID, as it provides a more complete overview of all interactions on a page, instead of just the first interaction.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6813\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint.png\" alt=\"interaction to next paint\" width=\"1200\" height=\"805\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint.png 1950w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-768x515.png 768w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-1536x1030.png 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h4>3. Cumulative Layout Shift (CLS)<\/h4>\n<p>A measurement of visual stability. Any elements which shift (move) during load will add to the page\u2019s CLS score. To pass Google\u2019s Core Web Vitals assessment, a page must have a Cumulative Layout Shift score under 0.1.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3351 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility.png\" alt=\"cumulative layout shift\" width=\"1000\" height=\"681\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility-768x523.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Other Web Vitals (not classed as &#8220;Core&#8221;) include:<\/p>\n<ul>\n<li>Time to First Byte (<a href=\"https:\/\/web.dev\/time-to-first-byte\/\" target=\"_blank\" rel=\"noopener\">TTFB<\/a>)<\/li>\n<li>First Contentful Paint (<a href=\"https:\/\/web.dev\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">FCP<\/a>)<\/li>\n<li>Total Blocking Time (<a href=\"https:\/\/web.dev\/lighthouse-total-blocking-time\/\" target=\"_blank\" rel=\"noopener\">TBT<\/a>)<\/li>\n<li>Time to Interactive (<a href=\"https:\/\/web.dev\/interactive\/\" target=\"_blank\" rel=\"noopener\">TTI<\/a>)<\/li>\n<\/ul>\n<p>And finally, we have four traditional UX factors:<\/p>\n<ul>\n<li>Whether a site is mobile friendly<\/li>\n<li>Whether it runs on <a href=\"https:\/\/www.seobility.net\/en\/wiki\/HTTPS\" target=\"_blank\" rel=\"noopener\">HTTPS<\/a><\/li>\n<li>Absence of intrusive <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Interstitial_Ads\" target=\"_blank\" rel=\"noopener\">interstitials<\/a> (annoying popup ads)<\/li>\n<\/ul>\n<p>Which, while Google doesn\u2019t label them as such, we believe should also be considered as Core Web Vitals.<\/p>\n<p>Because they combine with the three Core Web Vitals and a few other factors to form what Google calls its <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/page-experience\" target=\"_blank\" rel=\"noopener\">\u201cPage Experience\u201d signal<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6856 contentimage\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-seobility-v2.png\" alt=\"page experience ranking signal\" width=\"1000\" height=\"1028\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-seobility-v2.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-seobility-v2-768x790.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>And since June 2021, <a href=\"https:\/\/webmasters.googleblog.com\/2020\/11\/timing-for-page-experience.html\" target=\"_blank\" rel=\"noopener\">this Page Experience signal influences Google rankings<\/a>.<\/p>\n<p>This means that if you want to rank high in search, you have to provide a good page experience<\/p>\n<p><strong>Page Experience and (Core) Web Vitals \u2013 Full Infographic<\/strong><\/p>\n<p><a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-infographic-v2023.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"contentimage wp-image-3347 size-full alignnone\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/core-web-vitals-infographic-thumb-3-1.png\" alt=\"core web vitals infographic\" width=\"200\" height=\"348\" \/><\/a><\/p>\n<h2 id='content-why-optimizing-your-website-s-page-experience-is-essential-for-seo'>Why optimizing your website\u2019s page experience is essential for SEO<\/h2>\n<p>Google <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">has stated<\/a> that Core Web Vitals directly influence rankings.<\/p>\n<p>However, their impact on rankings doesn\u2019t seem to be as meaningful as initially signaled and even official Google representatives admitted that <a href=\"https:\/\/www.seroundtable.com\/google-core-web-vitals-priority-34937.html\" target=\"_blank\" rel=\"noopener\">they don\u2019t have a huge impact<\/a>.<\/p>\n<p>But as we\u2019ve already mentioned in the beginning, this definitely doesn\u2019t mean that you can simply ignore these metrics. If you need some convincing, consider the following:<\/p>\n<h3>1. Core Web Vitals impact a vast range of SEO factors indirectly, as well as other aspects of website performance<\/h3>\n<p>Although Google has stated that Core Web Vitals impact rankings directly, many SEOs see mixed results when it comes to their impact on rankings and some <a href=\"https:\/\/www.advancedwebranking.com\/blog\/core-web-vitals-study\/\" target=\"_blank\" rel=\"noopener\">correlation studies<\/a> also seem to indicate it\u2019s not as important as once thought.<\/p>\n<p>However, the indirect effect of these metrics might be more profound than their direct impact on rankings when it comes to both SEO as well as general website performance.<\/p>\n<p>For example, the <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Bounce_Rate\" target=\"_blank\" rel=\"noopener\">chance of bounce<\/a> increases by 32% as page load times increase from 1 second to 3 seconds according to <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/page-load-time-statistics\/\" target=\"_blank\" rel=\"noopener\">Google research<\/a>.<\/p>\n<p>It also seems to have a huge impact on conversion rates according to a <a href=\"https:\/\/www.portent.com\/blog\/analytics\/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5)\" target=\"_blank\" rel=\"noopener\">2019 study by Portent<\/a>, which showed that sites with load speeds of 1 second had a 3x higher conversion rate than sites that load in 5 seconds. For e-commerce, the difference was 2.5x.<\/p>\n<p>Since an SEO\u2019s job is ultimately to increase leads, sales, sign-ups, or other metrics important to the business, it\u2019s certainly not something to overlook.<\/p>\n<h3>2. It\u2019s part of creating helpful content<\/h3>\n<p>In April of 2023, Google added a section about page experience, which Core Web Vitals plays a big part in, to their <a href=\"https:\/\/developers.google.com\/search\/docs\/fundamentals\/creating-helpful-content\" target=\"_blank\" rel=\"noopener\">guide on creating helpful content<\/a>.<\/p>\n<p>It states the following:<\/p>\n<blockquote><p>&#8220;Google&#8217;s core ranking systems look to reward content that provides a good page experience. Site owners seeking to be successful with our systems should not focus on only one or two aspects of page experience. Instead, check if you&#8217;re providing an overall great page experience across many aspects.&#8221;<\/p><\/blockquote>\n<p>Since we\u2019ve seen an array of <a href=\"https:\/\/www.seobility.net\/en\/blog\/googles-helpful-content-update\/\" target=\"_blank\" rel=\"noopener\">updates related to helpful content<\/a> over the past few years, it\u2019s clear this is an important focus for Google, making it important to keep an eye on.<\/p>\n<p>And who doesn\u2019t want to ensure their website delivers helpful content to users?<\/p>\n<h3>3. Page experience is a ranking signal for Google Top Stories on Mobile<\/h3>\n<p>For many newsworthy searches, Google shows a \u201cTop Stories\u201d section right at the top of the search results.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3220 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/google-top-stories.png\" alt=\"google top stories\" width=\"300\" height=\"649\" \/><\/p>\n<p>That\u2019s prime SERP real estate.<\/p>\n<p>In the past, to be eligible for Google\u2019s \u201cTop Stories\u201d on mobile your site had to use <a href=\"https:\/\/www.seobility.net\/en\/wiki\/amp-accelerated-mobile-pages\" target=\"_blank\" rel=\"noopener\">AMP<\/a>.<\/p>\n<p>But since June 2021, this is no longer the case and page experience became one of the ranking factors for this feature.<\/p>\n<blockquote><p>\u201cWhen we roll out the page experience ranking update, we will also update the eligibility criteria for the Top Stories experience. AMP will no longer be necessary for stories to be featured in Top Stories on mobile; it will be open to any page. Alongside this change, page experience will become a ranking factor in Top Stories, in addition to the many factors assessed. As before, pages must meet the <a href=\"https:\/\/support.google.com\/news\/publisher-center\/answer\/6204050\" target=\"_blank\" rel=\"noopener\">Google News content policies<\/a> to be eligible.\u201d<\/p><\/blockquote>\n<p>This means that if your website fails core web vitals, you may miss out on a HUGE traffic opportunity &#8211; especially in a competitive industry.<\/p>\n<p>Now you know just how important it is to get your Core Web Vitals in shape e, let\u2019s look at how Google measures them.<\/p>\n<h2 id='content-how-does-google-measure-core-web-vitals'>How does Google measure Core Web Vitals?<\/h2>\n<p>If you run your site through <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Google\u2019s PageSpeed Insights tool<\/a>, you\u2019ll notice that the report is split into two sections:<\/p>\n<p>You\u2019ll get lab data and field data.<\/p>\n<p>If you get enough website visitors, you\u2019ll find field data in the first section labelled \u201cDiscover what your real users are experiencing\u201d. The lab data can be found under \u201cDiagnose performance issues\u201d and is available for all websites.<\/p>\n<p>So what\u2019s the difference?<\/p>\n<p>Well, to quote Google, \u201cLab data\u201d is\u2026<\/p>\n<blockquote><p>based on a simulated load of a page on a single device and a fixed set of network conditions.<\/p><\/blockquote>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6814 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Chrome-User-Experience-Report.png\" alt=\"Chrome User Experience Report\" width=\"991\" height=\"905\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Chrome-User-Experience-Report.png 991w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Chrome-User-Experience-Report-768x701.png 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/p>\n<p>In other words, it\u2019s not based on actual user interaction with your website.<\/p>\n<p>Field data on the other hand is provided by Google\u2019s <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noopener\">Chrome User Experience Report<\/a>. Which is\u2026<\/p>\n<blockquote><p>\u201cpowered by real user measurement of key user experience metrics across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled.\u201d<\/p><\/blockquote>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6815 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Core-Web-Vitals.png\" alt=\"Core Web Vitals\" width=\"985\" height=\"527\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Core-Web-Vitals.png 985w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Core-Web-Vitals-768x411.png 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p>In a nutshell:<\/p>\n<p>Google collects data from millions of Chrome users all over the world. The data they collect includes the three Core Web Vitals.<\/p>\n<p>So the \u201cfield\u201d metrics you see for them are based on actual visits to your site.<\/p>\n<p><strong>Note<\/strong>: we\u2019ll cover more ways to check your website\u2019s Core Web Vitals later in this guide. But first, let\u2019s take an in-depth look at the three Core Web Vitals.<\/p>\n<h2 id='content-why-you-need-to-optimize-all-three-core-web-vitals'>Why you need to optimize all three Core Web Vitals<\/h2>\n<p>So now we know where the data comes from, let\u2019s take a closer look at the three Core Web Vitals.<\/p>\n<p>Which to recap, are:<\/p>\n<ul>\n<li>First Input Delay (FID) &#8211; Soon to be replaced by Interaction to Next Paint (INP)<\/li>\n<li>Largest Contentful Paint (LCP)<\/li>\n<li>Cumulative Layout Shift (CLS)<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3218 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv.png\" alt=\"core web vitals\" width=\"854\" height=\"251\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv.png 854w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv-768x226.png 768w\" sizes=\"(max-width: 854px) 100vw, 854px\" \/><\/p>\n<p>Many of the factors that affect Largest Contentful Paint also impact First Input Delay. Indeed there is also a cross-over with Cumulative Shift.<\/p>\n<p>So while LCP would generally come first in the chain (loading &gt; interactivity &gt; visual stability), we\u2019re going to start by covering First Input Delay and Interaction to Next Paint. As there\u2019s one major loading issue that will tend to have the most significant impact on these metrics.<\/p>\n<p>But the key is, all three Core Web Vitals metrics are connected. For example, improving LCP will normally help FID and CLS.<\/p>\n<p><strong>And to pass Google\u2019s overall Core Web Vitals assessment, you\u2019ll need to pass all three individual metrics.<\/strong><\/p>\n<p>Let\u2019s take a look at the first Core Web Vital.<\/p>\n<h2 id='content-first-input-delay-fid'>First Input Delay (FID)<\/h2>\n<p>First input delay is a measure of a web page\u2019s responsiveness.<\/p>\n<p>Specifically, it\u2019s a measurement of how long a web page takes to respond to a first \u201caction\u201d from a user.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3350 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility.png\" alt=\"first input delay\" width=\"1000\" height=\"672\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/first-input-delay-seobility-768x516.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>What counts as an action for FID purposes?<\/strong><\/p>\n<ul>\n<li>Clicking (or tapping) a button<\/li>\n<li>Clicking a link<\/li>\n<li>Opening a menu<\/li>\n<li>Clicking on a form field<\/li>\n<\/ul>\n<p><strong>What doesn\u2019t?<\/strong><\/p>\n<p>Continuous actions such as scrolling and zooming.<\/p>\n<p>At the top of Seobility\u2019s homepage (on mobile) there are two elements that a user would be likely to click first:<\/p>\n<ol>\n<li>A hamburger (mobile) menu<\/li>\n<li>A \u201cTry For Free\u201d button<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6818 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Seobilitys-homepage.jpg\" alt=\"Seobility\u2019s homepage \" width=\"720\" height=\"1277\" \/><\/p>\n<p>They\u2019re both prominent above the fold. And if we\u2019re doing our CRO right, the \u201cTry For Free\u201d button should be one of the first elements a user clicks.<\/p>\n<p>So let\u2019s see how our homepage is performing.<\/p>\n<p>There are several places we can see FID (and other Core Web Vitals data). But for now, let\u2019s use <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Google\u2019s PageSpeed Insights<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6819 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Googles-PageSpeed-Insights.png\" alt=\"Google\u2019s PageSpeed Insights\" width=\"985\" height=\"527\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Googles-PageSpeed-Insights.png 985w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Googles-PageSpeed-Insights-768x411.png 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p>We can see that during the past 28 days, our homepage had an average First Input Delay of 15ms.<\/p>\n<p>Is that good or bad?<\/p>\n<p>Well, Google <a href=\"https:\/\/web.dev\/vitals\/\" target=\"_blank\" rel=\"noopener\">wants to see<\/a> a FID of less than 100 milliseconds.<\/p>\n<blockquote><p>\u201cTo provide a good user experience, pages should have a FID of less than 100 milliseconds.\u201d<\/p><\/blockquote>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3225 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/fid-google1.png\" alt=\"first input delay - core web vitals\" width=\"841\" height=\"244\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/fid-google1.png 841w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/fid-google1-768x223.png 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/p>\n<p>So we\u2019re doing pretty well here.<\/p>\n<p>It\u2019s taking less than one 50th of a second for our website to respond to the user\u2019s first input. Which let\u2019s be honest, for a human, is instant.<\/p>\n<p><strong>Sidenote<\/strong>: if you\u2019re wondering why Google picked 100ms, that\u2019s <a href=\"https:\/\/www.nngroup.com\/articles\/response-times-3-important-limits\/\" target=\"_blank\" rel=\"noopener\">long been the accepted limit<\/a> for a user \u201cfeeling\u201d a system is reacting instantaneously. Response times below that we just can\u2019t perceive.<\/p>\n<h3>What can cause a website to have First Input Delay issues?<\/h3>\n<p>A browser reads a web page\u2019s code from top to bottom.<\/p>\n<p>And when it gets to an external script (most notably <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Javascript\" target=\"_blank\" rel=\"noopener\">Javascript<\/a>) it has to:<\/p>\n<ol>\n<li>pause loading other elements<\/li>\n<li>disable user interaction until it has downloaded and processed that file<\/li>\n<\/ol>\n<p>Why?<\/p>\n<p>Because that external script could modify the behavior of individual elements on the main page.<\/p>\n<p>Confused? Here\u2019s an example that you\u2019ll recognize.<\/p>\n<p>Many image galleries use Javascript to open a popup lightbox when a user clicks on an individual image.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3217-1\" width=\"640\" height=\"604\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm?_=1\" \/><a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm\">https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm<\/a><\/video><\/div>\n<p>But that lightbox functionality only works once the Javascript file that powers it has been downloaded and processed by the browser.<\/p>\n<p>Before that, when a user clicks they\u2019ll simply be taken to the image URL. The Javascript modifies the behavior of the link element \u2014 preventing a click from taking the user to a new page and opening a lightbox instead.<\/p>\n<p>So by default, when a browser comes across an external JS file, it thinks:<\/p>\n<p><em>\u201cI\u2019d better check this Javascript doesn\u2019t change the functionality of the page before I proceed. Let\u2019s put everything else on hold!\u201d<\/em><\/p>\n<p>This behavior is known as \u201c<a href=\"https:\/\/web.dev\/render-blocking-resources\/\" target=\"_blank\" rel=\"noopener\">render-blocking<\/a>\u201d.<\/p>\n<p>And if you have issues with your site\u2019s FID, it\u2019s likely to be the cause.<\/p>\n<h3 id=\"js-render-blocking-fix\">How to prevent Javascript from blocking your page<\/h3>\n<p>The good news? Preventing Javascript files from blocking your main page is relatively painless.<\/p>\n<p>All you need to do is add one of the following two attributes to your script tags:<\/p>\n<ol>\n<li>\u201cDefer\u201d<\/li>\n<li>\u201casync\u201d<\/li>\n<\/ol>\n<p>Which one you add will depend on the type of script you\u2019re calling.<\/p>\n<h4>Option 1: Defer loading of a Javascript file<\/h4>\n<p><strong>Best for<\/strong>: scripts that alter the functionality of your page, or that need to be loaded in a specific order.<\/p>\n<pre>&lt;script src=\"yourscript.js\" defer&gt;&lt;\/script&gt;<\/pre>\n<p>The defer attribute tells the browser not to wait for the script (which would \u201cblock\u201d the page), but simply to load it in the background while the rest of the page renders.<\/p>\n<p>Why is the order important?<\/p>\n<p>Scripts with the \u201cdefer\u201d attribute execute in the order they appear within a page\u2019s HTML.<\/p>\n<p>Example:<\/p>\n<p>If you have a custom jQuery function you would want to ensure that the main jQuery library is loaded before your custom script:<\/p>\n<pre>&lt;script src=\"jquery.js\" defer&gt;&lt;\/script&gt;&lt;script src=\"customquery.js\" defer&gt;&lt;\/script&gt;<\/pre>\n<p>Otherwise\u2026 it won\u2019t work!<\/p>\n<h4>Option 2: Load a Javascript asynchronously<\/h4>\n<p><strong>Best for<\/strong>: external scripts that don\u2019t affect the functionality of your page, and don\u2019t require to be loaded in a specific order.<\/p>\n<pre>&lt;script src=\"externalscript.js\" async&gt;&lt;\/script&gt;<\/pre>\n<p>Similar to defer, the scripts will be loaded in the background, allowing the rest of the page to render.<\/p>\n<p>However in this case the scripts will not be executed in a specific order. As soon as a script with the async attribute is loaded, it will run.<\/p>\n<p>Generally, it\u2019s safe to load analytics scripts, tracking pixels, and ads asynchronously as they are not dependent on other libraries, nor do they affect the overall functionality of your page.<\/p>\n<p>For more details on async and defer, <a href=\"https:\/\/codedamn.com\/news\/javascript\/async-and-defer-in-script-tag\" target=\"_blank\" rel=\"noopener\">see this guide<\/a>.<\/p>\n<h3>How to find (and fix) render blocking scripts<\/h3>\n<p>Google\u2019s PageSpeed insights will give you a heads up on which scripts are currently blocking your page.<\/p>\n<p>To demonstrate, we created <a href=\"https:\/\/phpstack-180999-1583396.cloudwaysapps.com\/default.php\" target=\"_blank\" rel=\"noopener\">a simple test page<\/a> which calls three render-blocking scripts (one local and two third party).<\/p>\n<p><img decoding=\"async\" class=\"alignnone contentimage size-full wp-image-3226\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot.png\" alt=\"test page\" width=\"831\" height=\"162\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot.png 831w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot-768x150.png 768w\" sizes=\"(max-width: 831px) 100vw, 831px\" \/><\/p>\n<p>If we run the page through PageSpeed Insights we can see that the scripts are blocking the main page for 1.1 seconds.<\/p>\n<p><em>PageSpeed Insights &gt; Opportunities &gt; Eliminate render-blocking resources<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3227 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/opportunities.png\" alt=\"render-blocking\" width=\"941\" height=\"610\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/opportunities.png 941w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/opportunities-768x498.png 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/p>\n<p>So let\u2019s add the \u201cdefer\u201d attribute to the local script, and \u201casync\u201d to the third-party scripts.<\/p>\n<p><a href=\"https:\/\/phpstack-180999-1583396.cloudwaysapps.com\/optimized.php\" target=\"_blank\" rel=\"noopener\">Here is the new page<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone contentimage size-full wp-image-3229\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot1.png\" alt=\"test page\" width=\"859\" height=\"157\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot1.png 859w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/test-page-screenshot1-768x140.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/p>\n<p>We\u2019ve now eliminated all render-blocking resources\u2026<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6821 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/render-blocking-resources.png\" alt=\"render-blocking resources\" width=\"955\" height=\"119\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/render-blocking-resources.png 955w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/render-blocking-resources-768x96.png 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/p>\n<p>Pretty easy right?<\/p>\n<p>But\u2026<\/p>\n<h4>Be careful with deferring scripts that impact UX<\/h4>\n<p>Core Web Vitals is all about improving user experience.<\/p>\n<p>Which means:<\/p>\n<p>We don\u2019t want to do anything that could negatively affect a user\u2019s impression of our site.<\/p>\n<p>Remember our big \u201cTry For Free\u201d button?<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6818 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Seobilitys-homepage.jpg\" alt=\"Seobility\u2019s homepage \" width=\"720\" height=\"1277\" \/><\/p>\n<p>Let\u2019s say a click on that opened a pop-up window, rather than taking the user to a new page.<\/p>\n<p>We know that clicking on that button is one of the first actions a user might take.<\/p>\n<p>So guess what would happen if we deferred the Javascript that made the pop-up work?<\/p>\n<p>A user might click it before the script has loaded. Which could lead to frustration (as nothing would happen).<\/p>\n<p>So what should we do instead?<\/p>\n<h4>Prioritize loading of important Javascript<\/h4>\n<p>We should prioritize the loading of that script, even if it\u2019s going to render-block for a few ms.<\/p>\n<p>Why? Because it\u2019s essential to the functionality of the above-the-fold content.<\/p>\n<p>Ideally, we\u2019d code the script for the pop-up directly into the page\u2019s HTML. Which would save the browser some time downloading an external Javascript file.<\/p>\n<p>But if that\u2019s not possible, we\u2019d want to store that script in its own file and load it right away.<\/p>\n<p>Long story short:<\/p>\n<p>If a script is essential to the functionality of your above-the-fold content, then be super careful with deferring it.<\/p>\n<p>But any script that\u2019s non-essential:<\/p>\n<p>Defer and async are your friends.<\/p>\n<h2 id='content-interaction-to-next-paint-inp'>Interaction to Next Paint (INP)<\/h2>\n<p>Interaction to Next Paint (INP) is a metric that measures a page\u2019s overall responsiveness and is set to replace First Input Delay on March 12, 2024.<\/p>\n<p>INP measures the response time of <a href=\"https:\/\/web.dev\/inp\/#whats-in-an-interaction\" target=\"_blank\" rel=\"noopener\">(qualifying) user interactions<\/a> while a user is on a page. It returns the longest interaction, often ignoring the outliers.<\/p>\n<p>This means that where FID focuses on the first interaction, INP focuses on all interactions which makes it a more reliable indicator of overall responsiveness.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6813\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint.png\" alt=\"interaction to next paint\" width=\"1200\" height=\"805\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint.png 1950w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-768x515.png 768w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-1536x1030.png 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>What actions are counted towards INP?<\/strong><\/p>\n<ul>\n<li>Clicking with a mouse<\/li>\n<li>Tapping on a device with a touchscreen<\/li>\n<li>Pressing a key on a keyboard (either physical or on-screen)<\/li>\n<\/ul>\n<p><strong>What doesn\u2019t?<\/strong><\/p>\n<p>Continuous actions such as scrolling and zooming don\u2019t count towards the INP metric.<\/p>\n<p>When considering elements on a page, anything clickable, including CTAs, hamburger menus, accordions, and dropdown menus, among others, play a part in INP.<\/p>\n<p>Looking at our homepage, there are countless potential interactions that could impact INP.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6823 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/potential-interactions-that-could-impact-INP.png\" alt=\"potential interactions that could impact INP\" width=\"1698\" height=\"1309\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/potential-interactions-that-could-impact-INP.png 1698w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/potential-interactions-that-could-impact-INP-768x592.png 768w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/potential-interactions-that-could-impact-INP-1536x1184.png 1536w\" sizes=\"(max-width: 1698px) 100vw, 1698px\" \/><\/p>\n<p>And that\u2019s without even having to scroll down!<\/p>\n<p>Clicks on these elements could all impact INP, although the most likely culprits of impacting this metric are the dropdown menu in our main navigation and the \u201cDo you need help?\u201d button at the bottom right, which opens a popup with our contact details.<\/p>\n<p>However, before diving into this any further, let\u2019s take a look at the score that PageSpeed Insights gives us for this metric.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6824 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/score-that-PageSpeed-Insights-gives.png\" alt=\"score that PageSpeed Insights gives\" width=\"990\" height=\"371\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/score-that-PageSpeed-Insights-gives.png 990w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/score-that-PageSpeed-Insights-gives-768x288.png 768w\" sizes=\"(max-width: 990px) 100vw, 990px\" \/><\/p>\n<p>As you can see, our homepage has an average Interaction to Next Paint of 171ms. This is considered a good score, although it is quite near to the 200ms mark where Google says it needs improvement.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6825 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-1.png\" alt=\"Interaction to Next Paint \" width=\"830\" height=\"193\" \/><\/p>\n<p><a href=\"https:\/\/web.dev\/inp\/\" target=\"_blank\" rel=\"noopener\">According to Google:<\/a><\/p>\n<blockquote><p>\u201cTo ensure you&#8217;re delivering user experiences with good responsiveness, a good threshold to measure is the 75th percentile of page loads recorded in the field, segmented across mobile and desktop devices:<\/p>\n<ul>\n<li>An INP below or at 200 milliseconds means that your page has good responsiveness.<\/li>\n<li>An INP above 200 milliseconds and below or at 500 milliseconds means that your page&#8217;s responsiveness needs improvement.<\/li>\n<li>An INP above 500 milliseconds means that your page has poor responsiveness.\u201d<\/li>\n<\/ul>\n<\/blockquote>\n<p>So we\u2019re doing pretty well in this metric, although it might be one to keep an eye on.<\/p>\n<p><strong>Tip:<\/strong> INP can\u2019t be measured as lab data and can therefore only be found in the field data report. If you don\u2019t have field data for your website in PageSpeed Insights, Google suggests using <a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noopener\">Total Blocking Time (TBT)<\/a> as a benchmark instead, since it <a href=\"https:\/\/almanac.httparchive.org\/en\/2022\/performance#inp-and-tbt\" target=\"_blank\" rel=\"noopener\">correlates highly with INP<\/a>.<\/p>\n<p>Total Blocking Time measures the time that long loading tasks (over 50ms) block the page from responding to user input. Your total blocking time should ideally be under 200ms.<\/p>\n<p>You can find your TBT in PageSpeed Insights\u2019 lab data.<\/p>\n<h3>Discovering the cause of INP issues using TBT<\/h3>\n<p>There are a number of opportunities\/diagnostics that PageSpeed insights provides that can help you identify the cause of potential INP issues. As we just discussed, since lab data doesn\u2019t cover INP, Google suggests using TBT instead since it\u2019s highly correlated with Interaction to Next Paint.<\/p>\n<p>Just above \u201cOpportunities\u201d in your PageSpeed Insights report, you can select TBT in the \u201cShow audits relevant to\u201d section:<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6826 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Show-audits-relevant.png\" alt=\"Show audits relevant to\" width=\"1004\" height=\"757\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Show-audits-relevant.png 1004w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Show-audits-relevant-768x579.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/p>\n<p>Once clicked, it will show you the most important opportunities and diagnostics that your site can use to improve this metric.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6827 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/improve-this-metric.png\" alt=\"improve this metric\" width=\"1005\" height=\"446\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/improve-this-metric.png 1005w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/improve-this-metric-768x341.png 768w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/><\/p>\n<p>These are the things that are likely contributing to your INP time the most and are definitely worth paying attention to.<\/p>\n<p>That being said, it\u2019s important to remember that, although TBT is highly correlated to INP, they aren\u2019t identical. In some cases, INP issues could be caused by other issues on your site. That\u2019s why it\u2019s important to always view your performance optimization efforts holistically.<\/p>\n<h3>The three phases of an interaction<\/h3>\n<p>To understand what causes INP issues, it\u2019s important to understand the three phases of an interaction. These are:<\/p>\n<p><strong>Input delay <\/strong><\/p>\n<p>Input delay is the time between the start of a page interaction (eg: clicking a button) and the event callbacks running. Event callbacks are simply functions that are set to run after a certain action has been taken. For example, if there\u2019s a button on the page that opens a popup, the piece of code that tells the browser to display the popup when the button is clicked is called a callback function.<\/p>\n<p>So, the input delay is the delay between an event, like a mouse click, and the corresponding function to <u>start<\/u> running.<\/p>\n<p><strong>Processing time <\/strong><\/p>\n<p>Processing time is the time it takes for the event callback to complete, so the time between it starting and finishing. In the example given above where a button opens a popup, it may only take milliseconds for the function to finish running. However, resource-intensive processes or bad coding can result in much longer processing times.<\/p>\n<p><strong>Presentation delay <\/strong><\/p>\n<p>Presentation delay is the time it takes for the browser to display the changes on the user\u2019s screen once processing is completed.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6828 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Presentation-delay.png\" alt=\"Presentation delay \" width=\"800\" height=\"1200\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Presentation-delay.png 800w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Presentation-delay-768x1152.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>The total time of these three phases is what counts towards INP and, after adjusting for outliers, the longest duration is ultimately what counts.<\/p>\n<p>So, even if most of the interactive elements on your page are blazing fast, if there\u2019s an issue with one of them and it\u2019s commonly interacted with by users, it can have a major impact on your score.<\/p>\n<p>As was the case for FID, high INP scores are often the result of JavaScript-related issues and render-blocking in particular.<\/p>\n<p>The suggested optimizations for FID hold true for IND.<\/p>\n<p>However, IND measures all user interactions on the page, not just the first interaction. IND also measures the processing time of each event callback as well as the delay in showing the changes on the user&#8217;s screen, whereas FID only focused on input delay.<\/p>\n<p>So, two other things to consider are optimizing event callbacks and reducing presentation delays. Some of the tips in the section on FID can help optimize your processing times, but they will mainly help to improve input delay.<\/p>\n<p>That\u2019s why we\u2019ll get into some tips for improving presentation delay and processing time now.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6830 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction.png\" alt=\"Interaction\" width=\"806\" height=\"363\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction.png 806w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Interaction-768x346.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><br \/>\n<small>Image from a <a href=\"https:\/\/web.dev\/inp\/\" target=\"_blank\" rel=\"noopener\">web.dev article on INP<\/a><\/small><\/p>\n<h3><strong>Tips for improving presentation delay and processing time<\/strong><\/h3>\n<p>When it comes to minimizing presentation delay and processing time, there are quite a few relatively easy things that website owners can do to improve.<\/p>\n<p>The good thing about these tasks is that they can also impact other speed metrics.<\/p>\n<p>Without going into the technical jargon and complex terms and concepts behind these suggestions, here are a few tips:<\/p>\n<h4><strong>Removing unnecessary content\/features\/plugins\u00a0 <\/strong><\/h4>\n<p>Unnecessary content, images, styles and animations, as well as active but unnecessary plugins can wreak havoc on your presentation delay and general load speeds. They add more elements to the page and make it larger, unnecessarily causing the page or changes to the page to take longer to load. Basically, the fewer elements on the page and the smaller the page\u2019s size, the quicker new changes will be made visible.<\/p>\n<p>Removing unnecessary elements, animations, images, or other content can be very beneficial, assuming it doesn\u2019t play a major part in your website\u2019s design or optimization.<\/p>\n<p>There\u2019s always a tradeoff to be made here and it\u2019s likely not a great idea to remove\/disable all of the features offered by your theme of choice or deleting any plugins your site needs. That being said, most WordPress sites have at least some elements and features that are unnecessarily slowing the site down.<\/p>\n<h4>Using lazy loading and pagination where possible (keeping UX in mind)<\/h4>\n<p>Lazy loading basically means only loading certain content when it\u2019s actually needed by the user, instead of loading everything straight away. This helps lighten the initial load and present the new page quicker, potentially improving presentation delay.<\/p>\n<p>It\u2019s most commonly done for loading images since their file size is generally quite large compared to the code\/content.<\/p>\n<p>Implementing lazy loading is very easy on most CMSs. Simply look for a <a href=\"https:\/\/quadlayers.com\/best-lazy-load-plugins-for-wordpress\/\" target=\"_blank\" rel=\"noopener\">trusted lazy-loading plugin<\/a> and, after some basic configurations, you\u2019re ready to start lazy loading your images.<\/p>\n<p><strong>Tip:<\/strong> Unless you know what you\u2019re doing, only lazy load content that\u2019s not important for SEO purposes. You want to avoid lazy loading your main website text as it may hamper crawling and indexing by search engines.<\/p>\n<p>You can use waterfall charts like those provided by GTMetrics to diagnose which resources may be holding you back the most and evaluate whether these can be lazy-loaded.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6831 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/waterfall-charts.png\" alt=\"waterfall charts\" width=\"1289\" height=\"749\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/waterfall-charts.png 1289w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/waterfall-charts-768x446.png 768w\" sizes=\"(max-width: 1289px) 100vw, 1289px\" \/><\/p>\n<h4>Minify JavaScript<\/h4>\n<p>Minifying your JavaScript is generally good practice and can be done with the click of a button using most speed optimization\/caching plugins in WordPress. This reduces the file size and can help the JavaScript run (a bit) quicker when compared to JavaScript files that aren\u2019t minified, potentially improving the processing time. It\u2019s uncommon for these plugins to break your site, but if they do then you can either try a different plugin or try and identify which script isn\u2019t handling the minification well and exclude it.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6832 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Minify-JavaScript.png\" alt=\"Minify JavaScript\" width=\"1168\" height=\"1201\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Minify-JavaScript.png 1168w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Minify-JavaScript-768x790.png 768w\" sizes=\"(max-width: 1168px) 100vw, 1168px\" \/><\/p>\n<h4>Using Brotli or GZIP compression<\/h4>\n<p>Compressing your pages can also help to improve Javascript execution times and page speed in general. It\u2019s very easy to accomplish with (most) speed optimization plugins or by making some manual changes. Here\u2019s a quick <a href=\"https:\/\/antonyagnel.com\/enable-brotli-compression\/\" target=\"_blank\" rel=\"noopener\">guide on Brotli compression for WordPress<\/a> and here\u2019s one for <a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-enable-gzip-compression-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">GZIP compression<\/a>.<\/p>\n<h4>Use good themes and plugins that are lightweight and well-optimized<\/h4>\n<p>Although this is not something that will help you deal with current INP issues, you should keep this in mind if you want to install a new plugin or switch to a different theme.<\/p>\n<p>Pick themes and plugins that are well-known with good reviews and, where possible, check how they impact your page speed metrics when used. You can do this by running Pagespeed Insights before activating a plugin or changing themes and then running it again afterwards, before making any changes. This will give you a good idea of how it impacts your page\u2019s performance.<\/p>\n<p>By picking a theme and plugins that are lightweight with well-optimized javascript code, you make sure that your website stays fast and responsive.<\/p>\n<p>Not sure which theme to go for? This post by WP-Rocket covers <a href=\"https:\/\/wp-rocket.me\/blog\/fastest-wordpress-themes\/\" target=\"_blank\" rel=\"noopener\">ten of the fastest WordPress themes currently on the market<\/a>.<\/p>\n<h2 id='content-largest-contentful-paint-lcp'>Largest Contentful Paint (LCP)<\/h2>\n<p>Now let\u2019s look at the second of Google\u2019s three Core Web Vitals: <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noopener\">Largest Contentful Paint<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3349 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility.png\" alt=\"largest contentful paint\" width=\"1000\" height=\"671\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/largest-contentful-paint-seobility-768x515.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>The good news? This metric is a little easier to understand.<\/p>\n<p>Largest Contentful Paint measures how long it takes to fully render the largest above-the-fold element on a user\u2019s screen.<\/p>\n<p>Elements considered for LCP include:<\/p>\n<ul>\n<li>Images<\/li>\n<li>Videos<\/li>\n<li>Containers with background images<\/li>\n<li>Text elements (paragraphs, headers etc)<\/li>\n<\/ul>\n<p>And whichever individual element takes up the most real-estate above the fold is the one that counts for LCP.<\/p>\n<p>On our SEO audit guide, the header is the LCP element\u2026<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6858\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seo-audit-guide-lcp.png\" alt=\"the lcp element in our seo audit guide\" width=\"425\" height=\"909\" \/><\/p>\n<p>\u2026while on our meta descriptions guide (which has a shorter title), the featured image takes up more browser space.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6859\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-meta-description-guide.png\" alt=\"lcp element in our meta description guide\" width=\"422\" height=\"908\" \/><\/p>\n<p>But don\u2019t worry, there\u2019s no need to get your ruler out.<\/p>\n<p>Unlike FID, Largest contentful paint is measurable both in the field and in the lab.<\/p>\n<p>Run a page through Google\u2019s PageSpeed Insights, and they\u2019ll let you know what the Largest Contentful Paint element is.<\/p>\n<p><em>PageSpeed Insights &gt; Diagnostics &gt; Largest Contentful Paint element<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6833 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint-element.png\" alt=\"Largest Contentful Paint element\" width=\"955\" height=\"474\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint-element.png 955w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint-element-768x381.png 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/p>\n<p>In terms of measurement, The LCP clock starts when a user types in your URL, and ends when the LCP element is fully loaded.<\/p>\n<p>Let\u2019s see how our meta descriptions post is doing.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6834 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/meta-descriptions-post.png\" alt=\"meta descriptions post \" width=\"957\" height=\"258\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/meta-descriptions-post.png 957w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/meta-descriptions-post-768x207.png 768w\" sizes=\"(max-width: 957px) 100vw, 957px\" \/><\/p>\n<p>Yikes!<\/p>\n<p>A Largest Contentful Paint of 9.4s puts this page firmly in the \u201cPoor\u201d category.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6835 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/LCP.png\" alt=\"Largest Contentful Paint\" width=\"578\" height=\"444\" \/><\/p>\n<p>As you can see, Google considers:<\/p>\n<ol>\n<li>an LCP of under 2.5 seconds as \u201cgood\u201d,<\/li>\n<li>an\u00a0 LCP of 2.5s to 4s as \u201cneeds improvement\u201d,<\/li>\n<li>an LCP above 4s as \u201cpoor\u201d<\/li>\n<\/ol>\n<p>But before we panic\u2026<\/p>\n<p>You may have noticed that the above metrics were \u201cLab Data\u201d. And as I already mentioned, LCP is measurable both in the lab and in the field.<\/p>\n<p>So let\u2019s see what our real-world LCP is for this page.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6836 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/real-world-LCP-is-for-this-page.png\" alt=\"real-world LCP is for this page\" width=\"950\" height=\"457\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/real-world-LCP-is-for-this-page.png 950w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/real-world-LCP-is-for-this-page-768x369.png 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/p>\n<p>That seems a lot better.<\/p>\n<p>Either way, we\u2019re going to want to improve the LCP of this page.<\/p>\n<h3>How to improve Largest Contentful Paint<\/h3>\n<p>So how do we go about improving LCP?<\/p>\n<p>Well, you might have guessed: a big part of it is going to be speeding up our site. Our\u00a0<a href=\"https:\/\/www.seobility.net\/en\/blog\/page-speed-optimization\/\" target=\"_blank\" rel=\"noopener\">page speed optimization guide<\/a> is the perfect place to learn more about how to do this.<\/p>\n<p>In this section on improving your LCP score, however, we\u2019ll show you how to easily find slow pages with Seobility and look at some specific factors that can impact LCP.<\/p>\n<h3>Finding slow pages with Seobility<\/h3>\n<p>Seobility\u2019s site audit measures the response time for each page on a website.<\/p>\n<p>We consider:<\/p>\n<ul>\n<li>a response time under 0.5 seconds to be good,<\/li>\n<li>a response time between 0.5 seconds and 1 second to need improvement,<\/li>\n<li>A response time above 1 second to be slow<\/li>\n<\/ul>\n<p>But ideally, the faster, the better.<\/p>\n<p>To find slow pages on your site you\u2019ll need a Seobility account.<\/p>\n<p>Don\u2019t have one yet? We recommend <a href=\"https:\/\/www.seobility.net\/en\/pricing\/\" target=\"_blank\" rel=\"noopener\">signing up for a free, 14-day trial of our Premium plan here<\/a>, which will let you crawl up to 25,000 pages.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6837 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Plan-and-pricing.png\" alt=\"Plan and pricing\" width=\"1097\" height=\"734\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Plan-and-pricing.png 1097w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Plan-and-pricing-768x514.png 768w\" sizes=\"(max-width: 1097px) 100vw, 1097px\" \/><\/p>\n<p>Your next step is to add a new project and start a crawl.<\/p>\n<p>Click the \u201cAdd project\u201d button on the dashboard, enter your start URL, give the project a title, and hit \u201cAdd project and start crawling\u201d.<\/p>\n<p><em>Seobility &gt; Dashboard &gt; Add project<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3244 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/seobility-new-project.png\" alt=\"seobility - new project\" width=\"1358\" height=\"890\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/seobility-new-project.png 1358w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/seobility-new-project-768x503.png 768w\" sizes=\"(max-width: 1358px) 100vw, 1358px\" \/><\/p>\n<p>Seobility bot will get to work crawling your site.<\/p>\n<p>Once it\u2019s done, click on the \u201cTech &amp; Meta\u201d report under \u201cOnpage\u201d and scroll down to \u201cDistribution of response times\u201d.<\/p>\n<p><em>Seobility &gt; Dashboard &gt; Onpage &gt; Tech &amp; Meta &gt; Distribution of response times<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6838 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Distribution-of-response-times.png\" alt=\"Distribution of response times\" width=\"527\" height=\"473\" \/><\/p>\n<p>In the example above we can see that 6 pages on the site are in the \u201cSlow\u201d category and 16 in the \u201cMedium\u201d category. Clicking on the number gives us a list of the slow pages, along with:<\/p>\n<ol>\n<li>their response time, and<\/li>\n<li>how that response time compares with the average for the site<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6839 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/slow-response-time.png\" alt=\"slow response time\" width=\"1061\" height=\"473\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/slow-response-time.png 1061w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/slow-response-time-768x342.png 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>In this case, these 6 pages are around 5-10x slower than the average for the site. So we\u2019d definitely want to take a look at them and figure out what\u2019s up.<\/p>\n<h3>Two tips for optimizing Largest Contentful Paint<\/h3>\n<p>The fact that we know exactly what the LCP element is for each page gives us a bit of an advantage.<\/p>\n<p>Why? Because we can look to optimize the loading of that element and reduce our LCP. Indeed, we could even switch out what the Largest Contentful Paint element is.<\/p>\n<p>For example, if the LCP element is a featured image, we could increase the font size of the header so it becomes the LCP instead.<\/p>\n<p>But beyond \u2018tricks\u2019 and \u2018hacks\u2019 what we really want to be doing is getting everything above-the-fold to load as quickly as possible.<\/p>\n<p>Here are two tips.<\/p>\n<h4 id=\"critical-path-css\">1. Include \u201cCritical Path\u201d CSS directly in the HTML + defer non-critical CSS<\/h4>\n<p>Like Javascript, CSS is render-blocking by default.<\/p>\n<p>When you link to a CSS file in the standard way (in the &lt;head&gt; section), a browser will need to download and process the CSS before it can start displaying content.<\/p>\n<pre>&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"yourstylesheet.css\"&gt;\r\n&lt;\/head&gt;<\/pre>\n<p>That\u2019s going to have an impact on FCP.<\/p>\n<p>Fortunately, there\u2019s an easy fix.<\/p>\n<p>What we want to do is<\/p>\n<ol>\n<li>load the styles required for rendering the above-the-fold content inline, then<\/li>\n<li>load the rest of the CSS rules asynchronously (non-render-blocking)<\/li>\n<\/ol>\n<p>The first thing we need to do is determine which CSS rules are required to style the <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Above_the_Fold\" target=\"_blank\" rel=\"noopener\">above-the-fold<\/a> content.<\/p>\n<p>And the good news is, there\u2019s a tool that will do it for us.<\/p>\n<ol>\n<li>Go to <a href=\"https:\/\/www.sitelocity.com\/critical-path-css-generator\" target=\"_blank\" rel=\"noopener\">https:\/\/www.sitelocity.com\/critical-path-css-generator<\/a><\/li>\n<li>Enter the URL you want to generate critical path CSS for<\/li>\n<li>Hit \u201cGenerate Critical Path CSS\u201d<\/li>\n<li>Copy the CSS from box<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3247 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/critical-path-css-generator.png\" alt=\"critical path CSS\" width=\"905\" height=\"676\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/critical-path-css-generator.png 905w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/critical-path-css-generator-768x574.png 768w\" sizes=\"(max-width: 905px) 100vw, 905px\" \/><\/p>\n<p>Paste the critical path CSS into the &lt;head&gt; section of your page\u2019s HTML. That way all the CSS rules required to display above-the-fold content will be loaded immediately.<\/p>\n<p>Then replace your regular stylesheet call with the following:<\/p>\n<pre>&lt;link rel=\"preload\" href=\"yourstylesheet.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"&gt;\r\n&lt;noscript&gt;&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;&lt;\/noscript&gt;<\/pre>\n<p>This will:<\/p>\n<ol>\n<li>load non-critical CSS asynchronously,<\/li>\n<li>with a fallback (inside &lt;noscript&gt;) for browsers that don\u2019t execute javascript<\/li>\n<\/ol>\n<p><strong>Note<\/strong>: most good <a href=\"https:\/\/www.seobility.net\/en\/wiki\/Caching\" target=\"_blank\" rel=\"noopener\">caching<\/a> plugins will handle all this for you.<\/p>\n<p>For example, if you\u2019re using <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">WP Rocket<\/a>, then all you need to do is select \u201cOptimize CSS delivery\u201d under \u201cFile Optimization\u201d\u2026<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3304 size-large\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/wprocket-optimize-css-1024x617.png\" alt=\"wp rocket optimize CSS\" width=\"640\" height=\"386\" \/><\/p>\n<p>\u2026and you\u2019re good to go.<\/p>\n<p>But if you want to read more on how to do it manually, then <a href=\"https:\/\/web.dev\/defer-non-critical-css\/\" target=\"_blank\" rel=\"noopener\">check out the web.dev guide here<\/a>.<\/p>\n<h4>2. Optimize featured images<\/h4>\n<p>On many blog pages, the featured (or hero) image will be the LCP element.<\/p>\n<p>So we want to make sure it loads as quickly as possible.<\/p>\n<p>Here are a few pointers for optimizing images, with links to further reading\/tools:<\/p>\n<ol>\n<li>Use srcset to serve alternative images based on viewport size (<a href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015\" target=\"_blank\" rel=\"noopener\">tutorial<\/a>)<\/li>\n<li>Compress images (<a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\">imagify<\/a> is recommended for WordPress)<\/li>\n<li>Consider serving webp versions of your images (here\u2019s <a href=\"https:\/\/web.dev\/serve-images-webp\/\" target=\"_blank\" rel=\"noopener\">what they are<\/a>, imagify can handle creating them)<\/li>\n<li>Use a <a href=\"https:\/\/www.seobility.net\/en\/wiki\/content-delivery-network-cdn\" target=\"_blank\" rel=\"noopener\">CDN<\/a> to serve your images (<a href=\"https:\/\/web.dev\/image-cdns\/\" target=\"_blank\" rel=\"noopener\">web.dev guide<\/a>)<\/li>\n<\/ol>\n<h2 id='content-cumulative-layout-shift-cls'>Cumulative Layout Shift (CLS)<\/h2>\n<p><a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noopener\">Cumulative Layout Shift<\/a> is a measurement of the stability of a webpage\u2019s layout. Any time an element on a page moves unexpectedly (i.e. not a movement initiated by the user) it adds to the page\u2019s total CLS score.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3351 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility.png\" alt=\"cumulative layout shift\" width=\"1000\" height=\"681\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cumulative-layout-shift-seobility-768x523.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Layout shifts can make for an incredibly frustrating user experience.<\/p>\n<p>Take a look at the screen recording below, which shows the homepage of a Scottish newspaper loading over a period of 5 seconds.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3217-2\" width=\"640\" height=\"338\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm?_=2\" \/><a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm\">https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>Notice how the menu jumps around as ads are loaded.<\/p>\n<p>Here are individual frames showing the layout shifting around before we get to the final stable version.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3248 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-example.png\" alt=\"cumulative layout shift example\" width=\"751\" height=\"430\" \/><\/p>\n<p>On the final frame, an ad occupies the position where the menu was originally located.<\/p>\n<p>So what would happen if a user tried to click on the menu while the layout was still shifting? Yep, they\u2019d probably click on the ad by mistake and be taken away from the page.<\/p>\n<p>We\u2019re sure you can see why layout shifts are bad news for users.<\/p>\n<p>Which is why Google wants you to keep them to an absolute minimum.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3249 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google.png\" alt=\"cumulative layout shift\" width=\"817\" height=\"233\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google.png 817w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google-768x219.png 768w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><\/p>\n<p>The way a page\u2019s CLS score is calculated is a bit complex and is not really something you need to know. So we\u2019re not going to cover it\u2026<\/p>\n<p>\u2026but <a href=\"https:\/\/web.dev\/cls\/#layout-shift-score\" target=\"_blank\" rel=\"noopener\">it is detailed here<\/a> if you want to fill in the gaps.<\/p>\n<p>For our purposes though, all we need to know is we want a CLS score below 0.1.<\/p>\n<h3><strong>Where can you see your page\u2019s CLS score?<\/strong><\/h3>\n<p>Cumulative Layout Shift is measurable both in the lab and in the field.<\/p>\n<p>So you\u2019ll see it in both places when you run a page through PageSpeed insights.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6841 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CLS-score.png\" alt=\"CLS score\" width=\"985\" height=\"408\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CLS-score.png 985w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CLS-score-768x318.png 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6842 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Diagnose-performance-issues.png\" alt=\"Diagnose performance issues\" width=\"991\" height=\"905\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Diagnose-performance-issues.png 991w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Diagnose-performance-issues-768x701.png 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/p>\n<h3>What causes layout shift? (and how to fix it)<\/h3>\n<p>Layout shifts can happen for a number of reasons.<\/p>\n<p>But the good news is, for your own page, Google will tell you exactly what\u2019s contributing to your CLS score.<\/p>\n<p>Run a page through PageSpeed Insights, and you\u2019ll find a section called \u201cAvoid large layout shifts\u201d under diagnostics.<\/p>\n<p>Here\u2019s what the report says for our homepage.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6843 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Avoid-large-layout-shifts.png\" alt=\"Avoid large layout shifts\" width=\"956\" height=\"622\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Avoid-large-layout-shifts.png 956w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Avoid-large-layout-shifts-768x500.png 768w\" sizes=\"(max-width: 956px) 100vw, 956px\" \/><\/p>\n<p>Our CLS is very low but this isn\u2019t always the case. Some of the most common culprits of high CLS include:<\/p>\n<ul>\n<li>Dynamically injected content including ads and iframes<\/li>\n<li>Animations<\/li>\n<li>Web font loads<\/li>\n<li>Banners, cookie notices and popups<\/li>\n<li>Images with missing width\/height attributes<\/li>\n<\/ul>\n<p>Basically anything that can cause the page\u2019s layout to move after the initial layout is displayed. We\u2019ll dive into a few of these in more detail below.<\/p>\n<h4>1. Ensure text remains visible during webfont load<\/h4>\n<p>Lots of websites (including our own) use custom fonts. Google themselves have <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">a fantastic library of fonts<\/a> that can help make a webpage more visually appealing, and easier to read.<\/p>\n<p>The problem:<\/p>\n<p>These custom fonts need to be downloaded before they can be displayed by a browser.<\/p>\n<p>And until they are:<\/p>\n<ol>\n<li>the user won\u2019t see any text<\/li>\n<li>the browser doesn\u2019t know exactly how much space text elements are going to take up (which can cause a layout shift when they load)<\/li>\n<\/ol>\n<p>To minimize this we can take advantage of <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/\" target=\"_blank\" rel=\"noopener\">CSS font-display<\/a> to swap to a fallback, system font until the custom font has been loaded.<\/p>\n<p>You\u2019ll see this recommended (if you\u2019re not doing it already) under \u201cDiagnostics\u201d in PageSpeed insights.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3252 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/ensure-text-remains-visible.png\" alt=\"ensure text remains visible\" width=\"932\" height=\"438\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/ensure-text-remains-visible.png 932w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/ensure-text-remains-visible-768x361.png 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/p>\n<p>And if you\u2019re using Google fonts, it\u2019s super easy to implement.<\/p>\n<p>All you need to do is add \u201c&amp;display=swap\u201d to the end of the Google font stylesheet URL.<\/p>\n<pre>&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\n<p>In fact, these days Google will automatically add it for you when you grab the embed code from their library.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3253 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/google-fonts-embed.png\" alt=\"google fonts\" width=\"471\" height=\"373\" \/><\/p>\n<h4>2. Reserve space for ads in your layout<\/h4>\n<p>Custom fonts will generally cause small layout shifts that will be (in the main) imperceptible to users.<\/p>\n<p>But \u2014 as demonstrated by the newspaper site at the start of this section \u2014 ads can take a wrecking ball to your layout.<\/p>\n<p>It\u2019s fixable if:<\/p>\n<ol>\n<li>you know what sizes your ad network is going to serve, and<\/li>\n<li>you\u2019re manually placing them in specific slots<\/li>\n<\/ol>\n<p>But with Google AdSense auto ads all bets are off. After all, the <a href=\"https:\/\/support.google.com\/adsense\/answer\/9261805?hl=en\" target=\"_blank\" rel=\"noopener\">whole point of auto ads<\/a> is that they\u2019ll test different locations to maximize revenue. Which means you\u2019ve literally no idea where ads will end up on any given pageview! *<\/p>\n<p>For now though, let\u2019s assume that you know which sizes of ads you\u2019ll be displaying, and where they\u2019re going to be.<\/p>\n<p>If that\u2019s the case, all you need to do to prevent ads from shifting your layout is set a minimum height and width for your ad container. The minimums will be based on the ad sizes you\u2019ll be serving.<\/p>\n<pre>&lt;div id=\"ad-slot1\" style=\"min-width: 300px; min-height: 250px;\"&gt;&lt;\/div&gt;<\/pre>\n<p>You can then use media queries to change the minimum height\/width depending on a user\u2019s screen size.<\/p>\n<pre>@media screen and (max-width: 960px) {\r\n#ad-slot1 {\r\nmin-height: 100px;\r\n}\r\n}<\/pre>\n<p>Full instructions on how to do it <a href=\"https:\/\/developers.google.com\/doubleclick-gpt\/guides\/minimize-layout-shift\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p><em>*if you know of a solution for auto ads then please let us know in the comments!<\/em><\/p>\n<h4>3. Make sure all image tags include width and height attributes<\/h4>\n<p>Most websites will have a responsive layout, where images automatically resize based on the user\u2019s screen size.<\/p>\n<p>Indeed, with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" target=\"_blank\" rel=\"noopener\">the srcset attribute<\/a>, browsers are able to display images (i.e. a small, medium, large variation) in different sizes to match the display.<\/p>\n<p>However, it\u2019s still important to set the width and size attributes of the parent image in the &lt;img&gt; tag.<\/p>\n<p>Why? Because if those attributes are missing, the browser won\u2019t be able to calculate the height to reserve for the image prior to it loading.<\/p>\n<p>Which will cause layout shift when it does.<\/p>\n<p>So always make sure you set size attributes for your images. This is particularly important for above-the-fold elements (for example a site logo).<\/p>\n<h2 id='content-how-and-where-to-check-your-site-s-core-web-vitals'>How (and where) to check your site\u2019s Core Web Vitals<\/h2>\n<p>Throughout this guide, we\u2019ve focused on <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Google\u2019s PageSpeed Insights<\/a>, as it has:<\/p>\n<ol>\n<li>Been around for a while<\/li>\n<li>Most webmasters\/SEOs will be familiar with it<\/li>\n<\/ol>\n<p>But there are <a href=\"https:\/\/web.dev\/vitals-tools\/\" target=\"_blank\" rel=\"noopener\">plenty of other places<\/a> you can check Core Web Vitals for a website or page.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3255 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv-tools.png\" alt=\"where to measure core web vitals\" width=\"884\" height=\"557\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv-tools.png 884w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cwv-tools-768x484.png 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/p>\n<p>So let\u2019s quickly cover them.<\/p>\n<h3>1. Google Search Console<\/h3>\n<p>First up, Google reports issues with your site\u2019s Core Web Vitals in <a href=\"https:\/\/search.google.com\/search-console\/welcome\" target=\"_blank\" rel=\"noopener\">Google Search Console<\/a> (GSC).<\/p>\n<p>You\u2019ll find the report by clicking on \u201cCore Web Vitals\u201d under \u201cExperience\u201d on the left menu.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6845 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Core-Web-Vitals-1.png\" alt=\"Core Web Vitals\" width=\"1073\" height=\"572\" \/><\/p>\n<p>Let\u2019s zoom in on the chart.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6846 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Core-Web-Vitals-1-1.png\" alt=\"Core Web Vitals\" width=\"743\" height=\"382\" \/><\/p>\n<p>We can see that GSC has split the report into \u201cpoor\u201d, \u201cneed improvement\u201d, and \u201cgood\u201d.<\/p>\n<p>Clicking \u201cOpen Report\u201d will show us the issues.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6847 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Clicking-Open-Report-will-show.png\" alt=\"Clicking \u201cOpen Report\u201d will show \" width=\"922\" height=\"404\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Clicking-Open-Report-will-show.png 922w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Clicking-Open-Report-will-show-768x337.png 768w\" sizes=\"(max-width: 922px) 100vw, 922px\" \/><\/p>\n<p>And we can click on an individual issue to see example pages.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6848 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/individual-issue-to-see-example-pages.png\" alt=\"\" width=\"925\" height=\"774\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/individual-issue-to-see-example-pages.png 925w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/individual-issue-to-see-example-pages-768x643.png 768w\" sizes=\"(max-width: 925px) 100vw, 925px\" \/><\/p>\n<p>For some reason, Google groups pages with similar issues together. So to see more, we\u2019ll need to click on one of the example pages.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6849 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-groups-pages-1.png\" alt=\"Google groups pages \" width=\"1138\" height=\"768\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-groups-pages-1.png 1138w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-groups-pages-1-768x518.png 768w\" sizes=\"(max-width: 1138px) 100vw, 1138px\" \/><\/p>\n<p>And we\u2019ll get more URLs in the sidebar.<\/p>\n<h3>2. Web Vitals chrome extension<\/h3>\n<p>We mentioned earlier that it is possible to test First Input Delay.<\/p>\n<p>Although to reiterate, that test will be based on your own computer\/network (and indeed your own personal reaction time), so it\u2019s not as reliable as aggregate field data.<\/p>\n<p>But with that being said, here\u2019s how to do it.<\/p>\n<p>First, you\u2019ll need to install <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma?hl=en\" target=\"_blank\" rel=\"noopener\">the Web Vitals Chrome extension<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6850 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Web-Vitals-Chrome-extension.png\" alt=\"Web Vitals Chrome extension\" width=\"524\" height=\"170\" \/><\/p>\n<p>Once installed, you can click on the extension to view Core Web Vitals for any page.<\/p>\n<p>But while testing, we recommend checking \u201cDisplay HUD overlay\u201d in the settings options. That way you\u2019ll automatically get CWV for each page without having to click.<\/p>\n<p>Here\u2019s how the extension displays the CWV for Google\u2019s homepage.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6851 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CWV-for-Googles-homepage.png\" alt=\"CWV for Google\u2019s homepage\" width=\"1324\" height=\"550\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CWV-for-Googles-homepage.png 1324w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/CWV-for-Googles-homepage-768x319.png 768w\" sizes=\"(max-width: 1324px) 100vw, 1324px\" \/><\/p>\n<p>Fair play Google\u2026 that\u2019s rapid.<\/p>\n<h3>3. Google\u2019s Lighthouse (Chrome Dev Tools)<\/h3>\n<p>You can use <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" target=\"_blank\" rel=\"noopener\">Google\u2019s Lighthouse<\/a> in Chrome Dev Tools to get lab scores for Largest Contentful Paint and Cumulative Layout Shift.<\/p>\n<p>To access Chrome Dev Tools, just press\u00a0 F12 on your keyboard (while using Google\u2019s Chrome browser) and pick the Lighthouse tab.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6852 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Googles-Lighthouse.png\" alt=\"Google\u2019s Lighthouse \" width=\"488\" height=\"674\" \/><\/p>\n<h3>4. Google PageSpeed Insights<\/h3>\n<p>To recap, in Google\u2019s PageSpeed Insights you\u2019ll get:<\/p>\n<ol>\n<li>lab metrics for LCP and CLS (but not FID)<\/li>\n<li>field metrics for all three Core Web Vitals (when sufficient data is available)<\/li>\n<\/ol>\n<p>It\u2019s comprehensive, which is why we used PageSpeed Insights for our examples throughout this guide.<\/p>\n<h3>5. Chrome User Experience Report<\/h3>\n<p>If you\u2019re technically minded you can also access CWV data directly from the Chrome User Experience Report API.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\" target=\"_blank\" rel=\"noopener\">This guide<\/a> explains how to do it.<\/p>\n<h2 id='content-you-re-all-set-to-improve-your-core-web-vitals'>You\u2019re all set to improve your Core Web Vitals<\/h2>\n<p>That wraps it up for our guide to Google\u2019s Core Web Vitals.<\/p>\n<p>While their direct impact on rankings is still hotly debated among SEOs, it\u2019s clear that this is an important metric to optimize for. And Google has been pushing the page experience topic hard. So it\u2019s likely that sites with poor page experience will see a negative impact on their search traffic.<\/p>\n<p>Which of course means that sites with great UX could see a noticeable boost.<\/p>\n<p>That being said, we recognize it\u2019s a complex topic. So please feel free to ask any questions you have regarding Core Web Vitals in the comments, and we\u2019ll get back to you asap.<\/p>\n<p>Good luck improving your Core Web Vitals!<\/p>\n<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"David McSweeney\",\n    \"url\": \"https:\/\/uk.linkedin.com\/in\/david-mcsweeney-79840154\"\n  }\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last updated on February 1, 2024. Core Web Vitals are a set of real-world website performance metrics that Google considers critical to user experience. And Google has repeatedly stated that they have a direct influence on search rankings. Whether this holds true is a hotly debated topic, with many (read most) SEOs seeing very little, [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":4881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[35,115],"tags":[],"class_list":["post-3217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-technical-seo"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Core Web Vitals: Everything You Need To Know &#8211; Seobility<\/title>\n<meta name=\"description\" content=\"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: Everything You Need To Know &#8211; Seobility\" \/>\n<meta property=\"og:description\" content=\"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\" \/>\n<meta property=\"og:site_name\" content=\"Seobility\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seobility.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-02T10:40:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-25T13:48:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/core-web-vitals-updated-fb-ln.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"David McSweeney\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/core-web-vitals-updated-twitter.png\" \/>\n<meta name=\"twitter:creator\" content=\"@seobility_net\" \/>\n<meta name=\"twitter:site\" content=\"@seobility_net\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"David McSweeney\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"43 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\"},\"author\":{\"name\":\"David McSweeney\",\"@id\":\"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25\"},\"headline\":\"Core Web Vitals: Everything You Need To Know\",\"datePublished\":\"2023-08-02T10:40:48+00:00\",\"dateModified\":\"2025-07-25T13:48:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\"},\"wordCount\":7458,\"commentCount\":18,\"image\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg\",\"articleSection\":[\"General SEO\",\"Technical SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\",\"url\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\",\"name\":\"Core Web Vitals: Everything You Need To Know &#8211; Seobility\",\"isPartOf\":{\"@id\":\"https:\/\/www.seobility.net\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg\",\"datePublished\":\"2023-08-02T10:40:48+00:00\",\"dateModified\":\"2025-07-25T13:48:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25\"},\"description\":\"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage\",\"url\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg\",\"contentUrl\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg\",\"width\":1200,\"height\":627},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.seobility.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals: Everything You Need To Know\",\"item\":\"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/posts\/3217\/\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.seobility.net\/en\/#website\",\"url\":\"https:\/\/www.seobility.net\/en\/\",\"name\":\"Seobility\",\"description\":\"Online SEO Software &amp; Tools For Better Rankings\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.seobility.net\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25\",\"name\":\"David McSweeney\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg\",\"url\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg\",\"contentUrl\":\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg\",\"caption\":\"David McSweeney\"},\"description\":\"David combines 20+ years of experience in SEO with the passion for teaching people how to optimize their websites the right way. Unsurprisingly he loves SEO and writing. That's why David focuses on the particularly advanced SEO topics on the Seobility blog.\",\"url\":\"https:\/\/www.seobility.net\/en\/blog\/author\/david-mcsweeney\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Core Web Vitals: Everything You Need To Know &#8211; Seobility","description":"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals: Everything You Need To Know &#8211; Seobility","og_description":"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.","og_url":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/","og_site_name":"Seobility","article_publisher":"https:\/\/www.facebook.com\/seobility.net\/","article_published_time":"2023-08-02T10:40:48+00:00","article_modified_time":"2025-07-25T13:48:48+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/core-web-vitals-updated-fb-ln.png","type":"image\/png"}],"author":"David McSweeney","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/core-web-vitals-updated-twitter.png","twitter_creator":"@seobility_net","twitter_site":"@seobility_net","twitter_misc":{"Written by":"David McSweeney","Est. reading time":"43 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#article","isPartOf":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/"},"author":{"name":"David McSweeney","@id":"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25"},"headline":"Core Web Vitals: Everything You Need To Know","datePublished":"2023-08-02T10:40:48+00:00","dateModified":"2025-07-25T13:48:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/"},"wordCount":7458,"commentCount":18,"image":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage"},"thumbnailUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","articleSection":["General SEO","Technical SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/","url":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/","name":"Core Web Vitals: Everything You Need To Know &#8211; Seobility","isPartOf":{"@id":"https:\/\/www.seobility.net\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage"},"image":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage"},"thumbnailUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","datePublished":"2023-08-02T10:40:48+00:00","dateModified":"2025-07-25T13:48:48+00:00","author":{"@id":"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25"},"description":"Confused about Core Web Vitals? In this guide we cover everything you need to know about this Google ranking factor.","breadcrumb":{"@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#primaryimage","url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","contentUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","width":1200,"height":627},{"@type":"BreadcrumbList","@id":"https:\/\/www.seobility.net\/en\/blog\/core-web-vitals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.seobility.net\/en\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Everything You Need To Know","item":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/posts\/3217\/"}]},{"@type":"WebSite","@id":"https:\/\/www.seobility.net\/en\/#website","url":"https:\/\/www.seobility.net\/en\/","name":"Seobility","description":"Online SEO Software &amp; Tools For Better Rankings","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.seobility.net\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.seobility.net\/en\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25","name":"David McSweeney","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","contentUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","caption":"David McSweeney"},"description":"David combines 20+ years of experience in SEO with the passion for teaching people how to optimize their websites the right way. Unsurprisingly he loves SEO and writing. That's why David focuses on the particularly advanced SEO topics on the Seobility blog.","url":"https:\/\/www.seobility.net\/en\/blog\/author\/david-mcsweeney\/"}]}},"_links":{"self":[{"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/posts\/3217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/comments?post=3217"}],"version-history":[{"count":0,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/posts\/3217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/media\/4881"}],"wp:attachment":[{"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/media?parent=3217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/categories?post=3217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.seobility.net\/en\/wp-json\/wp\/v2\/tags?post=3217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}