{"id":1939,"date":"2020-12-27T10:26:45","date_gmt":"2020-12-27T10:26:45","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=1939"},"modified":"2021-01-20T06:00:43","modified_gmt":"2021-01-20T06:00:43","slug":"what-is-google-lighthouse","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2020\/12\/what-is-google-lighthouse","title":{"rendered":"What is Google Lighthouse?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>\n<p class=\"lead\">If you know nothing about your customers&#8217; experience with your website, Google Lighthouse might be the right tool for you. <\/p>\n\n\n\n<p>Google Lighthouse is an open source automated website auditing tool from Google, used for discovering issues and opportunities to improve the overall user experience of your website.<\/p>\n\n\n\n<p>Whether you&#8217;re a product owner, business owner or analyst, software developer or tester, Google Lighthouse offers the possibility to identify opportunities to <a href=\"https:\/\/loadfocus.com\/blog\/2020\/02\/why-monitoring-website-performance-is-important\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Why monitoring website performance is important?\">improve your website<\/a> through simple steps, no coding skills required.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/d2woeiihr4s5r6.cloudfront.net\/blog\/lighthouse\/google-lighthouse-loadfocus-report.jpeg\" alt=\"google lighthouse report\"\/><figcaption>Google Lighthouse Report<\/figcaption><\/figure>\n\n\n\n<h2>What does Google Lighthouse measure?<\/h2>\n\n\n\n<p>Google Lighthouse measures several aspects of user experience quality, in a simulated environment, aspects that include performance, SEO, accessibility metrics and other best practices. Everything is focused on the user experience and ways on how to achieve a High Quality User Experience.<\/p>\n\n\n\n<h2>Which are the metrics used by Google Lighthouse?<\/h2>\n\n\n\n<p>Google Lighthouse has defined their own audit metrics, metrics which are not part of what they call <strong><a href=\"https:\/\/web.dev\/vitals\/\" rel=\"nofollow\">Core Web Vitals<\/a><\/strong>. The Role of Core Web Vitals is that it offers a better understanding about the main focus, which is your users&#8217; experience while using your website.<\/p>\n\n\n\n<p>The new user experience metrics introduced in 2020 are Largest Contentful Paint (LCP) and <a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/understanding-cumulative-layout-shift-cls\/\" title=\"Understanding Cumulative Layout Shift (CLS)\">Cumulative Layout Shift (CLS)<\/a> and are part of Core Web Vitals. The First Input Delay (FID) metrics can be correlated to the Total Blocking Time (TBT) in a lab environment.<\/p>\n\n\n\n<p>View your website through Google\u2019s algorithm eyes, and improve your website in terms of performance, speed, seo, progressive web app and other metrics.<\/p>\n\n\n\n<p>So with all these metrics introduced, Google Lighthouse helps you view your website through Google\u2019s algorithm eyes, and make sure you stay up to date with latest changes in terms of performance, speed, seo and other metrics, also to focus on experience\u2014loading, interactivity, and visual stability.<\/p>\n\n\n\n<h2>What are the Core Web Vitals?<\/h2>\n\n\n\n<p>Core Web Vitals is a subset of the Web Vitals and it tries to reflect the real world user experience. The main focus of the user experience gravitates around: loading, interactivity and visual stability of web sites.<\/p>\n\n\n\n<h3>Core Web Vitals Metrics:<\/h3>\n\n\n\n<ul><li><strong>Largest Contentful Paint (LCP):<\/strong> measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.<\/li><li><strong>First Input Delay (FID):<\/strong> measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.<\/li><li><strong><a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/understanding-cumulative-layout-shift-cls\/\" title=\"Understanding Cumulative Layout Shift (CLS)\">Cumulative Layout Shift (CLS)<\/a>:<\/strong> measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.<\/li><\/ul>\n\n\n\n<h3>Ways to Measure and Report Core Web Vitals<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<strong>Tool<\/strong><\/td><td><strong>LCP<\/strong><\/td><td><strong>FID<\/strong><\/td><td><strong>CLS<\/strong><\/td><\/tr><tr><td><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome User Experience Report<\/a><\/td><td>\u2714<\/td><td>\u2714<\/td><td>\u2714<\/td><\/tr><tr><td><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed Insights<\/a><\/td><td>\u2714<\/td><td>\u2714<\/td><td>\u2714<\/td><\/tr><tr><td><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Search Console (Core Web Vitals report)<\/a><\/td><td>\u2714<\/td><td>\u2714<\/td><td>\u2714<\/td><\/tr><\/tbody><\/table><figcaption>Tools to measure Core Web Vitals<\/figcaption><\/figure>\n\n\n\n<p>Tools like Lighthouse that load pages in a simulated environment without a user cannot measure FID (there is no user input). However, the Total Blocking Time (TBT) metric is lab-measurable and is an excellent proxy for FID. Performance optimizations that improve TBT in the lab should improve FID in the field (see performance recommendations below).<\/p>\n\n\n\n<p>The performance of a site can vary dramatically based on a user&#8217;s device capabilities, their network conditions, what other processes may be running on the device, and how they&#8217;re interacting with the page. In fact, each of the Core Web Vitals metrics can have its score affected by user interaction.<\/p>\n\n\n\n<h3>Lab tools to measure Core Web Vitals&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><strong>Lab<\/strong> Tool&nbsp;<\/th><th>LCP<\/th><th>FID<\/th><th>CLS<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome DevTools<\/a><\/td><td>\u2714<\/td><td>\u2718 (use&nbsp;<a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TBT<\/a>&nbsp;instead)<\/td><td>\u2714<\/td><\/tr><tr><td><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse<\/a><\/td><td>\u2714<\/td><td>\u2718 (use&nbsp;<a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TBT<\/a>&nbsp;instead)<\/td><td>\u2714<\/td><\/tr><\/tbody><\/table><figcaption>Lab tools to measure Core Web Vitals&nbsp;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2>How to User Google Lighthouse?<\/h2>\n\n\n\n<p>There are a couple of ways to generate a Google Lighthouse audit:<\/p>\n\n\n\n<ul><li>Google Lighthouse in Chrome Developer Tools<\/li><li>Google Lighthouse as a Chrome Extension<\/li><\/ul>\n\n\n\n<h3><strong>Google Lighthouse in Chrome Developer Tools<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/d2woeiihr4s5r6.cloudfront.net\/blog\/lighthouse\/google-lighthouse-developer-tools-report.jpeg\" alt=\"google lighthouse in chrome developer tools\"\/><figcaption>Generating a new Google Lighthouse Report from Chrome Dev Tools<\/figcaption><\/figure>\n\n\n\n<ul><li>Open the desired website in a new tab in Chrome Browser<\/li><li>Open Developer tools by:<ul><li>Clicking <strong>F12<\/strong> key or <strong>fn+F12<\/strong><\/li><li><strong>Ctrl+Shift+J<\/strong> for Windows<\/li><li><strong>\u2318\u2325I (Cmd+Opt+I)<\/strong> on Mac<\/li><li>Right click on your mouse anywhere in the webpage and click Inspect<\/li><\/ul><\/li><li>Click &#8220;<strong>Lighthouse<\/strong>&#8221; from the tabs of the Developer tools<\/li><li>Choose the <strong>Categories<\/strong> for your audits and the <strong>Device<\/strong> (Desktop or Mobile device)<\/li><li>Click <strong>Generate Report<\/strong><\/li><\/ul>\n\n\n\n<h3>Google Lighthouse as a Chrome Extension<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/d2woeiihr4s5r6.cloudfront.net\/blog\/lighthouse\/google-lighthouse-chrome-extension.jpeg\" alt=\"google lighthouse chrome extension\" width=\"244\" height=\"317\"\/><figcaption>Generate Report from Chrome Extension<\/figcaption><\/figure><\/div>\n\n\n\n<ul><li>Go to <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse Chrome Extension<\/a> link<\/li><li>Click <strong>Add to Chrome<\/strong><\/li><li>Click on the browser toolbar on the Lighthouse extension (top-right corner)<\/li><li>Click <strong>Generate Report<\/strong><\/li><li>Google Lighthouse Report will open in a new tab<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/d2woeiihr4s5r6.cloudfront.net\/blog\/lighthouse\/google-lighthouse-chrome-extension-report.jpeg\" alt=\"google lighthouse report from chrome extension\"\/><figcaption>Results from running a Lighthouse report from Chrome Extension<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Written by <a href=\"https:\/\/coursinator.com\/instructor\/bogdan-vazzolla\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"broken_link\">Bogdan Vazzolla<\/a>.<\/em><\/p>\n\n\n\n<p><em><a href=\"https:\/\/loadfocus.com\/\">LoadFocus<\/a> is a cloud performance, <a href=\"https:\/\/loadfocus.com\/load-testing\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"load testing tool\">load and stress testing tool<\/a> which provides the infrastructure to run tests with thousands of concurrent users, from <a href=\"https:\/\/loadfocus.com\/locations\">multiple cloud locations<\/a>, in less than a few minutes, keep history of the results, compare different runs to inspect performance improvements or performance degradation.<\/em> It also supports running <a href=\"https:\/\/loadfocus.com\/jmeter-load-testing\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"jmeter load test\">JMeter load tests from the cloud<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>If you know nothing about your customers&#8217; experience with your website, Google Lighthouse might be the right tool for you. Google Lighthouse is an open source automated website auditing tool from Google, used for discovering issues and opportunities to improve the overall user experience of your website. Whether you&#8217;re a product owner, business owner or&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/what-is-google-lighthouse\" class=\"more-link\" title=\"Read What is Google Lighthouse?\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":1953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,316,104],"tags":[284,320,321,322],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1939"}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=1939"}],"version-history":[{"count":0,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/1953"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=1939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=1939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=1939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}