Google Lighthouse is an automated tool built to aid developers in creating better web pages. It is free, open-source, and embedded in Chrome with the rest of the Developer Tools. Lighthouse gives you the capability to audit web fundamentals such as performance, progressive web app review, general best practices, accessibility, and Search Engine Optimization (SEO). Written in JavaScript, you can run it against any web page, and even measure site pages that require authentication.
In addition to the embedded version that comes with Google’s Chrome browser, you can also run Lighthouse from a Node module or as a browser extension in Firefox. Installing a Lighthouse extension for Chrome is also an option if you do not want to utilize the built-in web developer tools.
Google Lighthouse Version 6
Support for Core Web Vitals
Since the launch of version 6, core web vital metric measurements now form part of this web development aid. By adding features that calculate the Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), Google Lighthouse gives developers and designers the capability to ensure their sites conform to the latest web search standards.
Version 6 of Google Lighthouse also introduced several other new features. The Total Blocking Time (TBT) measures a web page’s load responsiveness. This metric quantifies the total time between the First Contentful Paint (FCP) and Time to Interactive (TTI). It is similar to the First Input Delay (FID) core web vital as TBT gauges any delays that prevent initial user input and interaction.
Unused JavaScript and Accessibility Audits
In addition to the core web vitals, Google Lighthouse version 6 also offers new audit functionality. First introduced in mid-2017, the Unused JavaScript audit is back after being disabled due to its high-performance overhead. Accessibility audits now include support for several new tags that identify areas that could cause screen readers issues. For example, the aria-hidden=”true” element hides an entire page or HTML code block from assistive technology users. Google Lighthouse identifies these tags highlighting areas of text that are not visible to users leveraging these aids.
Performance Budgets
Version 5.0 of Google Lighthouse introduced performance budgets. This feature supported adding thresholds related to each resource type, be it scripts, images, or Cascading Style Sheets (CSS). Lighthouse 6 has taken this functionality one step further with budgeting metrics. The new functionality allows you to audit metrics such as First Contentful Paint (FCP).
Source Location Links
Another newly added feature to Google Lighthouse is the capability to trace a page issue to a particular line of source code. The report generated by the tool will highlight the file and the relevant line. Using Chrome Developer Tools, you can leverage this bug finding functionality by using the built-in Sources panel.
Charset Declaration
A missing or late charset declaration can lead to slow page speeds, detrimentally impacting the user experience. As servers and browsers communicate over a network connection, they send and receive bytes of data. If the server neglects to specify the character encoding format, the browser cannot translate the bytes to characters when it receives the HTML file. The browser leverages several heuristics to determine the encoding it should use if the charset tag is missing. Best practice dictates that the HTML file should declare the <meta charset> in the document’s first 1,024 bytes. The new charset declaration audit embedded in Google Lighthouse identifies any issues with this particular element.
Google Lighthouse Scoring
The score generated by Google Lighthouse uses a combination of phasing and weighting to determine a web page’s performance metrics. It measures each phase’s time, be it early, mid, and late and applies a formula for the time taken to load each stage. It also measures the main thread and predictability of the page load process. Over and above the phase time calculation, the tool also weighs in and scores several key metrics. These include the FCP, Speed Index (SI), LCP, TTI, TBT, and CLS.
Measuring User Experience with Google Lighthouse
All web developers need to place user experience (UX) at the core of their solution architecture. This fundamental requirement will ultimately determine the success of your web app. As the online marketplace is a highly competitive environment, differentiating your services is vital. A successful user experience strategy ensures that users find benefits in your content or application. Typically, six factors influence this measure – usefulness, usability, desirability, value, accessibility, and findability.
When it comes to speed and performance, the two user experience factors that apply are accessibility and findability. As most commercial transactions in a digital economy start with a web search, developers must ensure their sites achieve a favorable page ranking. Since Google is the world’s leading search engine, obtaining a position on the first page provides any organization with a distinct competitive advantage. As technology changes, Google continuously modifies its search ranking algorithm, aligning it with current consumer and industry trends.
One of the new variables that Google will utilize in their algorithm moving forward are metrics that make up the core web vitals. These metrics will determine a site’s page ranking, page load speed, mobile, and HTTPS support. Google Lighthouse now offers support for these metrics, making it an invaluable tool for web developers. Not only does it score your site on the crucial factors that determine your page rank, but it also offers UX recommendations and insights.
Using Google Lighthouse with a Content Delivery Network
A Content Delivery Network (CDN) enhances web page load speeds and performance by caching static content across a globally distributed network. As users access these resources from nearby locations, it reduces the transfer time dramatically. If you are leveraging a CDN and want to ascertain its performance using Google Lighthouse, you must test it from each location to obtain an accurate result. This approach will also illustrate the effectiveness of your CDN strategy, highlighting areas that need attention. A global issue with a particular score may indicate you need to remediate the core web application. Alternatively, testing may highlight a problem in a specific geographic region. In that instance, you may only need to reconfigure a relevant CDN setting. Either way, leveraging a CDN’s services and continuously assessing its performance with tools such as Google Lighthouse is a core development process requirement in today’s competitive, online economy.