Getting started with Google Lighthouse
Front-end Testing Made Easy
What is Google Lighthouse
Google Lighthouse is a free, frontend testing tool that is meant to increase the quality and build of web pages. It does this by running tests for 5 different categories: Performance, Accessibility, Best Practices, Search Engine Optimization (SEO), and Progressive Web App (PWA). Each category will give scores from 0–100 on how well the webpage did in each aspect. It will color-code scores based on the severity (green for good, orange for mild, and red for bad), and it will also give tips on how to improve these scores for future tests. Google Lighthouse is an incredible tool and can take the web pages you’re making to a different level. But, before you start using this amazing tool, you should know how to first access it.
Accessing Google Lighthouse
There are a couple of different ways to use Google Lighthouse. It can be done inside the developer tools, a chrome extension, the command line, or even a node module. To keep this simple though, we’re just gonna use the developer tools, which you only need Google Chrome to use (if you don’t have Google Chrome you can download it for free here). Once starting Chrome, right-click anywhere on the page, click Inspect, and that’ll open your developer tools. Once here, all you have to do is click on Lighthouse at the top. If you don’t see it, click on the >> at the top, and Lighthouse will be in the menu that pops up. Congratulations! you now know how to access Google Lighthouse. Now, on to the fun of using it.
Using Google Lighthouse
For this blog article, we’ll be testing the Reddit home page and the Facebook login page, but these tests can be run on just about any site you can think of, even the ones you make! I suggest having two tabs open, one for each webpage, to compare the tests. By default, the Lighthouse Device setting is set to Mobile and the test Categories have all five checked. This is fine, but for this blog, we’ll be switching the Device setting to Desktop. At this point, everything is set up so you can click Generate Report and the tests will start (this may take a few seconds). Great! You just ran your first tests using Google Lighthouse, I’m so proud of you. If you’d like, you can run a few more tests and take an average from these scores, just to ensure you’re getting an overall view of these results. Now, we can talk about the results and what they all mean.
Performance
The purpose of these Performance tests is to see how fast your website loads. It’s broken down into 6 different tests.
- First contentful paint is how long it takes for the first thing to show up on the screen
- Speed index is how quickly content is visually displayed to the user
- Largest contentful paint is to see how long it takes for the biggest thing on the page to load
- Time to interactive is how long it takes for the page to become fully interactive
- Total blocking time is how long the page is blocked from taking any sort of user input
- Cumulative layout shift is the measure of the things on screen shifting from their original positioning to another
If we compare Facebook’s score to Reddit’s then we can see a major difference, Reddit has so many things that it has to load before it’s done whereas Facebook’s login page is super minimal that it’s ready in almost an instant.
Accessibility
Accessibility is very important in a web application. So, if you’re making your own, be sure to pay attention to this part. This measures how accessible the website is to people with disabilities; anyone should be able to come to the site and be able to perceive, understand, navigate, and interact with it. As you can see from the tests done, these can range from the contrast of the text color on the screen to its background or even buttons and links not being labeled correctly. Reddit has so many things that certain aspects may have been missed when focusing on accessibility, whereas with Facebook, there’s much less so it’s nearly perfect and all very accessible.
Best Practices
The Best practices section is for improving the overall code health of your application. These focus more on the website’s code that normal users of the site won’t see but is important for the development side. With these, some fine tunings of the application can occur. It can be calling out unused code in the application, images being displayed incorrectly, and even errors being logged to the console when they shouldn’t be.
Search Engine Optimization
Search Engine Optimization is what tells you if the page you’re testing would be likely to show up in search results for Google searches. You’ll find a few more code-related things here, so if you’re developing your own app, then it’d be best to pay attention to the feedback you get in this section.
Progressive Web App
This final section doesn’t give a score but it’s still very important. To have a Progressive web app means the application is reliable and accessible to anyone, anywhere, on any device. The internet is huge. With this in mind, you want to make sure that whatever it is you’re making or viewing can appear on these other platforms without any complications. It’s sort of like you’re spreading the love of the internet to everyone.
What comes next is where Google Lighthouse shines, it will give you tips on how to fix these issues. Following these could be that last push to make your application even better than what it is. Just remember though, it can be hard to get a perfect score of 100 for some categories so don’t base all of your time on them. Making a webpage should still be fun and be able to express everything you want it to do in the way that you want it. This is just another tool that’ll be added to your toolbelt. Have fun using it!