{"id":611378,"date":"2024-03-05T15:00:00","date_gmt":"2024-03-05T12:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/"},"modified":"2024-03-05T15:00:00","modified_gmt":"2024-03-05T12:00:00","slug":"how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/","title":{"rendered":"#How to optimize Google Core Web Vitals with real user data by DebugBear"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a27147952370\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a27147952370\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Collecting_data_on_visitor_experiences_on_your_website_can_help_you_pass_Googles_Core_Web_Vitals_assessment_and_the_new_Interaction_to_Next_Paint_metric\" >Collecting data on visitor experiences on your website can help you pass Google\u2019s Core Web Vitals assessment and the new Interaction to Next Paint metric.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Whats_the_difference_between_lab_data_and_real_user_data\" >What\u2019s the difference between lab data and real user data?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Why_is_real_user_data_important_to_improve_your_Core_Web_Vitals\" >Why is real user data important to improve your Core Web Vitals?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#How_to_collect_real_user_Core_Web_Vitals_data\" >How to collect real user Core Web Vitals data<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#How_to_decide_what_pages_to_optimize\" >How to decide what pages to optimize<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Improve_Largest_Contentful_Paint_with_real_user_data\" >Improve Largest Contentful Paint with real user data<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#See_what_page_elements_are_responsible_for_the_Largest_Contentful_Paint\" >See what page elements are responsible for the Largest Contentful Paint<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Reduce_render-blocking_resources\" >Reduce render-blocking resources<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Optimize_LCP_Images\" >Optimize LCP Images<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Improve_Interaction_to_Next_Paint_with_real_user_data\" >Improve Interaction to Next Paint with real user data<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Identifying_code_thats_causing_slow_interactions\" >Identifying code that\u2019s causing slow interactions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#When_do_slow_interactions_happen_on_the_page\" >When do slow interactions happen on the page?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Improve_Cumulative_Layout_Shift_with_real_user_data\" >Improve Cumulative Layout Shift with real user data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Whats_the_difference_between_real_user_monitoring_RUM_and_Google_CrUX_data\" >What\u2019s the difference between real user monitoring (RUM) and Google CrUX data?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-optimize-google-core-web-vitals-with-real-user-data-by-debugbear\/#Get_started_with_real_user_Core_Web_Vitals_monitoring\" >Get started with real user Core Web Vitals monitoring<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"subhead\" itemprop=\"alternativeHeadline\"><span class=\"ez-toc-section\" id=\"Collecting_data_on_visitor_experiences_on_your_website_can_help_you_pass_Googles_Core_Web_Vitals_assessment_and_the_new_Interaction_to_Next_Paint_metric\"><\/span>Collecting data on visitor experiences on your website can help you pass Google\u2019s Core Web Vitals assessment and the new Interaction to Next Paint metric.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<div class=\"bialty-container\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" alt=\"Header Image\" class=\"wp-image-438035\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-800x450.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-600x338.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-200x113.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-768x432.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-1536x864.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image.png.webp 1920w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-800x450.png.webp\"><noscript><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-800x450.png.webp\" alt=\"Header Image\" class=\"wp-image-438035\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-800x450.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-600x338.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-200x113.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-768x432.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image-1536x864.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image.png.webp 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<p>Google\u2019s Core Web Vitals have been a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/core-web-vitals-ranking-factor?utm_campaign=sel-3\">ranking signal<\/a> since 2021 when Google introduced three metrics to measure the quality of user experiences on a website.<\/p>\n<p>Real user monitoring data can tell you how well you do on Core Web Vitals and what you can do to improve them. This <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lies especially to the new <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/interaction-to-next-paint?utm_campaign=sel-3\">Interaction to Next Paint<\/a> (INP) metric that becomes one of the Core Web Vitals on March 12, 2024.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-what-s-the-difference-between-lab-data-and-real-user-data\"><span class=\"ez-toc-section\" id=\"Whats_the_difference_between_lab_data_and_real_user_data\"><\/span><a><\/a>What\u2019s the difference between lab data and real user data?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When measuring web performance, we can look at either lab data (also called synthetic data) or real user data (also called field data).<\/p>\n<p><!-- \/1038259\/SEL_Post-text --><\/p>\n<div id=\"div-gpt-ad-1693000027709-0\"><\/div>\n<div id=\"post-break\"><\/div>\n<p>Lab data is collected in a controlled test environment. It tells you how fast your website loads from a given test location, with a given network connection and a specific test device. That makes it very consistent between tests, and the reporting can be very detailed as testing tools have full control over the test environment. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lighthouse-page-speed?utm_campaign=sel-3\">Lighthouse<\/a> is an example of a synthetic testing tool.<\/p>\n<p>In contrast, real user data is collected from visitors when they go to your website. Each visitor will have a different experience depending on where they are located, how fast their internet connection is and what kind of device they are using. So when looking at a metric we need to look at a statistical average like the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/rum\/percentiles?utm_campaign=sel-3\">75th percentile<\/a> that is commonly used when reporting Core Web Vitals data.<\/p>\n<p>You\u2019ll often see that the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lighthouse-lab-data-not-matching-field-data?utm_campaign=sel-3\">metric values don\u2019t match between lab and field data<\/a>. Ultimately what you care about is real user experience, but synthetic data can provide a lot more depth to help you understand and improve your page speed.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" alt=\"Real user Core Web Vitals data and Lighthouse lab data in PageSpeed Insights\" class=\"wp-image-438057\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-800x489.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-553x338.png.webp 553w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-185x113.png.webp 185w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-768x469.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1.png.webp 1021w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-800x489.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-800x489.png.webp\" alt=\"Real user Core Web Vitals data and Lighthouse lab data in PageSpeed Insights\" class=\"wp-image-438057\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-800x489.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-553x338.png.webp 553w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-185x113.png.webp 185w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1-768x469.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image1.png.webp 1021w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-why-is-real-user-data-important-to-improve-your-core-web-vitals\"><span class=\"ez-toc-section\" id=\"Why_is_real_user_data_important_to_improve_your_Core_Web_Vitals\"><\/span>Why is real user data important to improve your Core Web Vitals?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/test\/website-speed?utm_campaign=sel-3\">Running a lab-based page speed test<\/a> is great to analyze the initial load speed of your website. But other metrics depend on how users interact with the page once it\u2019s been opened.<\/p>\n<p>This applies especially to the new Interaction to Next Paint metric. Your INP score depends on what page elements users are interacting with, and at what point during the page load process these interactions happen.<\/p>\n<p>While <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/cumulative-layout-shift?utm_campaign=sel-3\">Cumulative Layout Shift<\/a> (CLS) may occur during the initial page load, it often happens in response to a user interaction or when scrolling down a page. If you only collect data in a synthetic \u00a0environment, you\u2019ll miss these layout shifts that happen later on in the lifetime of a website visit.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-how-to-collect-real-user-core-web-vitals-data\"><span class=\"ez-toc-section\" id=\"How_to_collect_real_user_Core_Web_Vitals_data\"><\/span><a><\/a>How to collect real user Core Web Vitals data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A real user monitoring (RUM) solution like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/real-user-monitoring?utm_campaign=sel-3\">DebugBear<\/a> can help you collect Core Web Vitals data on your visitors. You set up an analytics snippet on your website and this data is then aggregated and shown in a Core Web Vitals dashboard.<\/p>\n<p>You can see whether any of your most visited pages are slow and how user experience varies based on the location of your visitors.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"736\" height=\"600\" alt=\"DebugBear real user Core Web Vitals dashboard\" class=\"wp-image-438058\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-736x600.png.webp 736w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-414x338.png.webp 414w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-139x113.png.webp 139w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-768x626.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2.png.webp 1150w\" data-lazy-sizes=\"(max-width: 736px) 100vw, 736px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-736x600.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"736\" height=\"600\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-736x600.png.webp\" alt=\"DebugBear real user Core Web Vitals dashboard\" class=\"wp-image-438058\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-736x600.png.webp 736w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-414x338.png.webp 414w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-139x113.png.webp 139w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2-768x626.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image2.png.webp 1150w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\"><\/noscript><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\" id=\"h-how-to-decide-what-pages-to-optimize\"><span class=\"ez-toc-section\" id=\"How_to_decide_what_pages_to_optimize\"><\/span>How to decide what pages to optimize<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To begin with, check if any of your most popular pages are failing the Core Web Vitals assessment. You can also use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/search-console-core-web-vitals?utm_campaign=sel-3\">Google Search Console<\/a> to identify pages with poor user experience on your website.<\/p>\n<p>Once you\u2019ve identified a page you can dive more deeply into analyzing your RUM data and finding ways to improve.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-improve-largest-contentful-paint-with-real-user-data\"><span class=\"ez-toc-section\" id=\"Improve_Largest_Contentful_Paint_with_real_user_data\"><\/span><a><\/a>Improve Largest Contentful Paint with real user data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Real user monitoring data for a page can help you understand the impact various performance optimizations would have.<\/p>\n<p><strong>LCP Optimization Potential<\/strong> analysis shows what you need to optimize to improve LCP:<\/p>\n<ul>\n<li>Time to First Byte (TTFB): This component looks at how quickly the server responds to the HTML request.<\/li>\n<li>First Contentful Paint (FCP): This tells you whether there are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/render-blocking-resources?utm_campaign=sel-3\">render-blocking resources<\/a> that prevent page content from appearing.<\/li>\n<li>LCP: This shows how long it takes for the LCP element to show up after the page first renders<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"382\" alt=\"DebugBear Largest Contentful Paint dashboard for a specific page on a website\" class=\"wp-image-438059\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-800x382.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-600x286.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-768x366.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3.png.webp 828w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-800x382.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"382\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-800x382.png.webp\" alt=\"DebugBear Largest Contentful Paint dashboard for a specific page on a website\" class=\"wp-image-438059\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-800x382.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-600x286.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3-768x366.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image3.png.webp 828w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\" id=\"h-see-what-page-elements-are-responsible-for-the-largest-contentful-paint\"><span class=\"ez-toc-section\" id=\"See_what_page_elements_are_responsible_for_the_Largest_Contentful_Paint\"><\/span>See what page elements are responsible for the Largest Contentful Paint<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Different visitors viewing the same page will see different content when the page first loads. The largest content element varies between desktop and mobile users and between logged-in and logged-out users.<\/p>\n<p>Analyzing what page elements most often end up as the LCP element helps you understand what optimizations will help the largest number of users. It also lets you see if there are some LCP elements that result in particularly poor LCP scores.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"573\" alt=\"LCP Element breakdown\" class=\"wp-image-438060\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-800x573.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-472x338.png.webp 472w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-158x113.png.webp 158w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-768x550.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4.png.webp 892w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-800x573.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"573\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-800x573.png.webp\" alt=\"LCP Element breakdown\" class=\"wp-image-438060\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-800x573.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-472x338.png.webp 472w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-158x113.png.webp 158w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4-768x550.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image4.png.webp 892w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\" id=\"h-reduce-render-blocking-resources\"><span class=\"ez-toc-section\" id=\"Reduce_render-blocking_resources\"><\/span>Reduce render-blocking resources<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If the First Contentful Paint component contributes a significant amount of time to your LCP score you need to see what can be done to make your website render earlier.<\/p>\n<p>Tools like DebugBear and others tell you what the last render-blocking request is for each page view. If you load this resource more quickly then the First Contentful Paint will happen sooner.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"308\" alt=\"List of render-blocking resources on a website\" class=\"wp-image-438061\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-800x308.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-600x231.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-200x77.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-768x295.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5.png.webp 809w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-800x308.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"308\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-800x308.png.webp\" alt=\"List of render-blocking resources on a website\" class=\"wp-image-438061\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-800x308.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-600x231.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-200x77.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5-768x295.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-image5.png.webp 809w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\" id=\"h-optimize-lcp-images\"><span class=\"ez-toc-section\" id=\"Optimize_LCP_Images\"><\/span><a><\/a>Optimize LCP Images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <strong>LCP Element<\/strong> breakdown tells us what type of element is responsible for the LCP for different users. Here the analysis shows us that a background image is responsible for the Largest Contentful Paint 96% of the time. That means we should focus on loading that image more quickly.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"472\" alt=\"LCP image analysis based on real user data in DebugBear\" class=\"wp-image-438062\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-800x472.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-573x338.png.webp 573w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-192x113.png.webp 192w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-768x453.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6.png.webp 1282w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-800x472.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"472\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-800x472.png.webp\" alt=\"LCP image analysis based on real user data in DebugBear\" class=\"wp-image-438062\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-800x472.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-573x338.png.webp 573w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-192x113.png.webp 192w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6-768x453.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image6.png.webp 1282w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lcp-subparts?utm_campaign=sel-3\">LCP sub-parts<\/a> breakdown helps us optimize image loading performance by looking at components that follow the TTFB:<\/p>\n<ul>\n<li>Load Delay: How quickly after loading the HTML document does the browser start loading the image?<\/li>\n<li>Load Time: How long does it take to download the image?<\/li>\n<li>Render Delay: Does the browser show the image im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>tely after loading it or is there a delay?<\/li>\n<\/ul>\n<p>In this case we can see that we need to optimize Load Time, for example by reducing download size with a more <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2021\/09\/modern-image-formats-avif-webp\/\">modern image format<\/a>. The image also often finishes loading before the First Contentful Paint, which means it remains hidden for a few hundred milliseconds.<\/p>\n<p>Looking at a specific page view and investigating the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/waterfall?utm_campaign=sel-3\">request waterfall<\/a> visualization can help you better understand in what order different resources are loaded and how long a given request takes.<\/p>\n<p>For example, here we can see what request loads the LCP image, when that request starts, and how soon after the request the LCP is recorded. Here we can see that the LCP (indicated by the red line on the right) happens right after the LCP image is loaded, which means that there is no Render Delay for this page view.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"379\" alt=\"Request waterfall showing how resource loading impacts website rendering\" class=\"wp-image-438063\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-800x379.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-600x284.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-768x364.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7.png.webp 926w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-800x379.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"379\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-800x379.png.webp\" alt=\"Request waterfall showing how resource loading impacts website rendering\" class=\"wp-image-438063\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-800x379.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-600x284.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7-768x364.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image7.png.webp 926w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-improve-interaction-to-next-paint-with-real-user-data\"><span class=\"ez-toc-section\" id=\"Improve_Interaction_to_Next_Paint_with_real_user_data\"><\/span>Improve Interaction to Next Paint with real user data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The INP score of your website greatly depends on what page elements users are interacting with. Clicking somewhere on a paragraph usually doesn\u2019t trigger any code to run, and those interactions will be fast. A menu toggle or button that generates a new UI component and displays it will take a lot more time.<\/p>\n<p>With real user data you can see what elements users are interacting with most often, and which of these interactions are slow.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"376\" alt=\"INP analysis showing different page element selectors\" class=\"wp-image-438064\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-800x376.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-600x282.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-200x94.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-768x361.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-1536x722.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8.png.webp 1668w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-800x376.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"376\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-800x376.png.webp\" alt=\"INP analysis showing different page element selectors\" class=\"wp-image-438064\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-800x376.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-600x282.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-200x94.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-768x361.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8-1536x722.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image8.png.webp 1668w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\" id=\"h-identifying-code-that-s-causing-slow-interactions\"><span class=\"ez-toc-section\" id=\"Identifying_code_thats_causing_slow_interactions\"><\/span>Identifying code that\u2019s causing slow interactions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can also see what scripts are responsible for slow interactions. JavaScript files may be part of your own website code or part of a third-party service like, whether that\u2019s a chat widget or <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>letter popup.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" alt=\"INP analysis showing different JavaScript files slowing down event processing\" class=\"wp-image-438065\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-800x366.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-600x275.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-200x92.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-768x351.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9.png.webp 883w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-800x366.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-800x366.png.webp\" alt=\"INP analysis showing different JavaScript files slowing down event processing\" class=\"wp-image-438065\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-800x366.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-600x275.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-200x92.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9-768x351.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image9.png.webp 883w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/noscript><\/figure>\n<\/div>\n<p>This is possible thanks to the new <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/long-animation-frames?utm_campaign=sel-3\">Long Animation Frames API<\/a> that will be included in Chrome from mid-March 2023. This browser functionality reports what code is causing rendering delays on a page.<\/p>\n<p>When you look at an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/rum\/experiences?utm_campaign=sel-3\">individual user experience<\/a> you can see what element the user interacted with and what code ran at that point, causing poor INP.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"600\" alt=\"INP analysis for a specific page visit\" class=\"wp-image-438066\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-652x600.png.webp 652w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-367x338.png.webp 367w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-123x113.png.webp 123w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-768x707.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10.png.webp 864w\" data-lazy-sizes=\"(max-width: 652px) 100vw, 652px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-652x600.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"600\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-652x600.png.webp\" alt=\"INP analysis for a specific page visit\" class=\"wp-image-438066\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-652x600.png.webp 652w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-367x338.png.webp 367w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-123x113.png.webp 123w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10-768x707.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image10.png.webp 864w\" sizes=\"auto, (max-width: 652px) 100vw, 652px\"><\/noscript><\/figure>\n<\/div>\n<p>Once you\u2019ve identified a specific script file you can then check whether that script is necessary and if there are ways to make it run faster.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-when-do-slow-interactions-happen-on-the-page\"><span class=\"ez-toc-section\" id=\"When_do_slow_interactions_happen_on_the_page\"><\/span><a><\/a>When do slow interactions happen on the page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another factor that impacts INP is the page loading stage when the interaction happens. During the very early loading stages INP is often high, as many parts of the page are initialized which requires a lot of CPU processing.<\/p>\n<p>If that\u2019s the \u00a0case, you can consider different ways to optimize the initial page load logic and if more room can be left for handling user interactions during this time.<\/p>\n<p>The width of the bars in this chart indicates how many users encounter poor INP at each loading stage. So, while the early \u201cLoading\u201d stage causes poor INP, not that many users are actually impacted here.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"694\" height=\"359\" alt=\"INP analysis by page load stage\" class=\"wp-image-438067\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11.png.webp 694w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11-600x310.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11-200x103.png.webp 200w\" data-lazy-sizes=\"(max-width: 694px) 100vw, 694px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"694\" height=\"359\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11.png.webp\" alt=\"INP analysis by page load stage\" class=\"wp-image-438067\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11.png.webp 694w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11-600x310.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image11-200x103.png.webp 200w\" sizes=\"auto, (max-width: 694px) 100vw, 694px\"><\/noscript><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-improve-cumulative-layout-shift-with-real-user-data\"><span class=\"ez-toc-section\" id=\"Improve_Cumulative_Layout_Shift_with_real_user_data\"><\/span><a><\/a>Improve Cumulative Layout Shift with real user data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Since layout shifts often occur following a user interaction, real user data makes it easy to identify shifts \u00a0that you can\u2019t detect in a lab-based test.<\/p>\n<p>You can see what elements shift around and what user interaction led up to the layout shift. For example, an image that appears in response to a button click may push down other content on the page when the image has finished downloading.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"375\" alt=\"Layout shift element collected based on real user data\" class=\"wp-image-438068\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12.png.webp 511w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12-461x338.png.webp 461w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12-154x113.png.webp 154w\" data-lazy-sizes=\"(max-width: 511px) 100vw, 511px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"375\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12.png.webp\" alt=\"Layout shift element collected based on real user data\" class=\"wp-image-438068\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12.png.webp 511w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12-461x338.png.webp 461w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image12-154x113.png.webp 154w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\"><\/noscript><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-what-s-the-difference-between-real-user-monitoring-rum-and-google-crux-data\"><span class=\"ez-toc-section\" id=\"Whats_the_difference_between_real_user_monitoring_RUM_and_Google_CrUX_data\"><\/span>What\u2019s the difference between real user monitoring (RUM) and Google CrUX data?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can use Google\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/chrome-user-experience-report?utm_campaign=sel-3\">Chrome User Experience Report<\/a> (CrUX) to obtain real user Core Web Vitals data for your website, without having to do any setup work.<\/p>\n<p>However, real user monitoring addresses several limitations of the CrUX data:<\/p>\n<ul>\n<li>Regressions and improvements show up instantly with RUM data, while CrUX data is aggregated over a 28-day period.<\/li>\n<li>CrUX data is only available for high-traffic pages, while RUM data is available for any page on your website that a visitor views.<\/li>\n<li>The CrUX data only provides metric values and no debug data. You can see where your website is struggling on the Core Web \u00a0Vitals but won\u2019t know what to do about it.<\/li>\n<\/ul>\n<p>Real user monitoring shows you how users are experiencing your website and what impact it has on their behavior.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"425\" alt=\"Histogram of Largest Contentful Paint with bounce rate overlay\" class=\"wp-image-438069\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13.png.webp 629w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13-500x338.png.webp 500w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13-167x113.png.webp 167w\" data-lazy-sizes=\"(max-width: 629px) 100vw, 629px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"425\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13.png.webp\" alt=\"Histogram of Largest Contentful Paint with bounce rate overlay\" class=\"wp-image-438069\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13.png.webp 629w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13-500x338.png.webp 500w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/03\/DebugBear-20240305-Image13-167x113.png.webp 167w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\"><\/noscript><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-get-started-with-real-user-core-web-vitals-monitoring\"><span class=\"ez-toc-section\" id=\"Get_started_with_real_user_Core_Web_Vitals_monitoring\"><\/span>Get started with real user Core Web Vitals monitoring<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Looking to improve your web vitals, rank higher in Google, and deliver a better user experience? DebugBear offers a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/signup?utm_campaign=sel-3\">14-day free trial<\/a> \u2013\u00a0sign up now to get the data you need to optimize your website!<\/p>\n<\/div>\n<p><\/p>\n<div class=\"about-author\">\n    About the author<\/p>\n<div class=\"information\">\n<div class=\"author-module\">\n<div class=\"row\">\n<div class=\"col-12 col-lg-3 text-center\">\n<div class=\"avatar\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"img-fluid\" alt=\"DebugBear\" width=\"140\" height=\"140\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2023\/01\/DebugBear-logo.png.webp\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"img-fluid\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2023\/01\/DebugBear-logo.png.webp\" alt=\"DebugBear\" width=\"140\" height=\"140\"><\/noscript>                                         <\/div>\n<\/p><\/div>\n<div class=\"col-12 col-lg-9\">\n<div class=\"about\">\n<div class=\"name\">\n                            <strong>DebugBear<\/strong>\n                        <\/div>\n<div class=\"row g-2 pt-2\">\n<div class=\"col-auto twitter\">\n                                    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/intent\/follow?original_referer=https%3A%2F%2Fsearchengineland.com%2F&amp;region=follow_link&amp;screen_name=debugbear&amp;tw_p=followbutton&amp;variant=2.0\" aria-label=\"opens in a new tab\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\n                            <\/div>\n<div class=\"col-auto\">\n                                    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/company\/debugbear\" aria-label=\"opens in a new tab\"><i class=\"fab fa-linkedin\"><\/i><\/a>\n                                <\/div>\n<\/p><\/div>\n<p>                        <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/\">DebugBear<\/a> helps online businesses make their website fast and pass Google&#8217;s Core Web Vitals assessment. Test page speed, get tips to optimize performance, and keep track of metrics over time.                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMN63nwsw68G3Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology<\/a><\/span> category.<\/strong>\n<\/p><\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/searchengineland.com\/how-to-optimize-google-core-web-vitals-with-real-user-data-438034\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Collecting data on visitor experiences on your website can help you pass Google\u2019s Core Web Vitals assessment and the new Interaction to Next Paint metric. Google\u2019s Core Web Vitals have been a ranking signal since 2021 when Google introduced three metrics to measure the quality of user experiences on a website. Real user monitoring data&#8230;<\/p>\n","protected":false},"author":1,"featured_media":611379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/02\/Header-Image.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[147868,78070,148056],"class_list":["post-611378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-google-seo","tag-seo","tag-sponsored-content"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/611378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=611378"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/611378\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/611379"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=611378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=611378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=611378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}