The internet connections get faster, and the devices that we use for browsing the web get more powerful. On the other hand, our websites get more and more complex, and the connection might fail at some point. Forgetting about performance can seriously hurt the user experience. BBC stated that on their website, for every additional second a page takes to load, 10% of users leave. In this article, we go through Lighthouse. It is a tool that aims to help us improve the quality of our web pages by performing audits.

Released first as a Chrome extension, Lighthouse is now available in DevTools out of the box in the Audits tab. There are quite a few types of audits that we can run. Let’s go through all of them and explain their meaning.

Running audits with Lighthouse

The performance audit aims to help you identify any issues that might hurt the time of your page load. It gives you information about the performance of your application by showing you the score that you achieved and helping you increase it. The performance audit is divided into a few categories. The first of them is called metrics.

For this article, I did an audit of the main page of Reddit

Metrics

The first thing that catches an eye is the First Contentful Paint. It measures the time from entering the page to when the browser renders the first bit of the content to the DOM tree. Even if there is still a long way to go before the site is ready to use, rendering some content acts an indicator that the page is loading correctly.

The First Meaningful Paint, on the other hand, indicates the time at which the primary content is visible. The definition of what is the primary content might differ from site to site. The first meaningful paint is a metric that aims to answer the question: “is the site useful?”. Web pages usually have parts that are more important than others. Therefore, getting the crucial elements to render fast can create an impression of smoothness even if the process has not yet completed.

Speed Index indicates how quickly the visible content populates. It takes the visual progress of the page and computes a score for how fast the overall content painted.

The First CPU Idle is an important metric that shows how much time it takes for the main thread of the page to be free so that it can handle input. The audit expects the most elements of the interface to be interactive. Aside from that, it requires the page to respond in a reasonable amount of time to input.

Time to Interactive measures the time that takes the website to be completely interactive. It means displaying useful content, registering event handlers for most visible elements, and being able to respond to interactions within 50 milliseconds.

The Estimated Input Latency estimates how long the application takes to respond to the input during the five most busy seconds of the page load. Remember that users perceive any time greater than 100ms as a perceptible delay.

If you would like to check out more details on the input latency, check out Measure Performance with the RAIL Model

Suggestions for improvements

Not only Lighthouse can provide you with a score, but it can also suggest how we can increase it. Opportunities and Diagnostics offer you a list of improvements that you can perform to improve the page.

If you don’t find much here, you can turn on throttling to put more strain on the site. Doing that can help you find more bottlenecks and deal with them.

Progressive Web Apps

The Lighthouse audit also encourages to implement Progressive Web Apps (PWA). It checks many things connected to them specified in the Progressive Web App Checklist.

One of the things that Lighthouse checks is the usage of service workers. If you want to know more about them, check out The basics of Service Workers: how should our application behave when offline? and Using Push Notifications with Service Workers and Node.js

Aside from matters connected directly to PWA, it also checks if you serve your website over HTTPS and if it is responsive.

Accessibility

The accessibility means giving as many people as possible the ways to use your website, even if the abilities of those people are somehow limited. Taking accessibility into consideration might also benefit people using mobile devices and those with slow network connections.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

– Tim Berners-Lee, best known as the inventor of the World Wide Web

Even though there are quite a few things that can be automatically detected, manual testing is also encouraged to identify all possible issues.

Best practices

Another profitable audit concerns best practices. It can show you many different issues connected to your page that should not happen in a production environment. An example of that is an error logged to the console that suggests some unresolved problems. It can also analyze your JavaScript code and check things like using deprecated APIs, for example, WebSQL and Application Cache. A very cool feature is examining your JavaScript libraries looking for potential vulnerabilities. If there are any, it links to the snyk.io website with the description of the problem.

The best practices also raise the issue of performance. One of the audits encourages you to use the passive flag.

passive: A Boolean which, if true, indicates that the function specified by listener will never call preventDefault() . If a passive listener does call  preventDefault() , the user agent will do nothing other than generate a console warning. See Improving scrolling performance with passive listeners to learn more.

Search Engine Optimization

Search engine crawlers follow links from page to page and index the content. They follow specific rules, and by applying them to your page, you give it a better chance to be ranked higher and increase your traffic. The SEO audit checks make sure that we adequately optimized our page in terms of the matters taken into consideration when crawling your site. It checks many best practices when it comes to formatting your content in a wat that let the crawlers understand it better.  Making your website mobile-friendly also plays a role in making your SEO better. Lighthouse, aside from checking things like the proper <meta name="viewport"> tag, also suggests an additional Mobile-Friendly test.

Summary

In this article, we’ve covered the way that Lighthouse scores websites and how we can benefit from that. It gives us an overview of what we’ve done right and what still has some room for improvement. By taking the advice that the Lighthouse audits give you, we can gain a performance boost, patch security vulnerabilities, and boost our SEO. All of the above make it worth checking out!