{"id":6932,"date":"2021-08-16T10:30:00","date_gmt":"2021-08-16T09:30:00","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=6932"},"modified":"2021-08-13T11:20:06","modified_gmt":"2021-08-13T10:20:06","slug":"the-dangers-of-core-web-vitals","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/the-dangers-of-core-web-vitals\/","title":{"rendered":"The Dangers of Core Web Vitals"},"content":{"rendered":"\n<p>After some delay Google has finally rolled out its Page Experience update; which now makes Core Web Vitals a ranking signal; widening the appeal of website speed optimisation.<\/p>\n\n\n\n<p>For those unfamiliar with testing website speed metrics, it\u2019s very easy to base your assumptions on inaccurate data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lab-based testing<\/h2>\n\n\n\n<p>Most services for testing site speed are known as lab-based tools. These tools take a snapshot look at your website, measuring results at the time the test is run. Repeat this experiment using another service, or even with the same tool 5 minutes later and the results are likely to fluctuate.<\/p>\n\n\n\n<p>There are a number of reasons for this. One very simple example is that of load; the more users that access the website, the slower the server responds due to the extra work asked of it.<\/p>\n\n\n\n<p>Another example is that lab tests can originate from any location. If you were to test your website using a service based on the other side of the world the results will be different to those returned by a tool based on the same network.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lab-based tools<\/h2>\n\n\n\n<p>There are a number of different lab-based tools available, but if we\u2019re looking more specifically at Core Web Vitals, these are the most popular:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Lighthouse in Chrome DevTools<\/li><li><a href=\"https:\/\/web.dev\/measure\/\">Web.dev<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a><\/li><li><a href=\"https:\/\/webpagetest.org\">WebPageTest<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Overview<\/h3>\n\n\n\n<p>To show how varied the results from these tools can be, we\u2019ll experiment with one of our client websites; <a href=\"https:\/\/www.bathroomplanet.com\/\">Bathroom Planet<\/a>. These scores are using the mobile results in all cases.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">Performance Score<\/td><td class=\"has-text-align-center\" data-align=\"center\">Largest Contentful Paint <br>(LCP)<\/td><td class=\"has-text-align-center\" data-align=\"center\">Cumulative Layout Shift <br>(CLS)<\/td><td class=\"has-text-align-center\" data-align=\"center\">Total Blocking Time <br>(TTI) *<\/td><\/tr><tr><td>Lighthouse<\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">96<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">1.3s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">0.013s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">0.27s<\/span><\/td><\/tr><tr><td>Web.dev<\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-ppc-management-color\"><strong>73<\/strong><\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-digital-media-marketing-color\"><strong>4.5s<\/strong><\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">0.015s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-ppc-management-color\"><strong>0.40s<\/strong><\/span><\/td><\/tr><tr><td>PageSpeed Insights<\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-ppc-management-color\"><strong>86<\/strong><\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">1.2s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">0.013s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong><span class=\"has-inline-color has-ppc-management-color\">0.52s<\/span><\/strong><\/td><\/tr><tr><td>WebPageTest<\/td><td class=\"has-text-align-center\" data-align=\"center\">&#8211;<\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">2.2s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"has-inline-color has-search-engine-optimisation-color\">0.020s<\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong><span class=\"has-inline-color has-digital-media-marketing-color\">0.91s<\/span><\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>* First Input Delay isn\u2019t measured by lab-based tests so we\u2019re including Total Blocking Time instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DevTools Lighthouse<\/h3>\n\n\n\n<p>As a tool that\u2019s accessible within the browser, the results returned here are often better than we\u2019d see using external tools, even with the tool throttling the connection.<\/p>\n\n\n\n<p>In our case, the website tested is on the same network so returns results similar to what you may experience when testing local development websites. While these results suggest a performant website, we know that with a privileged connection that these results are likely to be better than what most users might experience.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/lighthouse.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"270\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/lighthouse.png\" alt=\"\" class=\"wp-image-6935\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/lighthouse.png 602w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/lighthouse-300x135.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Web.dev<\/h3>\n\n\n\n<p>With an external tool we know we\u2019re likely to see results closer to what real users would experience. Using web.dev we see that our Last Contentful Paint metric takes a hit, returning a score that would normally warrant attention.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev.png\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"291\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev.png\" alt=\"\" class=\"wp-image-6936\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev.png 596w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev-300x146.png 300w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>But when comparing this to our other results it appears to be an anomalous result, so we\u2019d want to collect more data before making changes to the website.<\/p>\n\n\n\n<p>Look at what happens to our results when we run this test again, a little later in the day and without any changes to the website; our LCP metric has improved while our Time to Interactive and Total Blocking Time figures have increased.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"291\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev2.png\" alt=\"\" class=\"wp-image-6937\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev2.png 596w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webdev2-300x146.png 300w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>If we were only using this tool I\u2019d expect to run it numerous times to gather more data so that we could either spot patterns in the data or calculate averages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PageSpeed Insights<\/h3>\n\n\n\n<p>This is another of Google\u2019s testing tools, which in addition to providing lab results also outputs field data (more on that later). When testing with this tool we see metrics which are a mix of the results we\u2019ve seen by previous tools.<\/p>\n\n\n\n<p>When needing to use an external testing tool by Google, I\u2019d always gravitate to PageSpeed Insights over web.dev.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed.png\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"184\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed.png\" alt=\"\" class=\"wp-image-6938\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed.png 739w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed-300x75.png 300w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">WebPageTest<\/h3>\n\n\n\n<p>This is one of the biggest non-Google tools for testing a variety of metrics. In addition to providing the ability to test solely Core Web Vitals with a couple of configuration options, WebPageTest also offers more advanced testing with a vast variety of controls.<\/p>\n\n\n\n<p>Using WebPageTest is a must for anyone seriously aiming to optimise their website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-core.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"74\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-core.png\" alt=\"\" class=\"wp-image-6939\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-core.png 602w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-core-300x37.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><figcaption>Core Web Vitals<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-adv.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"115\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-adv.png\" alt=\"\" class=\"wp-image-6940\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-adv.png 602w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/webpagetest-adv-300x57.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><figcaption>Advanced <\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Inconsistent results<\/h2>\n\n\n\n<p>As you can see, these tools can provide inconsistent results, and so alone don\u2019t tell us in all certainly if our website passes the Core Web Vitals.<\/p>\n\n\n\n<p>We could run more tests in order to gather extra data and identify anomalous results or to see patterns in the results that allow us to be confident in the results and subsequent actions.<\/p>\n\n\n\n<p>Alternatively, we may use our expertise to interpret the few results we do have, understanding why the results are the way they are and if any other red flags exist in the data.<\/p>\n\n\n\n<p>Either way it\u2019s not possible to rely on running any of these tools once to tell us if a problem exists or not.<\/p>\n\n\n\n<p>This doesn\u2019t mean that lab tests should be ignored completely, just that the data must be interpreted. They\u2019re really the only way to test newly developed websites and features as well as providing more granular detail to help identify problems and solutions as they arise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Field data &amp; CrUX<\/h2>\n\n\n\n<p>If you want to answer the question of whether a website is fast, especially in the eyes of Google or your users, then you need to look at real-world data; also known as field data.<\/p>\n\n\n\n<p>While you can measure these metrics yourself, most will rely on the data produced from the Chrome User Experience (CrUX) Report. This is data Google gathers from real users visiting your website using the Chrome browser.<\/p>\n\n\n\n<p>It\u2019s the last 28 days of this data that Google uses to inform whether a page passes specific metrics and in turn this is what impacts rankings.<\/p>\n\n\n\n<p>You can access this data using:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a><\/li><li><a href=\"https:\/\/webpagetest.org\">WebPageTest<\/a><\/li><li><a href=\"https:\/\/search.google.com\/search-console\/\">Search Console<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\">Chrome User Experience Report<\/a> (we use this report by <a href=\"https:\/\/rviscomi.github.io\/crux-dash-launcher\/\">Rick Viscomi<\/a>)<\/li><\/ul>\n\n\n\n<p>On PageSpeed Insights, as well as average figures, you\u2019ll see that the field data provides percentages to show how many users have a Good, Poor or \u201cNeeds Improvement\u201d experience. At over 90% Good these results show that the vast majority of users experience a fast website when visiting Bathroom Planet.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed-field.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"207\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed-field.png\" alt=\"\" class=\"wp-image-6941\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed-field.png 602w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/pagespeed-field-300x103.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Of the few percent with a less than Good experience we could dig deeper into why these users are having a sub-optimal experience, but as a number of these users may be using old devices or slow connections it\u2019s not guaranteed than any changes would see a large shift in these figures.<\/p>\n\n\n\n<p>With over 90% in the green I\u2019d assume the website is well optimised, unless a specific issue was brought to my attention.<\/p>\n\n\n\n<p>Whether or not you can see field data on any tool depends on the age of your website and the amount of data available from recent visits. For some smaller websites there may be insufficient data for a specific page you&#8217;re testing, or even for the entire website\/origin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CrUX Report<\/h3>\n\n\n\n<p>Though PageSpeed Insights and WebPageTest will show you field data for a given page, and PageSpeed Insights will also show results for an entire domain (Show Origin Summary) the CrUX report provides far more granular information.<\/p>\n\n\n\n<p>Though it\u2019s possible to dive into this data yourself and create custom reports, the dashboard created by Rick Viscomi is a far quicker option:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/crux.png\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"466\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/crux.png\" alt=\"\" class=\"wp-image-6942\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/crux.png 602w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/crux-300x232.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Within these reports you can see a breakdown by phone and desktop as well as monthly historical data for Core Web Vitals, including First Input Delay which you don\u2019t see in Lab tests.<\/p>\n\n\n\n<p>Within the Bathroom Planet report you can see that most metrics have remained fairly consistent over the past 10 months, though we\u2019ve seen a steady drop in Time to First Byte since January that should be investigated.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Search Console<\/h3>\n\n\n\n<p>Google&#8217;s Search Console takes a slightly different approach in that it shows what pages have specific issues across the Core Web Vitals, differentiating Mobile and Desktop. This is useful in quickly identifying problem pages that you may not think to test manually.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/searchconsole.png\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"481\" src=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/searchconsole.png\" alt=\"\" class=\"wp-image-6943\" srcset=\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/searchconsole.png 596w, https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2021\/08\/searchconsole-300x242.png 300w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Web vitals library<\/h3>\n\n\n\n<p>It\u2019s also possible to measure Core Web Vitals directly in your own website using the <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web vitals JavaScript library<\/a>.  With this data collected you can either choose to store this information yourself, or export to Google Analytics\/Tag Manager.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Field data FTW?<\/h2>\n\n\n\n<p>In almost all instances the field data produced by the CrUX report is what you should use to determine if a website is fast or if issues exist both for the user and in the eyes of Google.<\/p>\n\n\n\n<p>Lab tests are best used to gather additional information when looking to fix particular issues, or to test the impact of changes to the website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Speed Metrics aren\u2019t everything<\/h2>\n\n\n\n<p>The metrics which we use to measure the speed of a website are constantly evolving, not only have the metrics we used changed, but the measure for what is good\/bad can change too.<\/p>\n\n\n\n<p>Even though these metrics cover a number of scenarios that suggest that adherence will result in a fast website, this isn\u2019t always true. Passing Core Web Vital metrics does not mean a website can\u2019t still be slow, or download a huge amount of data before it\u2019s completely rendered, and so still feel slow to users.<\/p>\n\n\n\n<p>An obsession with speed can also have a negative impact on usability and user experience. There is a limit to how much you can optimise a website before removing features\/elements becomes the only option to make it faster. If you start removing things that contribute positively to the user experience the benefits of a faster website will likely be negated by a drop in conversion.<\/p>\n\n\n\n<p>A fast website is always an important goal to work towards, but as with all things there is a balance that should be achieved between this and other concerns.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After some delay Google has finally rolled out its Page Experience update; which now makes Core Web Vitals a ranking signal; widening the appeal of website speed optimisation. For those unfamiliar with testing website speed metrics, it\u2019s very easy to base your assumptions on inaccurate data. Lab-based testing Most services for testing site speed are [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-6932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=6932"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/6933"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=6932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=6932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}