Google Lighthouse, A Dev’s Best Friend

You ever wonder if your website is good? More than just looking great and functioning properly. So good that you make it to the first page of google? Have no fear, Google Lighthouse is here! When I first found out about this technology the way that I create web apps has changed drastically. Google Lighthouse runs multiple tests on your website, and takes in to account your websites Performance, Accessibility, Best Practices, and Search Engine Optimization (SEO.)

For Starters, if you currently don’t have Google Lighthouse installed on google chrome go do it now, I promise you wont regret it. A simple google search for ‘google lighthouse download’ should bring you to app store where you can add in the extension. After that, go to any website ( or your own ) and open up your browser console. There should be a tab that says “Lighthouse.”

After clicking that you’ll be brought to the types of tests you can run on your website.

All of the test you can run can be toggled here. I’d recommend running all of them just to get an idea on where you as a developer might be slacking.

• Performance: This is the most important test that you can run on your website, if you score low on performance it should be the first thing you work on. Luckily Google will actually tell you where the performance issues stem from. It will also open up a lot of insights about how the web actually works, and it’ll be something you can keep in mind on building your next projects. A problem that I stumbled upon recently was when I was running google lighthouse on one of my older projects, the website would load a bunch of images on the homepage using a .jpg file. Fun Fact, there are better ways to serve images on the internet:

Who knew? Changing out my files to WebP, or other formats would make my website perform faster! Also, as I continue to learn from these tests, I very quickly found out that doing one massive fetch to get all of my data is not efficient at all. So now I’ll have to incorporate lazy loading, and fetching new files as the user scrolls down, using Lazy Loading. There’s plenty more aspects that I’ve overlooked while developing, but I’d recommend you check out how your websites score on performance.

• Progressive Web App (PWA): PWA’s are the next generation of websites. They are basically websites that you can download onto your phone, and you can just use them as an app! If you have 100 seconds to spare here is an amazing video explaining an overview of what PWA’s are. If you want to take your skills as a developer to the next level, I’d recommend you try your hand on transforming your website into a PWA.
• Best Practices: This one speaks for itself, if you constantly find yourself asking the question, ‘hey is this the best practice?’ Lighthouse will let you know. If you keep forgetting to make ‘https’ requests, displaying poor quality images, or if your anchor tags aren’t working properly. Lighthouse has got your back.
• Accessibility: This test checks to see if anyone with a disability of any kind would still be able to use your website. For example, are you the type of developer that always forgets ‘alt’ tags on images? Can your website be used strictly using a keyboard? You need to keep in mind all of the Users that may be visiting your website, and make it accessible to anyone.
• Search Engine Optimization (SEO): Scoring high on this test, will put you on the fastest track to getting users to use your website. Also, If your website scores low on any of the other tests, don’t expect this one to rank high. SEO takes in a lot of different variables, like keywords, meta tags, how long a user stays on your page, and other things that google wont tell you. Developers and Google have been playing a cat and mouse game since the Google first became a thing. It’s quite adorable, previously developers would dump keywords, links to popular websites, and make infinite loops referencing their own website to increase their SEO. It’s no secret that most people don’t visit the second page of Google, so getting to the first page is a make or break if you’re a company trying to get exposure. Here’s a more in depth video explaining SEO.

To put it all together, If you are a developer that isn’t sure if there skills are adequate, if you are trying to build good web applications, or if you’re just simply curious, I’d recommend using Google Lighthouse. Being able to see an actual grading on work will let you know what you as a developer can do to get better. And you know what the best part is? If your website returns fantastic results, throw that on your resume, or portfolio. Employers, and Clients love to see that you are a developer that keeps these fundamentals in mind. If you want to challenge yourself even further, I’d recommend throttling you internet speed to simulate a poor internet connection, it’s like developing on hard mode. Thank you for reading, I hope Google Lighthouse helps you on your mission to becoming the best developer that you can be.