Google Lighthouse Quick Run Through
What is Google Lighthouse and how can it improve your site and user experience. I'll run through a quick look at lighthouse and how it can help you to develop a customer-centric website.
Google’s Lighthouse is a free and open-source tool that’s automatically part of the google developer tools suite.
It allows you to load your website and create a report of your site in a scale of various categories from 0 to 100.
The categories it focuses on are:
Performance
Accessibility
Best Practices
SEO
PWA
It not only gives you a rating score for each section on your site, but highlights the sections where it could be improved, suggestions for the improvements, links to documents explaining the reasons and also being able to switch between mobile and desktop devices.
How to access Lighthouse in developer tools
To access lighthouse in developer tools, first open the developer tools menu, which you can do by either right clicking on the page and selecting Inspect from the popup menu
Or you can select the menu dropdown button on the right hand side of the Chrome browser, select the More Tools option in the menu and in the next section select Developer Tools and this will open the DevTools panel
Once the Developer Tools panel is open, if Lighthouse isn’t displayed in the tabs, select the double arrows to open the dropdown and select the Lighthouse option to open the window.
Running Lighthouse test
Running the test is quite simple, once the Lighhouse tab is open in the Developer Tools panel, you can simply select the Analyze page load and it will take a few seconds to run, the window may flash a few times and then you’ll get a result.
A couple area to point out is you can customize the test that’s run by
Device
Category
Mode
By running between the Device type it will return results tailored to the device being tested on as Mobile will have different requirements for users as opposed to Desktop.
*NOTE: When running, keep in mind of plugins and extensions you have running in Chrome as they can effect the results of the test, so sometimes it may be worth running in incognito so that it doesn’t run some of them for testing.
Now that we have the panel open, I’m going to have the defaults selected and Desktop and let’s run this test.
Test results
Obviously you want to aim for 100% in all the areas, but sometimes you have things running on your site that you can’t control that can reduce these. But alot of the time, there are ways to improve these to get to the 100% for each section.
Here, I’ve run it againsr my personal profile website and it’s picked up a few areas for improvement (note that PWA is nothing as my site is not a PWA).
If you scroll down the page it will run through each of the sections and suggest possible options to improve your score.
Having a look at my performance, I’m so close to hitting 1 full 100%, but it seems like there’s something going on in the performance section, so if we scroll down in performance we can see:
It’s broken down into a few areas by colour:
Red - Need to be looked at and is reducing the score
Yellow - Suggestions for optimization that should be reviewed
Grey - Some suggestions
If we go into the item itself, we can see the details of what to do, a link to the Google Developer documentations explaining the issue, reason and potential ways to fix it, the location of the exact area that’s being flagged and the size this can fix.
So quite a lot of info just from 1 section and it points you in the direction on where and how to fix the issue and optimize your performance.
Summary
The Google Lighthouse tool is a vital tool as a Frontend Web Developer to optimize your website performance, accessibility, best practices and SEO.
This is something that will help particularly with your SEO to improve your sites standing in the searching rankings as they will be validating against these statistics too.
I use this tool with all my sites and it gives great insights to where and how you can improve your site to make it perform the best it can. And on a positive, when you get 100% for everything in the results, it will trigger fireworks in the Lighthouse panel saying congratulations!
Anyway, until next time peeps, happy Dev-ing! 😁