{"id":714,"date":"2024-11-05T09:00:00","date_gmt":"2024-11-05T10:00:00","guid":{"rendered":"https:\/\/upprofits.net\/?p=714"},"modified":"2024-11-06T19:08:51","modified_gmt":"2024-11-06T19:08:51","slug":"why-optimizing-your-lighthouse-score-is-not-enough-for-a-fast-website","status":"publish","type":"post","link":"https:\/\/upprofits.net\/index.php\/2024\/11\/05\/why-optimizing-your-lighthouse-score-is-not-enough-for-a-fast-website\/","title":{"rendered":"Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website"},"content":{"rendered":"<p>              <title>Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website<\/title><\/p>\n<article>\n<header>\n<h1>Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website<\/h1>\n<address>Geoff Graham<\/address>\n<p>                  2024-11-05T10:00:00+00:00<br \/>\n                  2024-11-06T17:05:50+00:00<br \/>\n                <\/header>\n<p>This article is sponsored by <b>DebugBear<\/b><\/p>\n<p>We\u2019ve all had that moment. You\u2019re optimizing the performance of some website, scrutinizing every millisecond it takes for the current page to load. You\u2019ve fired up Google Lighthouse from Chrome\u2019s DevTools because everyone and their uncle uses it to evaluate performance.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/1-google-lighthouse.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"518\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/1-google-lighthouse.png\" alt=\"A screenshot from Google DevTools\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/1-google-lighthouse.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>After running your 151st report and completing all of the recommended improvements, you experience nirvana: <strong>a perfect 100% performance score!<\/strong><\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/2-devtools-performance-score.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"518\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/2-devtools-performance-score.png\" alt=\"A screenshot with the 100% performance score on DevTools\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Heck yeah. (<a href=\"https:\/\/files.smashing.media\/articles\/why-optimizing-lighthouse-score-not-enough-fast-website\/2-devtools-performance-score.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Time to pat yourself on the back for a job well done. Maybe you can use this to get that pay raise you\u2019ve been wanting! Except, don\u2019t &mdash; at least not using Google Lighthouse as your sole proof. I know a perfect score produces all kinds of good feelings. That\u2019s what we\u2019re aiming for, after all!<\/p>\n<p>Google Lighthouse is merely <em>one<\/em> tool in a complete performance toolkit. What it\u2019s not is a complete picture of how your website performs in the real world. Sure, we can glean plenty of insights about a site\u2019s performance and even spot issues that ought to be addressed to speed things up. But again, it\u2019s <em>an incomplete picture<\/em>.<\/p>\n<h2 id=\"what-google-lighthouse-is-great-at\">What Google Lighthouse Is Great At<\/h2>\n<p>I hear other developers boasting about perfect Lighthouse scores and see the screenshots published all over socials. Hey, I just did that myself in the introduction of this article!<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aLighthouse%20might%20be%20the%20most%20widely%20used%20web%20performance%20reporting%20tool.%20I%e2%80%99d%20wager%20its%20ubiquity%20is%20due%20to%20convenience%20more%20than%20the%20quality%20of%20its%20reports.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f11%2fwhy-optimizing-lighthouse-score-not-enough-fast-website%2f\"><\/p>\n<p>Lighthouse might be the most widely used web performance reporting tool. I\u2019d wager its ubiquity is due to convenience more than the quality of its reports.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>Open DevTools, click the Lighthouse tab, and generate the report! There are even many ways we can configure Lighthouse to measure performance in simulated situations, such as slow internet connection speeds or creating separate reports for mobile and desktop. It\u2019s a very powerful tool for something that comes baked into a free browser. It\u2019s also <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/about\">baked right into Google\u2019s PageSpeed Insights tool<\/a>!<\/p>\n<p>And it\u2019s fast. Run a report in Lighthouse, and you\u2019ll get something back in about 10-15 seconds. Try running reports with other tools, and you\u2019ll find yourself refilling your coffee, hitting the bathroom, and maybe checking your email (in varying order) while waiting for the results. There\u2019s a good reason for that, but all I want to call out is that Google Lighthouse is <em>lightning<\/em> fast as far as performance reporting goes.<\/p>\n<p><strong>To recap:<\/strong> Lighthouse is great at many things!<\/p>\n<ul>\n<li>It\u2019s convenient to access,<\/li>\n<li>It provides a good deal of configuration for different levels of troubleshooting,<\/li>\n<li>And it spits out reports in record time.<\/li>\n<\/ul>\n<p>And what about that bright and lovely animated green score &mdash; who doesn\u2019t love that?!<\/p>\n<p>OK, that\u2019s the rosy side of Lighthouse reports. It\u2019s only fair to highlight its limitations as well. This isn\u2019t to dissuade you or anyone else from using Lighthouse, but more of a heads-up that your score may not perfectly reflect reality &mdash; or even match the scores you\u2019d get in other tools, including Google\u2019s own <a href=\"https:\/\/pagespeed.web.dev\">PageSpeed Insights<\/a>.<\/p>\n<h2 id=\"it-doesn-t-match-real-users\">It Doesn\u2019t Match \u201cReal\u201d Users<\/h2>\n<p>Not all data is created equal in capital Web Performance. It\u2019s important to know this because data represents assumptions that reporting tools make when evaluating performance metrics.<\/p>\n<p>The data Lighthouse relies on for its reporting is called <strong>simulated data<\/strong>. You might already have a solid guess at what that means: it\u2019s <em>synthetic<\/em> data. Now, before kicking simulated data in the knees for not being \u201creal\u201d data, know that it\u2019s the reason Lighthouse is super fast.<\/p>\n<p>You know how there\u2019s a setting to \u201cthrottle\u201d the internet connection speed? That simulates different conditions that either slow down or speed up the connection speed, something that you configure directly in Lighthouse. By default, Lighthouse collects data on a fast connection, but we can configure it to something slower to gain insights on slow page loads. But beware! <strong>Lighthouse then estimates how quickly the page would have loaded on a different connection<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\">DebugBear<\/a> founder <a href=\"https:\/\/www.mattzeunert.com\">Matt Zeunert<\/a> outlines <a href=\"https:\/\/calendar.perfplanet.com\/2021\/how-does-lighthouse-simulated-throttling-work\/\">how data runs in a simulated throttling environment<\/a>, explaining how Lighthouse uses \u201coptimistic\u201d and \u201cpessimistic\u201d averages for making conclusions:<\/p>\n<blockquote><p>\u201c[Simulated throttling] reduces variability between tests. But if there\u2019s a single slow render-blocking request that shares an origin with several fast responses, then Lighthouse will underestimate page load time.<\/p>\n<p>Lighthouse averages optimistic and pessimistic estimates when it\u2019s unsure exactly which nodes block rendering. In practice, metrics may be closer to either one of these, depending on which dependency graph is more correct.\u201d<\/p><\/blockquote>\n<p>And again, the environment is a configuration, not reality. It\u2019s unlikely that your throttled conditions match the connection speeds of an average real user on the website, as they may have a faster network connection or run on a slower CPU. What Lighthouse provides is more like <strong>\u201con-demand\u201d testing<\/strong> that\u2019s immediately available.<\/p>\n<p>That makes simulated data great for running tests quickly and under certain artificially sweetened conditions. However, it sacrifices accuracy by making assumptions about the connection speeds of site visitors and averages things in a way that divorces it from reality.<\/p>\n<p>While simulated throttling is the default in Lighthouse, it also supports <a href=\"https:\/\/www.debugbear.com\/blog\/packet-level-throttling?utm_campaign=sm-6\">more realistic throttling methods<\/a>. Running those tests will take more time but give you more accurate data. The easiest way to run Lighthouse with more realistic settings is using an online tool like the <a href=\"https:\/\/www.debugbear.com\/test\/website-speed?utm_campaign=sm-6\">DebugBear website speed test<\/a> or <a href=\"https:\/\/www.webpagetest.org\/\">WebPageTest<\/a>.<\/p>\n<h2 id=\"it-doesn-t-impact-core-web-vitals-scores\">It Doesn\u2019t Impact Core Web Vitals Scores<\/h2>\n<p>These <a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/core-web-vitals?utm_campaign=sm-6\">Core Web Vitals<\/a> everyone talks about are Google\u2019s standard metrics for measuring performance. They go beyond simple \u201cYour page loaded in X seconds\u201d reports by looking at a slew of more pertinent details that are diagnostic of how the page loads, resources that might be blocking other resources, slow user interactions, and how much the page shifts around from loading resources and content. Zeunert has <a href=\"https:\/\/www.smashingmagazine.com\/2024\/04\/monitor-optimize-google-core-web-vitals\/\">another great post here on Smashing Magazine<\/a> that discusses each metric in detail.<\/p>\n<p>The main point here is that the simulated data Lighthouse produces may (and often does) differ from performance metrics from other tools. <a href=\"https:\/\/www.smashingmagazine.com\/2023\/10\/answering-questions-interpreting-page-speed-reports\/\">I spent a good deal explaining this in another article.<\/a> The gist of it is that <strong>Lighthouse scores do not impact Core Web Vitals data<\/strong>. The reason for that is Core Web Vitals relies on data about real users pulled from the monthly-updated <a href=\"https:\/\/developer.chrome.com\/docs\/crux\">Chrome User Experience (CrUX) report<\/a>. While CrUX data may be limited by how recently the data was pulled, it is a more accurate reflection of user behaviors and browsing conditions than the simulated data in Lighthouse.<\/p>\n<p>The ultimate point I\u2019m getting at is that Lighthouse is simply ineffective at measuring Core Web Vitals performance metrics. Here\u2019s how I explain it in my bespoke article:<\/p>\n<blockquote><p>\u201c[Synthetic] data is fundamentally limited by the fact that <strong>it only looks at a single experience in a pre-defined environment<\/strong>. This environment often doesn\u2019t even match the average real user on the website, who may have a faster network connection or a slower CPU.\u201d<\/p><\/blockquote>\n<p>I emphasized the important part. In real life, users are likely to have more than one experience on a particular page. It\u2019s not as though you navigate to a site, let it load, sit there, and then close the page; you\u2019re more likely to do something on that page. And for a Core Web Vital metric that looks for slow paint in response to user input &mdash; namely, <a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/preparing-interaction-next-paint-web-core-vital\/\">Interaction to Next Paint (INP)<\/a> &mdash; there\u2019s no way for Lighthouse to measure that at all!<\/p>\n<p>It\u2019s the same deal for a metric like Cumulative Layout Shift (CLS) that <a href=\"https:\/\/web.dev\/articles\/user-centric-performance-metrics#types-of-metrics\">measures the<\/a> <a href=\"https:\/\/www.smashingmagazine.com\/2023\/10\/answering-questions-interpreting-page-speed-reports\/#why-is-my-lighthouse-cls-score-better-than-the-real-user-data\">\u201cvisible stability\u201d of a page layout<\/a> because layout shifts often happen lower on the page <em>after<\/em> a user has scrolled down. If Lighthouse relied on CrUX data (which it doesn\u2019t), then it would be able to make assumptions based on real users who interact with the page and can experience CLS. Instead, Lighthouse waits patiently for the full page load and never interacts with parts of the page, thus having no way of knowing anything about CLS.<\/p>\n<h2 id=\"but-it-s-still-a-good-start\">But It\u2019s Still a \u201cGood Start\u201d<\/h2>\n<p>That\u2019s what I want you to walk away with at the end of the day. A Lighthouse report is incredibly good at producing reports quickly, thanks to the simulated data it uses. In that sense, I\u2019d say that Lighthouse is a handy \u201cgut check\u201d and maybe even a first step to identifying opportunities to optimize performance.<\/p>\n<p>But a complete picture, it\u2019s not. For that, what we\u2019d want is a tool that leans on <strong>real user data<\/strong>. Tools that integrate CrUX data are pretty good there. But again, that data is pulled every month (<a href=\"https:\/\/developer.chrome.com\/docs\/crux\/methodology\/tools\">28 days to be exact<\/a>) so it may not reflect the most recent user behaviors and interactions, although it is updated daily on a rolling basis and it is indeed possible to <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/history-api\">query historical records<\/a> for larger sample sizes.<\/p>\n<p>Even better is using a tool that monitors users in real-time.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aData%20pulled%20directly%20from%20the%20site%20of%20origin%20is%20truly%20the%20gold%20standard%20data%20we%20want%20because%20it%20comes%20from%20the%20source%20of%20truth.%20That%20makes%20tools%20that%20integrate%20with%20your%20site%20the%20best%20way%20to%20gain%20insights%20and%20diagnose%20issues%20because%20they%20tell%20you%20exactly%20how%20your%20visitors%20are%20experiencing%20your%20site.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f11%2fwhy-optimizing-lighthouse-score-not-enough-fast-website%2f\"><\/p>\n<p>Data pulled directly from the site of origin is truly the gold standard data we want because it comes from the source of truth. That makes tools that integrate with your site the best way to gain insights and diagnose issues because they tell you exactly how your visitors are experiencing your site.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>I\u2019ve written about <a href=\"https:\/\/www.smashingmagazine.com\/2024\/02\/reporting-core-web-vitals-performance-api\/\">using the Performance API in JavaScript<\/a> to evaluate custom and Core Web Vitals metrics, so it\u2019s possible to roll that on your own. But there are plenty of existing services out there that do this for you, complete with visualizations, historical records, and true <strong>real-time user monitoring<\/strong> (often abbreviated as RUM). What services? Well, <a href=\"https:\/\/www.debugbear.com\/?utm_campaing=sm-6\">DebugBear is a great place to start<\/a>. I cited Matt Zeunert earlier, and DebugBear is his product.<\/p>\n<p>So, if what you want is a complete picture of your site\u2019s performance, go ahead and start with Lighthouse. But don\u2019t stop there because you\u2019re only seeing part of the picture. You\u2019ll want to augment your findings and <a href=\"https:\/\/www.debugbear.com\/blog\/synthetic-vs-rum\/?utm_campaing=sm-6\">diagnose performance with real-user monitoring<\/a> for the most complete, accurate picture.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website Geoff Graham 2024-11-05T10:00:00+00:00 2024-11-06T17:05:50+00:00 This article is sponsored by DebugBear We\u2019ve all had that moment. You\u2019re optimizing the performance of some website, scrutinizing every millisecond it takes for the current page [&hellip;]<\/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-714","post","type-post","status-publish","format-standard","hentry","category-performance"],"_links":{"self":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/714"}],"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=714"}],"version-history":[{"count":1,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/714\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/714\/revisions\/715"}],"wp:attachment":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media?parent=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}