Google Lighthouse Audit Guide

Google Lighthouse Audit: What it is and How to Use it

You may be wondering what the Google Lighthouse audit is or how to use it on your website. In this article, we will be going over these questions as well as specifics for improving your site’s performance!

What is Google Lighthouse?

No, it has nothing to do with stock-photo backgrounds or seeking out ships at sea. But, it will likely be more useful to you and your small business! Google Lighthouse is an open-source, automated audit tool for improving the quality of web pages. Instead of blindly adjusting your site, applying Google Lighthouse gives you real time benchmarks.

What are the Google Lighthouse Audits?

Available as a Chrome extension or a node command line module, Google Lighthouse performs audits in the categories of performance, accessibility, progressive web applications, best practices, and SEO. Lighthouse conducts audits by rating these categories out of 100 for user experience and any issues you may have in your site.  

Rating your site comes with different scores. A good score is above 75 and is shown as green, a mediocre score is 45-74 and is orange, and a bad score is below 45 and is shown as red. Your goal is to bring all the ratings as close to 100 as possible, or at least above 80. 

Keep in mind that bringing up your score means a better user experience and resolving site issues! While it may feel like a hassle, performing the Google Lighthouse audits will be a very positive experience in the long run. 

Performing the Google Lighthouse Audit

Now that we have a better idea of what the Lighthouse audits entail, let’s go into how to use it! 

Getting Started With Lighthouse

There are various workflows that you can choose from. All Lighthouse workflows requires the download of Chrome at some point of time, so you can start there! Pick whichever suits you: 

• Chrome DevTools: for user-friendly reports and to easily authenticate pages for auditing
• Node Module: integrate Lighthouse into continuous integration systems
• Command Line: automate Lighthouse through shell scripts
• Web UI: to run Lighthouse without downloading anything

Using Chrome DevTools 

For this example, lets use Chrome DevTools. To perform an audit, first off, 

1. Download Google Chrome for your desktop. 
2. Go to URL that you want to audit.
3. Open Chrome DevTools
4. Click Audits 
5. Click Perform an audit… (DevTools will show you a list of all categories, leave them all checked)
6. Click Run audit 

And you’re done! Wait 60 to 90 seconds for the audit to complete, but you should receive a report looking like this: 

Boosting Audit Performance Score

Now that we’ve run the audit and received our report, it is time to boost those performance scores! There are many things that unknowingly slows down the performance of your site. Going under the Opportunities tab, we can see some of these problems and how to fix them. 

Removing Unused CSS

CSS stands for Cascading Style Sheets, it works hand in hand with HTML to create your site. While HTML is used to structure your web site, CSS determines your site’s style with fonts, colors, and page layouts.

Many times, there are large chunks of CSS code. You may want to go through your CSS file to remove unnecessary or unused code. This can cut down a lot of space and storage which will speed up your performance and raise your score. 

Preload, Prefetch, and Pre-connect

These three Ps, preload, prefetch, and preconnect will help save loading time and boosts performance. 

Preloading requests can make your page load faster. It offers more control over how certain resources are fetched for current navigation. It is best to preload your important images, Javascript, and CSS files. Through preload, resources that are initiated by Javascript and CSS can be preloaded and specifically applied. 

In the background during idle time, prefetch fetches data that might be needed later. After fetching these resources, they are stored in the browser’s cache. Prefetch is different from preload because while preload focuses on fetching data for the current navigation, prefetch focuses on fetching resources for the next navigation. 

Preconnect set up early connections before an HTTP request is sent to the browser. It saves time for users when it comes to securing connections. 

Deferring off-screen images

There are often off-screen and hidden images that slow down your site. Off-screen images appear below the field. These are images that your user does not see when they load a page, so there is no need to load these images during the initial load. Deferring the load and lazy-loading will come in handy. 

By lazy-loading these images after the initial page load, you can lower the loading time of your site. Lazy-loading can be done through various optimization plug-ins. Be sure to download a plug-in that doesn’t take too much space in itself. It will be counterintuitive if the plug-in decreases the same amount of performance it helps to increase. 

Removing or cutting down these off-screen images can help save over a second in time and increase your audit performance score.

Boosting Your Progressive Web Application Score

Progressive web applications load like regular websites but give users smoother and faster functionalities such as working offline and push notifications. Various online plug-ins can automatically perform these optimizations for you, such as SuperPWA.

Google Lighthouse Audit Overview

Hopefully through this article, you now have a better idea of what the Google Lighthouse Audit is and how applicable it can be for your site! We learned that when focusing on boosting performance, scores of many other categories were indirectly increased. While it may feel like you are just raising a score, trust the process and keep in mind that these scores directly affect your user’s site experience! Through some trial and error and some help from Google, you will have an amazingly user friendly site in no time.