Get insights from your web app using Lighthouse
So your web app is working fine, but how reliable is it?
Reliability is probably an essential thing for your users. Many developers may think that following best practices while coding is enough to accomplish this, but it’s not.
Nowadays, there are many tools to test how well your website performs. In this reading, I’ll show you the benefits from one of them, and my personal favorite, Lighthouse by Google.
Lighthouse is an open-source, automated tool for improving the quality of web pages.
- Google Developers
It lets you run audits for performance, accessibility, progressive web apps, SEO, and more. The results are shown as reports with scores for every subject, with useful feedback to improve them.
Auditing a web app
There are three ways to use Lighthouse:
- On web.dev’s website
- Directly on your browser using its Chrome extension
- Using the command line in your project’s folder
npm install -g lighthouse
To keep things simple, I’ll be using web.dev’s website to create a report for Hey.com, but you can use any web app you like to make this test.
- Visit https://web.dev/measure/
- Enter https://hey.com/ in the web page URL
- Click on run audit to see the magic happen
- The generated report looks like this:
As we can see, their web app is doing pretty well in all four subjects. Let’s break down the core concepts Lighthouse uses to generate this score.
FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.
Speed Index measures how quickly content is visually displayed during page load.
LCP measures when the largest content element in the viewport is rendered to the screen.
TTI measures how long it takes a page to become fully interactive.
TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.
CLS measures the total of all individual layout shift scores for every unexpected layout shift during the entire lifespan of the page.
Great! all needed feedback is also shown from lowest to highest impact. But there’s more; if you click the View Report button, a new tab opens with even more specific details about this report.
Plugins
This example uses an open-source project, in which contributors can extend the functionality of Lighthouse by creating plugins. It is helpful for developers who want to measure more things that this tool provides.
See more about plugins here.
Thanks for reading, I hope this was an easy to understand introduction for Lighthouse, play with it and let me know what you think in the comments.
