TechStarters Logo
Blog Home

Lighthouse 101

What is Lighthouse?

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your website.

How to use Lighthouse

You can download Lighthouse and add it to your Google Chrome extensions. It will then be a little lighthouse picture in between your profile and the bookmarks star. If you do not want to download the extension fear not, you can just hit F12 and then go to the audit tab at the top of the window that pops up. Click the radio buttons for what you want to run the audits for and choose either mobile or desktop. Then just hit the run audits button and let Lighthouse shine a light on all the good and bad of that website.

The Five Audits

Lighthouse shows up to five audit categories depending on if you have all the of the boxes checked. The five audits are Performance, Accessibility, Best Practices, S.E.O. and the Progressive Web App. Each of these audits has different things that are checked individually and they all have there own score.

Performance – Is how quickly and smoothly the website loads. Lighthouse looks at how fast things like first paint and images load. Then they add up the seconds and milliseconds and then give a score on how long it took.

Accessibility – Is how easy it is for everyone, most of all for people that have disabilities. Also, they look at the accessibility of the area, such as the content is not available in your area, or unable to find a familiar menu on a tablet.

Best Practices – Is basically that. Using the best practices when making a website to keep your site secure or having the least amount of error-ridden code. From using Https to avoiding certain code like or display: box.

S.E.O. – Search Engine Optimization, this test is to see how good your Meta and H1 tags are. Also, your keywords and alt text for your pictures.

Progressive Web App – This is for Web Applications only, this will show up gray if you use lighthouse for a normal website meaning NA. Progressive web apps are websites that look and feel like an app but you don’t have to download them since they are indeed still websites. To be considered a progressive web app you need to go through another series of checks and hoops.

How to Utilize Lighthouse

Lighthouse gives a lot of useful information, not only giving the scores but telling where and how the website falls short. So what do you do with this information? If you don’t know much about coding or SEO it could seem like its all just gibberish. That’s where we come in. Lighthouse can give you the base of what you want to make better in your website and we have the tools and knowledge to what the Lighthouse says into practice. So if you run the Lighthouse audits and it comes up with a lot of red, don’t fret. Just stay calm and let a Nerd handle it #TechStarters.