{"id":35381,"date":"2024-10-10T07:20:41","date_gmt":"2024-10-10T11:20:41","guid":{"rendered":"https:\/\/www.eginnovations.com\/blog\/?p=35381"},"modified":"2024-10-24T09:18:32","modified_gmt":"2024-10-24T13:18:32","slug":"understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience","status":"publish","type":"post","link":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/","title":{"rendered":"Understanding Core Web Vitals &#8211; Key Metrics for Optimizing Your Website for Better User Experience"},"content":{"rendered":"<div class=\"inner_content\">\n<h2 style=\"color: #f29305;\"><span class=\"ez-toc-section\" id=\"Introduction_to_Googles_Core_Web_Vitals_Metrics\"><\/span>Introduction to Google\u2019s Core Web Vitals Metrics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_Are_Core_Web_Vitals\"><\/span>What Are Core Web Vitals?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">Core Web Vitals are a set of performance metrics <a class=\"link\" href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/core-web-vitals\" target=\"blank\" rel=\"noopener\">introduced by Google<\/a> to help website owners and developers improve the user experience. These metrics are:<\/p>\n<ul>\n<li>Largest Contentful Paint (LCP)<\/li>\n<li>First Input Delay (FID)<\/li>\n<li>Cumulative Layout Shift (CLS)<\/li>\n<li>Interaction to Next Paint (INP) (<a class=\"link\" href=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" target=\"blank\" rel=\"noopener\">Recently replaced FID<\/a>)<\/li>\n<\/ul>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">&#8220;Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience.&#8221; \u2014 Google.<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35428 size-full\" style=\"width: 700px;\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals.png\" alt=\"Image overviewing the Core Web Vitals metrics - LCP, FID, CLS and INP\" width=\"850\" height=\"850\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals.png 850w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-300x300.png 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-150x150.png 150w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-768x768.png 768w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-800x800.png 800w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-310x310.png 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-140x140.png 140w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_Core_Web_Vitals_Impact_SEO_and_User_Satisfaction\"><\/span>How Core Web Vitals Impact SEO and User Satisfaction<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google\u2019s Core Web Vitals are key metrics that measure the quality of user experience on your website. These metrics focus on three primary aspects: loading performance, interactivity, and visual stability.<\/p>\n<p>For B2B websites, even without relying heavily on search automation, optimizing Core Web Vitals is still important. A faster, smoother user experience builds trust and encourages engagement with business users.<\/p>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">\n<p style=\"margin-bottom: 15px;\"><strong>John Mueller, Webmaster Trends Analyst at Google<\/strong><\/p>\n<p style=\"margin-bottom: 5px;\">&#8220;Core Web Vitals are part of the experience that helps people stick around on your site, engage with your content, and ideally convert. It\u2019s not just for SEO; it\u2019s good for users.&#8221;<\/p>\n<\/div>\n<p>For B2C websites, where SEO is a priority, Core Web Vitals have a direct impact on your site&#8217;s visibility and Google rankings. By improving these metrics, users are more likely to find your site, stay longer, and enjoy a better overall experience.<\/p>\n<p><a href=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1_zoom.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35408 size-full\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1-2.webp\" alt=\"Image showing site traffic and page load times in the eG Enterprise console to explain how metrics like Core Web Vitals need to be monitored\" width=\"750\" height=\"477\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1-2.webp 750w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1-2-300x191.webp 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1-2-310x197.webp 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-1-2-140x89.webp 140w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<div class=\"img_caption\">Figure 1: Page views often drop if page load times increase, and users become frustrated<\/div>\n<h2 style=\"color: #f29305;\"><span class=\"ez-toc-section\" id=\"Understanding_the_Key_Core_Web_Vitals_Metrics\"><\/span>Understanding the Key Core Web Vitals Metrics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Largest_Contentful_Paint_LCP_-_What_is_LCP\"><\/span>Largest Contentful Paint (LCP) &#8211; What is LCP?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Largest Contentful Paint (LCP) measures the time it takes for the largest visible content element in the viewport to load. This could be an image, video, or a large block of text. LCP is a key measure because it reflects the loading performance of your site and directly impacts user satisfaction. A faster LCP means users can start engaging with your content sooner. Largest Contentful Paint aims to measure when the page&#8217;s main contents have finished loading.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"First_Input_Delay_FID_-_What_is_FID\"><\/span>First Input Delay (FID) &#8211; What is FID?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First Input Delay (FID) measures the time it takes for a page to respond to the first user interaction, such as clicking a button or a link. FID is essential for interactivity; a low FID ensures that users can interact with your page without frustrating delays. FID was replaced in the Core Website Vitals by INP in 2024 (see: <a class=\"link\" href=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" target=\"blank\" rel=\"noopener\">Introducing INP to Core Web Vitals | Google Search Central Blog | Google for Developers<\/a>).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Cumulative_Layout_Shift_CLS_-_What_is_CLS\"><\/span>Cumulative Layout Shift (CLS) &#8211; What is CLS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Cumulative Layout Shift (CLS) measures the visual stability of your webpage by tracking how often and how much visible elements unexpectedly shift during page loading. A high CLS score can lead to a poor user experience, as users may accidentally click on the wrong element due to unexpected shifts.<\/p>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">\n<p style=\"margin-bottom: 15px; font-weight: bold;\">Paul Irish, Developer Advocate at Google Chrome<\/p>\n<p style=\"margin-bottom: 5px;\">&#8220;Largest Contentful Paint and Cumulative Layout Shift reflect the two most visible parts of the page load experience. They give you real insight into how users experience your site.&#8221;<\/p>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"New_Metric_Interaction_to_Next_Paint_INP_-_What_is_INP\"><\/span>New Metric: Interaction to Next Paint (INP) &#8211; What is INP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div style=\"padding: 20px; border: 1px solid #ffd392; background: #fcf8ef; text-align: justify; margin-bottom: 30px;\">\n<p style=\"margin-bottom: 10px; font-weight: bold;\">What is an \u201cinteraction\u201d in the context of INP?<\/p>\n<p style=\"margin-bottom: 10px;\">When calculating INP, only the following interaction types are included:<\/p>\n<ul style=\"margin-bottom: 10px;\">\n<li>Clicking with a mouse.<\/li>\n<li>Tapping on a device with a touchscreen.<\/li>\n<li>Pressing a key on either a physical or onscreen keyboard.<\/li>\n<\/ul>\n<p style=\"margin-bottom: 5px;\">Interactions such as users hovering, zooming, or scrolling are currently not observed.<\/p>\n<\/div>\n<p>Interaction to Next Paint (INP) is <a class=\"link\" href=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" target=\"blank\" rel=\"noopener\">a metric that replaced FID.<\/a> Unlike FID, which measures the delay of the first interaction, INP evaluates the latency of all interactions throughout the lifecycle of a page. Since it is generally accepted that 90% of the time a user spends on a web page is after it has loaded, INP is intended to provide a more comprehensive picture of your site\u2019s interactivity and responsiveness for real users.<\/p>\n<p>A high INP suggests the site feels clunky or unresponsive, making it frustrating for users, while a low INP means the site responds quickly and smoothly to interactions.<\/p>\n<p><a href=\"https:\/\/www.eginnovations.com\/white-paper\/top-10-requirements-for-performance-monitoring-of-cloud-applications-and-infrastructures\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35440\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner.jpg\" alt=\"\" width=\"850\" height=\"180\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner.jpg 850w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner-300x64.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner-768x163.jpg 768w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner-800x169.jpg 800w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner-310x66.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/banner-140x30.jpg 140w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Key_Differences_Between_FID_and_INP\"><\/span>Key Differences Between FID and INP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">The key differences between First Input Delay (FID) and Interaction to Next Paint (INP) lie in what they measure and when they measure it:<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>1. What They Measure :<\/strong><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>FID :<\/strong> Measures input delay\u2014the time between a user&#8217;s first interaction (click, tap, etc.) and when the browser responds. It focuses on the initial delay before the interaction is processed.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>INP :<\/strong> Measures responsiveness across all interactions on a page, not just the first one. It tracks how quickly the page visually responds after every interaction, capturing the full user experience.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>2. When They Measure :<\/strong><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>FID :<\/strong> Only measures the first interaction after the page starts loading. Once that first interaction is recorded, it does not track subsequent interactions.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>INP :<\/strong> Monitors all interactions throughout the entire user session. It reflects how consistently responsive the page is over time by focusing on the interaction that took the longest to process.<\/p>\n<div style=\"padding: 20px; border: 1px solid #ffd392; background: #fcf8ef; text-align: justify; margin-bottom: 30px;\">\n<p style=\"margin-bottom: 15px; font-weight: bold;\">What is a Rage Click?<\/p>\n<p style=\"margin-bottom: 5px;\">A rage click is when a user rapidly clicks on the same spot or element on a webpage out of frustration, usually because the site isn&#8217;t responding or functioning as expected. This behavior indicates that something is broken, confusing, or too slow, leading users to repeatedly try interacting with the element in hopes of a response. Rage clicks are a sign of poor user experience and often point to issues like slow loading times, hidden content, or malfunctioning buttons or links. Monitoring rage clicks can help identify and fix these frustrations to improve usability. Rage clicking often correlates with poor INP values.<\/p>\n<\/div>\n<p style=\"margin-bottom: 15px;\"><strong>3. Scope :<\/strong><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>FID :<\/strong> Limited to the first input delay after the page becomes interactive. It&#8217;s more about the initial perception of page responsiveness.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>INP :<\/strong> Provides a broader, more comprehensive view of overall page responsiveness, tracking multiple interactions and visual updates during the user&#8217;s entire session.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>4. Use Cases :<\/strong><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>FID :<\/strong> Helps improve the early stages of page loading, making sure the first interaction isn&#8217;t delayed by tasks like heavy JavaScript execution.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>INP :<\/strong> Evaluates the quality of the user&#8217;s experience throughout their time on the page, ensuring that interactions beyond the initial load are also fast and smooth.<\/p>\n<p>In summary, FID is focused on the first input during page load, while INP gives a more complete picture by assessing the responsiveness of all interactions on the page.<br \/>\nFID can be misleading if only the first input is fast but subsequent interactions are slow, INP reflects the true interactivity of a page by capturing multiple interaction events, making it a better indicator of overall performance.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Summary_of_Differences_between_INP_and_FID\"><\/span>Summary of Differences between INP and FID<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">The primary difference between INP and FID lies in how they measure responsiveness:<\/p>\n<ul>\n<li>FID measures only the delay before an interaction starts being processed (the time from when a user first interacts to when the browser can begin handling the interaction).<\/li>\n<li>INP, however, measures the entire interaction process, focusing not just on the initial delay but also on how long it takes for the page to provide visual feedback or respond fully after any interaction. This means INP includes factors like the completion of the response to a user\u2019s input.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Whats_new_about_INP\"><\/span>What&#8217;s new about INP:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">Your key takeaways should be:<\/p>\n<ul>\n<li>INP measures the full duration of interaction, not just the delay before it starts (unlike FID).<\/li>\n<li>INP captures delays that users experience throughout the interaction cycle, while FID focuses only on the beginning.<\/li>\n<\/ul>\n<p>Therefore, while FID looks at when the browser is ready to respond, INP evaluates the overall user experience, making it more holistic.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35430 size-full\" style=\"width: 800px;\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp.png\" alt=\"Venn diagram explaining the overlap and differences of the Core Web Vitals INP and FID\" width=\"850\" height=\"669\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp.png 850w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp-300x236.png 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp-768x604.png 768w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp-800x630.png 800w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp-310x244.png 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/about-inp-140x110.png 140w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/p>\n<div class=\"img_caption\">Figure 2: FID is solely concerned with the initial lag before the browser can begin processing the user&#8217;s first interaction.<br \/>\nINP covers the entirety of each interaction, from start to finish, including all visual feedback or user-perceived delays.<\/div>\n<h3><span class=\"ez-toc-section\" id=\"What_is_FCP_How_does_FCP_differ_to_LCP\"><\/span>What is FCP? How does FCP differ to LCP?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page&#8217;s content is rendered on the screen. For this metric, &#8220;content&#8221; refers to text, images (including background images), svg elements, or non-white canvas elements. In contrast, Largest Contentful Paint (LCP) aims to measure when the page&#8217;s main contents have finished loading.<\/p>\n<p>First Contentful Paint is considered an important, user-centric metric as it measures the first point in the page load timeline where the user can see anything happening upon the screen &#8211; a fast FCP makes it more likely the user will stay on your website and a slow FCP will encourage users to abandon the site.<\/p>\n<p>Because FCP only captures the very start of the web page loading experience it means that it can be somewhat meaningless in scenarios when a page shows a splash screen \/ pop-up (interstitial) or displays a loading indicator.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Best_Practices_for_Optimizing_Core_Web_Vitals_Metrics\"><\/span>Best Practices for Optimizing Core Web Vitals Metrics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I\u2019ll now cover some information as to how you can improve your Core Web Vital scores and what a good Core Vital score for each metric is.<\/p>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">&#8220;Optimizing for these factors makes the web more delightful for users across all web browsers and surfaces.&#8221; \u2014 Google.<\/div>\n<h3><span class=\"ez-toc-section\" id=\"How_to_optimize_LCP\"><\/span>How to optimize LCP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">Here are some optimization tips for LCP:<\/p>\n<ol>\n<li><strong>Remove unnecessary third-party scripts:<\/strong><br \/>\nAds, analytics, video embeds, and widgets can drastically slow down your page. Audit and remove scripts that do not add value to the page experience.<\/li>\n<li><strong>Upgrade your web host or use a CDN:<\/strong><br \/>\nFaster servers or a content delivery network (CDN) can significantly reduce LCP by lowering the time it takes for content to be delivered to the browser.<\/li>\n<li><strong>Use lazy loading:<\/strong><br \/>\nDefer loading of non-critical images or media until the user scrolls to them. Ensure you do not lazy load above-the-fold content, as this can delay important visual elements. Avoid lazy loading critical elements like hero images, as this can delay LCP and hurt performance.<\/li>\n<li><strong>Prioritize Image Loading:<\/strong><br \/>\nEnsure images load before rendering tasks to improve LCP. Use fetchpriority, apply fetchpriority=high to load LCP images sooner. Preload critical resources &#8211; use link rel=preload to fetch important resources early.<\/li>\n<li><strong>Optimize large page elements (images, videos):<\/strong><br \/>\nCompress images and video files to reduce load time, prioritize large images (&gt;10,000px\u00b2) for faster LCP. Use modern formats like WebP for images and serve different sizes depending on the device resolution. Progressive JPEGs may delay full image loading and negatively impact LCP. Don\u2019t Use Low-Entropy Images for LCP &#8211; exclude low-content images, such as simple backgrounds, from being LCP candidates.<\/li>\n<li><strong>Minify and optimize CSS and JavaScript:<\/strong><br \/>\nRemove unnecessary spaces, indentations, comments, and unused code from CSS and JavaScript files. Ensure that these resources are lightweight to avoid long rendering times.<\/li>\n<li><strong>Enable preloading of important resources:<\/strong><br \/>\nBy preloading the most important CSS, fonts, or large elements, you ensure faster rendering and load time for the main content.<\/li>\n<li><strong>Reuse Server Connections:<\/strong><br \/>\nServe critical resources from the same domain to avoid DNS lookups and handshakes. Avoid additional server connections that slow down resource loading.<\/li>\n<li><strong>Use 103 Early Hints:<\/strong><br \/>\nPreload resources while waiting for the server\u2019s full response.<\/li>\n<\/ol>\n<p>An incredibly useful and detailed guide to optimizing LCP is also available from Google Engineers Philip Walton and Barry Pollard, covering JavaScript and html level changes you can make to improve performance, see: <a class=\"link\" href=\"https:\/\/web.dev\/articles\/optimize-lcp\" target=\"blank\" rel=\"noopener\">Optimize Largest Contentful Paint | Articles | web.dev.<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_Value_of_LCP_should_I_Look_to_Achieve\"><\/span>What Value of LCP should I Look to Achieve?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Good: \u2264 2.5 seconds<\/li>\n<li>Needs Improvement: 2.5 &#8211; 4.0 seconds<\/li>\n<li>Poor: &gt; 4.0 seconds<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35417\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/LCP.jpg\" alt=\"\" width=\"600\" height=\"124\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/LCP.jpg 600w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/LCP-300x62.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/LCP-310x64.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/LCP-140x29.jpg 140w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><a href=\"https:\/\/www.eginnovations.com\/ebooks\/application-performance-management-vendor-comparison\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35223\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1.jpg\" alt=\"\" width=\"850\" height=\"180\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1.jpg 850w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1-300x64.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1-768x163.jpg 768w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1-800x169.jpg 800w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1-310x66.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/banner-1-140x30.jpg 140w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Key_Strategies_to_Reduce_FID\"><\/span>Key Strategies to Reduce FID<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"margin-bottom: 15px;\">Some best practices to optimize the FID metric, include:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><strong>Defer or break down JavaScript<\/strong>:<br \/>\nAs JavaScript is single-threaded, any heavy scripts block the browser from responding to user interactions. Defer non-essential scripts and split large JavaScript files into smaller, more manageable chunks. Use Web Workers &#8211; offload intensive tasks (e.g., complex calculations, data processing) to Web Workers, which run in the background and free up the main thread.<\/li>\n<li><strong>Use browser caching:<\/strong><br \/>\nBrowser caching stores reusable resources like JavaScript and CSS files locally, so subsequent page visits load faster, reducing the time to interaction.<\/li>\n<li><strong>Remove non-essential third-party scripts:<\/strong><br \/>\nLike in LCP, unnecessary third-party scripts can delay browser response. Remove or asynchronously load non-critical scripts to free up the main thread.<\/li>\n<li><strong>Optimize the order of script execution:<\/strong><br \/>\nPrioritize loading scripts that impact user interaction first. Non-essential scripts (like those for ads or analytics) should be deferred until the browser becomes interactive, lazy loading can be used (learn more: <a class=\"link\" href=\"https:\/\/fzn0x.medium.com\/three-types-of-lazy-loading-in-javascript-with-example-8534cb2c6fd2\" target=\"blank\" rel=\"noopener\">Three Types of Lazy Loading in JavaScript with example | by Muhammad Fauzan | Medium<\/a>).<\/li>\n<li><strong>Reduce the impact of large JavaScript bundles:<\/strong><br \/>\n<a class=\"link\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Tree_shaking\" target=\"blank\" rel=\"noopener\">Tree-shake JavaScript code<\/a> and use performance-optimized libraries. Tree shaking is a methodology to remove dead code. This reduces the amount of script that needs to be parsed and executed on page load.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><strong>Note:<\/strong> FID (First Input Delay) has recently (Spring 2024) been replaced in the Core Web Vitals set of metrics by INP (Interaction to Next Paint) because INP provides a more comprehensive measure of responsiveness, capturing all interactions, not just the first one.<\/p>\n<p style=\"margin-bottom: 15px;\"><strong>Understanding Metric Thresholds for FID<\/strong><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Good: \u2264 100 milliseconds<\/li>\n<li>Needs Improvement: 100 &#8211; 300 milliseconds<\/li>\n<li>Poor: &gt; 300 milliseconds<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35418 size-full\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/FID.jpg\" alt=\"graphic showing ideal values for the Core Web Vitals metric Frist Input Delay (FID)\" width=\"519\" height=\"124\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/FID.jpg 519w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/FID-300x72.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/FID-310x74.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/FID-140x33.jpg 140w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_to_Reduce_CLS\"><\/span>How to Reduce CLS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">If you are looking to optimize the CLS score of your web pages, some practical tips for improving CLS include:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><strong>Set size attribute dimensions for all media (images, videos, iframes):<\/strong><br \/>\nAssigning width and height attributes to media ensures the browser knows how much space to allocate, preventing layout shifts during page load.<\/li>\n<li><strong>Reserve space for dynamic content (ads, banners, etc.):<\/strong><br \/>\nAd scripts and other dynamic elements can cause significant layout shifts. Set aside dedicated space in the layout for these elements to load, even before they appear.<\/li>\n<li><strong>Preload key fonts and resources:<\/strong><br \/>\nFonts that load late or asynchronously can cause text to shift when they finally render. Preload critical fonts and assets to stabilize layout quicker.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div style=\"padding: 20px; border: 1px solid #ffd392; background: #fcf8ef; text-align: justify; margin-bottom: 30px;\">\n<p style=\"margin-bottom: 15px;\"><strong>What is an Interstitial Web Page?<\/strong><\/p>\n<p style=\"margin-bottom: 5px;\">An interstitial webpage (or interstitial) is a web page displayed before or after an expected content page, interstitials often to display advertising or for regulatory reasons (e.g. GDPR), such as to confirm the user&#8217;s age (prior to showing age-restricted material) or obtain consent to store cookies. Most interstitial advertisements are delivered by an ad server.<\/p>\n<\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><strong>Avoid inserting content above existing content:<\/strong><br \/>\nIf dynamic elements, like pop-ups or interstitials, are necessary, place them below the fold to avoid displacing critical content and impacting the CLS score.<\/li>\n<li><strong>Optimize CSS for animations:<\/strong><br \/>\nAvoid abrupt, poorly planned CSS animations or placing CSS inside JavaScript, which could delay the page&#8217;s rendering. Follow best practices for clean, lightweight CSS.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Google engineering also offer a detailed guide to optimizing CLS with JavaScript code and mark-up level details, see: <a class=\"link\" href=\"https:\/\/web.dev\/articles\/optimize-cls\" target=\"blank\" rel=\"noopener\">Optimize Cumulative Layout Shift | Articles | web.dev.<\/a><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>Metric Thresholds for CLS<\/strong><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Good: \u2264 0.1<\/li>\n<li>Needs Improvement: 0.1 &#8211; 0.25<\/li>\n<li>Poor: &gt; 0.25<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35410 size-full\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/CLS.jpg\" alt=\"graphic showing ideal values for the Core Web Vitals metric CLS (Cumulative Layout Shift)\" width=\"590\" height=\"124\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/CLS.jpg 590w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/CLS-300x63.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/CLS-310x65.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/CLS-140x29.jpg 140w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_to_Optimize_INP\"><\/span>How to Optimize INP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">It is important to look at optimizations associated both with JavaScript but also with rendering efficiency.<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><strong>Optimize long tasks<\/strong>. You fundamentally want to avoid blocking the main thread. Yield to the main thread for critical, user-facing tasks. Investigate prioritizing tasks with postTask() and evaluate the use of scheduler.yield().<\/li>\n<li><strong>Optimize input delay.<\/strong> Input delay is the period of time beginning from when the user first interacts with a page\u2014such as tapping on a screen, clicking with a mouse, or pressing a key\u2014up to when the event callbacks for the interaction begin to run. Every interaction begins with some amount of input delay. If input delay is contributing significantly to INP times, there are optimization options available.<\/li>\n<li><strong>Script evaluation and long tasks.<\/strong> Look to implement the advice given by Google engineering, see: <a class=\"link\" href=\"https:\/\/web.dev\/articles\/script-evaluation-and-long-tasks\" target=\"blank\" rel=\"noopener\">Script evaluation and long tasks | Articles | web.dev.<\/a><\/li>\n<li><strong>Use web workers<\/strong> to run JavaScript off the browser&#8217;s main thread. As with FID this can yield significant benefits.<\/li>\n<li><strong>Use content-visibility,<\/strong> defer rendering of off-screen elements for improved page responsiveness.<\/li>\n<li><strong>Avoid large, complex layouts and layout thrashing.<\/strong> Layout Thrashing happens when you request layout information of an element or the document, while layout is in an invalidated state. Layout costs are dependent on the number of elements that require layout, which is a byproduct of the page&#8217;s DOM size and the complexity of those layouts. Group multiple DOM changes using document fragments to reduce re-renders.<\/li>\n<li><strong>Preload critical resources.<\/strong> Ensure fonts, images, and other critical elements are loaded early to avoid layout shifts.<\/li>\n<li><strong>Don\u2019t break up above-the-fold CSS.<\/strong> Avoid lazy loading or splitting critical CSS, as it causes layout shifts.<\/li>\n<li><strong>Reserve space for lazy-loaded images:<\/strong> Avoid layout shifts by reserving space for images before they load.<\/li>\n<li><strong>Don\u2019t add excessive ads.<\/strong> Too many ads can affect page speed, especially on mobile, impacting INP and overall performance.<\/li>\n<li><strong>Reduce the scope and complexity of style calculations.<\/strong> Simplifying CSS selectors can help speed up your page&#8217;s style calculations. Warning: older browsers can be quite poor at handling selectors whilst many newer browsers have optimizations. If you are delivering web pages to the general public, who may well be using older browsers &#8211; you will probably want to ensure your QA reflects this.<\/li>\n<li><strong>Minimize DOM sizes.<\/strong> Large DOM sizes affect interactivity (I\u2019ve added a section below that explains DOM and its relationship to website performance). Always look to minimize the size of the DOM.<\/li>\n<li><strong>Investigate client-side rendering of HTML<\/strong> when troubleshooting interactivity issues. If your website depends heavily on client-side rendering and you have observed poor INP values in your field data. Techniques such as providing as much HTML from the server as possible and limiting the amount of DOM nodes created on the client can help.<\/li>\n<li><strong>Keep an eye on upcoming changes.<\/strong> Stay updated on Google\u2019s guidelines as INP becomes a more prominent metric, it is likely the optimization advice will change.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Again, Google engineering have a comprehensive guide for optimizing and troubleshooting INP metrics, see: <a class=\"link\" href=\"https:\/\/web.dev\/articles\/optimize-inp\" target=\"blank\" rel=\"noopener\">Optimize Interaction to Next Paint | Articles | web.dev.<\/a><\/p>\n<p style=\"margin-bottom: 15px;\"><strong>Target Values for the INP metric<\/strong><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Good: \u2264 200 milliseconds<\/li>\n<li>Needs Improvement: 200 &#8211; 500 milliseconds<\/li>\n<li>Poor: &gt; 500 milliseconds<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35416 size-full\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/INP.jpg\" alt=\"graphic showing ideal values for the Core Web Vitals metric INP (Interaction to Next Paint)\" width=\"598\" height=\"124\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/INP.jpg 598w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/INP-300x62.jpg 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/INP-310x64.jpg 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/INP-140x29.jpg 140w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/p>\n<p><a href=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-zoom-1.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35413 size-full\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-2.webp\" alt=\"eG Enterprise dashboard monitoring the Core Web Vitals - LCP, INP and CLS together\" width=\"750\" height=\"274\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-2.webp 750w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-2-300x110.webp 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-2-310x113.webp 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-2-2-140x51.webp 140w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<div class=\"img_caption\">Figure 3: Continually monitoring the Core Web Vitals metrics via dashboards with a tool such as eG Enterprise gives administrators useful insights<\/div>\n<p><a href=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-zoom-1.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35414\" src=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-2.webp\" alt=\"\" width=\"750\" height=\"184\" srcset=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-2.webp 750w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-2-300x74.webp 300w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-2-310x76.webp 310w, https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/09\/image-3-2-140x34.webp 140w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<div class=\"img_caption\">Figure 4: Core Web Vitals can be used to pinpoint individual web pages that would benefit from optimizations (screenshot from eG Enterprise\u2019s monitoring console)<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Understanding_the_DOM_and_Its_Role_in_Core_Web_Vitals\"><\/span>Understanding the DOM and Its Role in Core Web Vitals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Document Object Model (DOM) is a fundamental concept when discussing Core Web Vitals. The DOM is a programming interface that represents the structure of a webpage as a tree of objects, with each object corresponding to a part of the document, such as elements, attributes, and text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_the_DOM_Matters\"><\/span>Why the DOM Matters<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>Performance:<\/strong> The time it takes to parse the HTML and build the DOM directly impacts metrics including LCP and FCP (First Contentful Paint). A large, complex DOM can slow down the rendering process.<\/li>\n<li><strong>Interactivity:<\/strong> The responsiveness of the DOM, which includes how quickly it can respond to user input, affects metrics like FID and INP. A bloated DOM can lead to delays in interaction handling.<\/li>\n<li><strong>Visual Stability:<\/strong> Changes to the DOM can cause unexpected shifts in content, impacting the CLS score.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Optimizing_the_DOM\"><\/span>Optimizing the DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"margin-bottom: 15px;\">Some tips for optimizing the DOM to improve web page performance, include:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>Keep the DOM Lean:<\/strong> Avoid unnecessary elements and reduce the depth of the DOM tree.<\/li>\n<li><strong>Efficiently Manage DOM Updates:<\/strong> Batch updates to reduce reflows and repaints.<\/li>\n<li><strong>Use Virtual DOMs:<\/strong> Frameworks like React use a virtual DOM to minimize direct manipulations, improving performance.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>You can learn more about the history and specification details of the DOM in <a class=\"link\" href=\"https:\/\/en.wikipedia.org\/wiki\/Document_Object_Model\" target=\"block\" rel=\"noopener\">Document Object Model &#8211; Wikipedia<\/a>, <a class=\"link\" href=\"https:\/\/www.w3.org\/TR\/WD-DOM\/expanded-toc.html\" target=\"blank\" rel=\"noopener\">What is the DOM?<\/a> and <a class=\"link\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"blank\" rel=\"noopener\">Introduction to the DOM &#8211; Web APIs | MDN (mozilla.org).<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Next_Steps_-_Advanced_Analysis_and_Optimizations_for_Core_Web_Vitals\"><\/span>Next Steps \u2013 Advanced Analysis and Optimizations for Core Web Vitals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">\n<p style=\"margin-bottom: 15px; font-weight: bold;\">Barry Pollard, Web Performance Expert and Author<\/p>\n<p style=\"margin-bottom: 5px;\">&#8220;Measuring and improving Core Web Vitals is not a one-time effort. It should be part of a continuous process to ensure that your site consistently delivers a great user experience.&#8221;<\/p>\n<\/div>\n<p>Understanding Core Web Vitals at a granular level is crucial, and that\u2019s where multi-dimensional analysis comes in. By slicing and dicing data across various dimensions\u2014such as browser type, device, or geographic location\u2014you can uncover hidden performance issues that may only affect specific user segments. This approach allows for more targeted optimizations, ensuring a seamless experience for all users, no matter their setup or location.<\/p>\n<p>In the next blog, we will dive deeper into how multi-dimensional analysis can help you fine-tune your Core Web Vitals performance across different user environments.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusions_on_Core_Web_Vitals\"><\/span>Conclusions on Core Web Vitals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Continually monitoring Core Web Vitals is essential because they directly impact user experience and SEO rankings. Regular tracking helps identify performance issues that can degrade page load speed, interactivity, and visual stability. As user behavior, site content, and browser technologies evolve, ongoing monitoring ensures sites remain optimized, competitive, and compliant with Google&#8217;s search algorithms. It also helps you quickly detect and root cause issues so you can resolve them and address regressions or bottlenecks that could lead to higher bounce rates, lower engagement, and reduced conversions.<\/p>\n<div style=\"background: #eeeeee; color: #000; padding: 18px; margin-bottom: 30px; border-radius: 8px;\">\n<p style=\"margin-bottom: 15px;\"><strong>Addy Osmani, Engineering Manager at Google<\/strong><\/p>\n<p style=\"margin-bottom: 5px;\">&#8220;Core Web Vitals are the best proxy we\u2019ve ever had for user experience performance. It\u2019s not about optimizing for scores but about ensuring users feel your site is fast and responsive.&#8221;<\/p>\n<\/div>\n<p>However, the Core Web Vitals metrics often only act as a canary in a coal mine, i.e. as a symptom of an issue with the platform, hardware, networking and so on, that is serving up the web page. I\u2019ll be covering more on this (in future articles) and how to ensure slow web page tickets are diverted to the infrastructure or database teams if the problem actually lies in their remit.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Google\u2019s Core Web Vitals Metrics What Are Core Web Vitals? Core Web Vitals are a set of performance metrics introduced by Google to help website owners and developers improve the user experience. These metrics are: Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) Interaction to Next Paint (INP) (Recently [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":35492,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[371],"tags":[2254,2253,2255,1549,2256,292,1185,408,488],"class_list":["post-35381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-performance-monitoring-apm","tag-contentful-paint","tag-core-web-vitals","tag-javascript","tag-saas-monitoring","tag-seo-optimization","tag-web-application-monitoring","tag-web-optimization","tag-web-page-load-time","tag-web-site-slow"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Understanding Core Web Vitals - Key Metrics for Optimizing Your Website for Better User Experience | eG Innovations<\/title>\n<meta name=\"description\" content=\"How Core Web Vitals metrics - Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and the new Interaction to Next Paint (INP) affect website performance.\" \/>\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.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Core Web Vitals \u2013 Key Metrics for Optimizing Your Website for Better User Experience\" \/>\n<meta property=\"og:description\" content=\"Learn how Google\u2019s key Core Web Vitals metrics - Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and the recently introduced Interaction to Next Paint (INP) affect website performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"eG Innovations\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/eGInnovations\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-10T11:20:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-24T13:18:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-social-banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Arun Aravamudhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/x.com\/perfclarity\" \/>\n<meta name=\"twitter:site\" content=\"@eginnovations\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arun Aravamudhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Core Web Vitals - Key Metrics for Optimizing Your Website for Better User Experience | eG Innovations","description":"How Core Web Vitals metrics - Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and the new Interaction to Next Paint (INP) affect website performance.","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.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Core Web Vitals \u2013 Key Metrics for Optimizing Your Website for Better User Experience","og_description":"Learn how Google\u2019s key Core Web Vitals metrics - Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and the recently introduced Interaction to Next Paint (INP) affect website performance.","og_url":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/","og_site_name":"eG Innovations","article_publisher":"https:\/\/www.facebook.com\/eGInnovations","article_published_time":"2024-10-10T11:20:41+00:00","article_modified_time":"2024-10-24T13:18:32+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-social-banner.jpg","type":"image\/jpeg"}],"author":"Arun Aravamudhan","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/x.com\/perfclarity","twitter_site":"@eginnovations","twitter_misc":{"Written by":"Arun Aravamudhan","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#article","isPartOf":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/"},"author":{"name":"Arun Aravamudhan","@id":"https:\/\/www.eginnovations.com\/blog\/#\/schema\/person\/d788cb81df96a940429c3f5a3b294a6a"},"headline":"Understanding Core Web Vitals &#8211; Key Metrics for Optimizing Your Website for Better User Experience","datePublished":"2024-10-10T11:20:41+00:00","dateModified":"2024-10-24T13:18:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/"},"wordCount":3589,"publisher":{"@id":"https:\/\/www.eginnovations.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-Thumbnail-banner.jpg","keywords":["Contentful Paint","Core Web Vitals","JavaScript","SaaS monitoring","SEO Optimization","Web Application Monitoring","web optimization","Web page load time","Web site slow"],"articleSection":["Application Performance Monitoring (APM)"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/","url":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/","name":"Understanding Core Web Vitals - Key Metrics for Optimizing Your Website for Better User Experience | eG Innovations","isPartOf":{"@id":"https:\/\/www.eginnovations.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-Thumbnail-banner.jpg","datePublished":"2024-10-10T11:20:41+00:00","dateModified":"2024-10-24T13:18:32+00:00","description":"How Core Web Vitals metrics - Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and the new Interaction to Next Paint (INP) affect website performance.","breadcrumb":{"@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#primaryimage","url":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-Thumbnail-banner.jpg","contentUrl":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2024\/10\/Core-Web-Vitals-Thumbnail-banner.jpg","width":363,"height":236},{"@type":"BreadcrumbList","@id":"https:\/\/www.eginnovations.com\/blog\/understanding-core-web-vitals-key-metrics-for-optimizing-your-website-for-better-user-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eginnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Core Web Vitals &#8211; Key Metrics for Optimizing Your Website for Better User Experience"}]},{"@type":"WebSite","@id":"https:\/\/www.eginnovations.com\/blog\/#website","url":"https:\/\/www.eginnovations.com\/blog\/","name":"eG Innovations","description":"IT Performance Monitoring Insights","publisher":{"@id":"https:\/\/www.eginnovations.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eginnovations.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.eginnovations.com\/blog\/#organization","name":"eG Innovations","alternateName":"eg innovations","url":"https:\/\/www.eginnovations.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eginnovations.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2014\/07\/eg-logo-dark-gray1_new.jpg","contentUrl":"https:\/\/www.eginnovations.com\/blog\/wp-content\/uploads\/2014\/07\/eg-logo-dark-gray1_new.jpg","width":362,"height":235,"caption":"eG Innovations"},"image":{"@id":"https:\/\/www.eginnovations.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/eGInnovations","https:\/\/x.com\/eginnovations"]},{"@type":"Person","@id":"https:\/\/www.eginnovations.com\/blog\/#\/schema\/person\/d788cb81df96a940429c3f5a3b294a6a","name":"Arun Aravamudhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eginnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7ff42334d908fb4060880a4487331e4a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7ff42334d908fb4060880a4487331e4a?s=96&d=mm&r=g","caption":"Arun Aravamudhan"},"sameAs":["https:\/\/www.linkedin.com\/in\/arun-aravamudhan\/","https:\/\/x.com\/https:\/\/x.com\/perfclarity"],"url":"https:\/\/www.eginnovations.com\/blog\/author\/arun-aravamudhan\/"}]}},"modified_by":"eG Innovations","_links":{"self":[{"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/posts\/35381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=35381"}],"version-history":[{"count":0,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/posts\/35381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/media\/35492"}],"wp:attachment":[{"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=35381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=35381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eginnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=35381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}