How To Monitor And Optimize Google Core Web Vitals<\/h1>\nMatt Zeunert<\/address>\n 2024-04-16T10:00:00+00:00
\n 2024-08-30T10:05:08+00:00
\n <\/header>\n
This article is sponsored by DebugBear<\/b><\/p>\n
Google\u2019s Core Web Vitals initiative<\/a> has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor experiences on your website, and poor UX also has a bigger impact on SEO<\/a>.<\/p>\nThat means you need to test your website to identify optimizations. Beyond that, monitoring ensures that you can stay ahead of your Core Web Vitals scores<\/strong> for the long term.<\/p>\nLet\u2019s find out how to work with different types of Core Web Vitals data and how monitoring can help you gain a deeper insight into user experiences and help you optimize them.<\/p>\n
What Are Core Web Vitals?<\/h2>\n
There are three web vitals metrics Google uses to measure different aspects of website performance:<\/p>\n
\n- Largest Contentful Paint (LCP),<\/li>\n
- Cumulative Layout Shift (CLS),<\/li>\n
- Interaction to Next Paint (INP).<\/li>\n<\/ul>\n
<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nLargest Contentful Paint (LCP)<\/h3>\n
The Largest Contentful Paint<\/a> metric is the closest thing to a traditional load time measurement. However, LCP doesn\u2019t track a purely technical page load milestone like the JavaScript Load Event<\/a>. Instead, it focuses on what the user can see by measuring how soon after opening a page, the largest content element on the page appears<\/strong>.<\/p>\nThe faster the LCP happens, the better, and Google rates a passing LCP score below 2.5 seconds.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nCumulative Layout Shift (CLS)<\/h3>\n
Cumulative Layout Shift<\/a> is a bit of an odd metric, as it doesn\u2019t measure how fast something happens. Instead, it looks at how stable the page layout is once the page starts loading<\/strong>. Layout shifts mean that content moves around, disorienting the user and potentially causing accidental clicks on the wrong UI element.<\/p>\nThe CLS score is calculated by looking at how far an element moved and how big the element is. Aim for a score below 0.1 to get a good rating from Google.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nInteraction to Next Paint (INP)<\/h3>\n
Even websites that load quickly often frustrate users when interactions with the page feel sluggish. That\u2019s why Interaction to Next Paint<\/a> measures how long the page remains frozen after user interaction with no visual updates<\/strong>.<\/p>\nPage interactions should feel practically instant, so Google recommends an INP score below 200 milliseconds.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nWhat Are The Different Types Of Core Web Vitals Data?<\/h2>\n
You\u2019ll often see different page speed metrics reported by different tools and data sources, so it\u2019s important to understand the differences. We\u2019ve published a whole article just about that<\/a>, but here\u2019s the high-level breakdown along with the pros and cons of each one:<\/p>\n\n- Synthetic Tests<\/strong>
\nThese tests are run on-demand in a controlled lab environment in a fixed location with a fixed network and device speed. They can produce very detailed reports and recommendations.<\/li>\n- Real User Monitoring (RUM)<\/strong>
\nThis data tells you how fast your website is for your actual visitors. That means you need to install an analytics script to collect it, and the reporting that\u2019s available is less detailed than for lab tests.<\/li>\n- CrUX Data<\/strong>
\nGoogle collects from Chrome users as part of the Chrome User Experience Report<\/a> (CrUX) and uses it as a ranking signal. It\u2019s available for every website with enough traffic, but since it covers a 28-day rolling window, it takes a while for changes on your website to be reflected here. It also doesn\u2019t include any debug data to help you optimize your metrics.<\/li>\n<\/ul>\nStart By Running A One-Off Page Speed Test<\/h2>\n
Before signing up for a monitoring service, it\u2019s best to run a one-off lab test with a free tool like Google\u2019s PageSpeed Insights<\/a> or the DebugBear Website Speed Test<\/a>. Both of these tools report with Google CrUX data that reflects whether real users are facing issues on your website.<\/p>\nNote<\/strong>: The lab data you get from some Lighthouse-based tools — like PageSpeed Insights — can be unreliable<\/a>.<\/em><\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nINP is best measured for real users, where you can see the elements that users interact with most often and where the problems lie. But a free tool like the INP Debugger<\/a> can be a good starting point if you don\u2019t have RUM set up yet.<\/p>\nHow To Monitor Core Web Vitals Continuously With Scheduled Lab-Based Testing<\/h2>\n
Running tests continuously has a few advantages over ad-hoc tests. Most importantly, continuous testing triggers alerts whenever a new issue appears on your website<\/strong>, allowing you to start fixing them right away. You\u2019ll also have access to historical data<\/strong>, allowing you to see exactly when a regression occurred and letting you compare test results before and after to see what changed.<\/p>\nScheduled lab tests are easy to set up using a website monitoring tool like DebugBear<\/a>. Enter a list of website URLs and pick a device type, test location, and test frequency to get things running:<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nAs this process runs, it feeds data into the detailed dashboard with historical Core Web Vitals data. You can monitor a number of pages on your website or track the speed of your competition to make sure you stay ahead.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nWhen regression occurs, you can dive deep into the results using DebuBears\u2019s Compare mode<\/a>. This mode lets you see before-and-after test results side-by-side, giving you context for identifying causes. You see exactly what changed. For example, in the following case, we can see that HTTP compression<\/a> stopped working for a file, leading to an increase in page weight and longer download times.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nHow To Monitor Real User Core Web Vitals<\/h2>\n
Synthetic tests are great for super-detailed reporting of your page load time. However, other aspects of user experience, like layout shifts and slow interactions, heavily depend on how real users use your website. So, it\u2019s worth setting up real user monitoring with a tool like DebugBear<\/a>.<\/p>\nTo monitor real user web vitals, you\u2019ll need to install an analytics snippet that collects this data on your website. Once that\u2019s done, you\u2019ll be able to see data for all three Core Web Vitals metrics across your entire website.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nTo optimize your scores, you can go into the dashboard for each individual metric, select a specific page you\u2019re interested in, and then dive deeper into the data.<\/p>\n
For example, you can see whether a slow LCP score is caused by a slow server response, render blocking resources<\/a>, or by the LCP content element itself.<\/p>\nYou\u2019ll also find that the LCP element varies between visitors. Lab test results are always the same, as they rely on a single fixed screen size. However, in the real world, visitors use a wide range of devices and will see different content when they open your website.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nINP is tricky to debug without real user data. Yet an analytics tool like DebugBear can tell you exactly what page elements users are interacting with most often and which of these interactions are slow to respond.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nThanks to the new Long Animation Frames API<\/a>, we can also see specific scripts that contribute to slow interactions. We can then decide to optimize these scripts, remove them from the page, or run them in a way that does not block interactions for as long.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nConclusion<\/h2>\n
Continuously monitoring Core Web Vitals lets you see how website changes impact user experience and ensures you get alerted when something goes wrong. While it\u2019s possible to measure Core Web Vitals using a wide range of tools, those tools are limited by the type of data they use to evaluate performance, not to mention they only provide a single snapshot of performance at a specific point in time.<\/p>\n
A tool like DebugBear gives you access to several different types of data that you can use to troubleshoot performance and optimize your website, complete with RUM capabilities that offer a historial record of performance for identifying issues where and when they occur. Sign up for a free DebugBear trial here<\/a>.<\/p>\n\n 
\n (gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"How To Monitor And Optimize Google Core Web Vitals How To Monitor And Optimize Google Core Web Vitals Matt Zeunert 2024-04-16T10:00:00+00:00 2024-08-30T10:05:08+00:00 This article is sponsored by DebugBear Google\u2019s Core Web Vitals initiative has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-501","post","type-post","status-publish","format-standard","hentry","category-performance"],"_links":{"self":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501"}],"collection":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":1,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n 2024-08-30T10:05:08+00:00
\n <\/header>\n
That means you need to test your website to identify optimizations. Beyond that, monitoring ensures that you can stay ahead of your Core Web Vitals scores<\/strong> for the long term.<\/p>\n Let\u2019s find out how to work with different types of Core Web Vitals data and how monitoring can help you gain a deeper insight into user experiences and help you optimize them.<\/p>\n There are three web vitals metrics Google uses to measure different aspects of website performance:<\/p>\n <\/p>\n <\/a> The Largest Contentful Paint<\/a> metric is the closest thing to a traditional load time measurement. However, LCP doesn\u2019t track a purely technical page load milestone like the JavaScript Load Event<\/a>. Instead, it focuses on what the user can see by measuring how soon after opening a page, the largest content element on the page appears<\/strong>.<\/p>\n The faster the LCP happens, the better, and Google rates a passing LCP score below 2.5 seconds.<\/p>\n <\/p>\n <\/a> Cumulative Layout Shift<\/a> is a bit of an odd metric, as it doesn\u2019t measure how fast something happens. Instead, it looks at how stable the page layout is once the page starts loading<\/strong>. Layout shifts mean that content moves around, disorienting the user and potentially causing accidental clicks on the wrong UI element.<\/p>\n The CLS score is calculated by looking at how far an element moved and how big the element is. Aim for a score below 0.1 to get a good rating from Google.<\/p>\n <\/p>\n <\/a> Even websites that load quickly often frustrate users when interactions with the page feel sluggish. That\u2019s why Interaction to Next Paint<\/a> measures how long the page remains frozen after user interaction with no visual updates<\/strong>.<\/p>\n Page interactions should feel practically instant, so Google recommends an INP score below 200 milliseconds.<\/p>\n <\/p>\n <\/a> You\u2019ll often see different page speed metrics reported by different tools and data sources, so it\u2019s important to understand the differences. We\u2019ve published a whole article just about that<\/a>, but here\u2019s the high-level breakdown along with the pros and cons of each one:<\/p>\n Before signing up for a monitoring service, it\u2019s best to run a one-off lab test with a free tool like Google\u2019s PageSpeed Insights<\/a> or the DebugBear Website Speed Test<\/a>. Both of these tools report with Google CrUX data that reflects whether real users are facing issues on your website.<\/p>\n Note<\/strong>: The lab data you get from some Lighthouse-based tools — like PageSpeed Insights — can be unreliable<\/a>.<\/em><\/p>\n <\/p>\n <\/a> INP is best measured for real users, where you can see the elements that users interact with most often and where the problems lie. But a free tool like the INP Debugger<\/a> can be a good starting point if you don\u2019t have RUM set up yet.<\/p>\n Running tests continuously has a few advantages over ad-hoc tests. Most importantly, continuous testing triggers alerts whenever a new issue appears on your website<\/strong>, allowing you to start fixing them right away. You\u2019ll also have access to historical data<\/strong>, allowing you to see exactly when a regression occurred and letting you compare test results before and after to see what changed.<\/p>\n Scheduled lab tests are easy to set up using a website monitoring tool like DebugBear<\/a>. Enter a list of website URLs and pick a device type, test location, and test frequency to get things running:<\/p>\n <\/p>\n <\/a> As this process runs, it feeds data into the detailed dashboard with historical Core Web Vitals data. You can monitor a number of pages on your website or track the speed of your competition to make sure you stay ahead.<\/p>\n <\/p>\n <\/a> When regression occurs, you can dive deep into the results using DebuBears\u2019s Compare mode<\/a>. This mode lets you see before-and-after test results side-by-side, giving you context for identifying causes. You see exactly what changed. For example, in the following case, we can see that HTTP compression<\/a> stopped working for a file, leading to an increase in page weight and longer download times.<\/p>\n <\/p>\n <\/a> Synthetic tests are great for super-detailed reporting of your page load time. However, other aspects of user experience, like layout shifts and slow interactions, heavily depend on how real users use your website. So, it\u2019s worth setting up real user monitoring with a tool like DebugBear<\/a>.<\/p>\n To monitor real user web vitals, you\u2019ll need to install an analytics snippet that collects this data on your website. Once that\u2019s done, you\u2019ll be able to see data for all three Core Web Vitals metrics across your entire website.<\/p>\n <\/p>\n <\/a> To optimize your scores, you can go into the dashboard for each individual metric, select a specific page you\u2019re interested in, and then dive deeper into the data.<\/p>\n For example, you can see whether a slow LCP score is caused by a slow server response, render blocking resources<\/a>, or by the LCP content element itself.<\/p>\n You\u2019ll also find that the LCP element varies between visitors. Lab test results are always the same, as they rely on a single fixed screen size. However, in the real world, visitors use a wide range of devices and will see different content when they open your website.<\/p>\n <\/p>\n <\/a> INP is tricky to debug without real user data. Yet an analytics tool like DebugBear can tell you exactly what page elements users are interacting with most often and which of these interactions are slow to respond.<\/p>\n <\/p>\n <\/a> Thanks to the new Long Animation Frames API<\/a>, we can also see specific scripts that contribute to slow interactions. We can then decide to optimize these scripts, remove them from the page, or run them in a way that does not block interactions for as long.<\/p>\n <\/p>\n <\/a> Continuously monitoring Core Web Vitals lets you see how website changes impact user experience and ensures you get alerted when something goes wrong. While it\u2019s possible to measure Core Web Vitals using a wide range of tools, those tools are limited by the type of data they use to evaluate performance, not to mention they only provide a single snapshot of performance at a specific point in time.<\/p>\n A tool like DebugBear gives you access to several different types of data that you can use to troubleshoot performance and optimize your website, complete with RUM capabilities that offer a historial record of performance for identifying issues where and when they occur. Sign up for a free DebugBear trial here<\/a>.<\/p>\n How To Monitor And Optimize Google Core Web Vitals How To Monitor And Optimize Google Core Web Vitals Matt Zeunert 2024-04-16T10:00:00+00:00 2024-08-30T10:05:08+00:00 This article is sponsored by DebugBear Google\u2019s Core Web Vitals initiative has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-501","post","type-post","status-publish","format-standard","hentry","category-performance"],"_links":{"self":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501"}],"collection":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":1,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/501\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What Are Core Web Vitals?<\/h2>\n
\n
<\/p>\n
\n <\/figcaption><\/figure>\nLargest Contentful Paint (LCP)<\/h3>\n
<\/p>\n
\n <\/figcaption><\/figure>\nCumulative Layout Shift (CLS)<\/h3>\n
<\/p>\n
\n <\/figcaption><\/figure>\nInteraction to Next Paint (INP)<\/h3>\n
<\/p>\n
\n <\/figcaption><\/figure>\nWhat Are The Different Types Of Core Web Vitals Data?<\/h2>\n
\n
\nThese tests are run on-demand in a controlled lab environment in a fixed location with a fixed network and device speed. They can produce very detailed reports and recommendations.<\/li>\n
\nThis data tells you how fast your website is for your actual visitors. That means you need to install an analytics script to collect it, and the reporting that\u2019s available is less detailed than for lab tests.<\/li>\n
\nGoogle collects from Chrome users as part of the Chrome User Experience Report<\/a> (CrUX) and uses it as a ranking signal. It\u2019s available for every website with enough traffic, but since it covers a 28-day rolling window, it takes a while for changes on your website to be reflected here. It also doesn\u2019t include any debug data to help you optimize your metrics.<\/li>\n<\/ul>\nStart By Running A One-Off Page Speed Test<\/h2>\n
<\/p>\n
\n <\/figcaption><\/figure>\nHow To Monitor Core Web Vitals Continuously With Scheduled Lab-Based Testing<\/h2>\n
<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\nHow To Monitor Real User Core Web Vitals<\/h2>\n
<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\nConclusion<\/h2>\n
\n (gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"