Google Lighthouse Using Tips To Automate Web Performance

Website performance testing is crucial for every web application as it is must for good user experience. End user expect pages to load as quickly as possible and when they don’t, it decreases the satisfaction.

According to BrowserStack, 1 in 4 visitors would leave a site if that takes more than 4 seconds to load. Another reason why we should care about page speed is because Google algorithm favors faster websites for both mobile and web browsing, So it’s important that we review site performance and take favorable actions to improve it and here Google Lighthouse tool can help us a lot for the performance improvement.

Why Google Lighthouse tool

Google lighthouse tool is an open source tool developed by Google which helps us to detect many important factors like Best Practices, Performance, SEO and Accessibility of any web application and score them. It runs various automated test against the web-application and generates an audit report with passed and failed test. We can easily analyze the failed test and decide upon the corrective actions required to fix the failed test, which in turn will improve the overall performance for the web applications.

The best part of Google Lighthouse is, it’s integrated with Google Browser at Chrome DevTool section or even we can use it as browser’s plugin, So when visited any web page, you can start analyzing it and get the automated report.

So why automate it when we get it easily?

Well, when you analyze any web page using lighthouse tool, you will notice that you need to visit the page and then start analyzing it to get the audit report. This iterates every time for each and every page. Now consider you have 100 pages to test, it means if we do it manual way we need to visit 100 pages and click analyze button 100 times which takes time and manual effort both, also we need to download the report every time and save it at desired location in our pc for future reference.

So now we don’t need to monitor it as automated script will do it for us whenever needed along with downloaded reports at preferred location in our pc.

Here I will guide you to prepare an automated script (basically a Bash script) which we can run from Windows PowerShell or Command Prompt terminal. We performed these steps on Windows Operating System and it may vary for different OS.

Step 1: NVM (Node Version Manager) Installation for Windows

NVM allows us to manage different versions of Node.js. You can follow this page for installation process but here we are installing it in a manual way.

• Download nvm-setup.zip from release page for the most recent version.
• Extract and install it
• Once installation is done, Open terminal with admin rights to check current version of Node.js of your system using this command nvm ls 

Step 2. Install Node.js using NVM 

• Now run command to install Node.js version 20.3.1. It will download and extract the version and when done, it will ask whether we want to use the current version. nvm install 20.3.1

• Command to use current version nvm use 20.3.1

Step 3. Install Google Lighthouse 

• On the same terminal we can type the command and press Enter to install Google lighthouse npm install -g lighthouse

• And here we go, all required installations are done,

Are we ready to go?

Sadly 🙁 No, as we are trying to run bash commands on Windows, we need to perform few more steps and one of them is WSL( Windows Subsystem for Linux) installation

Step 4. Install WSL on Windows System

• First go with the steps to verify is Windows settings are all set or not.

Setting->System -> For developers-> Developers mode->on->yes.
Control Panel-> Program -> Programs & features->Turn windows features on or off-> Windows subsystem for linux-> Click on it.

• If you did any changes on above steps then you must restart  your computer to apply these changes.
• Once restarted pc, again open terminal with admin rights and then type command to install WSL wsl --install

• Now run this command to see if any distribution is installed or not wsl -l -v
• If there is no such distribution installed then use command to see all available distribution wsl --list --online

• Now installing Ubuntu as distribution using command wsl --install -d Ubuntu

• Once you completed with Ubuntu installation and setup completely, check WSL version using same command wsl -l -v
• If you see version as 1, then try to update it to 2 using command wsl --set-version Ubuntu 2

• You may encounter with an error due to your old pc hardware configuration or due to virtual machine platform feature being disabled. Until you resolve it, you won’t be able to update WSL version, so If you are stuck with an error, you can follow the below article. It will show you different solutions based on the error you are getting. For one of my older pc (with Windows 10 OS) I was stuck in an error caused due to virtual machine feature related error even when I enabled it via command line using command, but no luck! 🙁
  dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  It was still showing me an error and when I enabled the virtual machine option from BIOS, then only it worked for me. So, please refer the article to sort it out.

Helping Article : https://learn.microsoft.com/en-us/windows/wsl/install

I trust you can complete all of steps and no error can stop you to prepare automated lighthouse tool. Trust me You’re Champ !

Step 5. Prepare Your Script

• Open any text editor available with your pc and paste the script written below
• When pasted, save the file at desktop with proper name such as Lighhouse-tool.sh 

#!/bin/bash
# Websites to test
	urls=(
		"https://landgconsultancy.com/"
		"https://landgconsultancy.com/our-team/"
		
		# Add more URLs addresses here
	)
	# Where to save the reports
	outputDir="Lighthouse-reports"
		
	# Create the output directory if it doesn't exist
	mkdir -p "$outputDir"

# Specify Node.js version
	NVM_DIR="$HOME/.nvm"
	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
	#nvm use 21.7.1
	
	# Get the total count of URLs
	totalUrls=${#urls[@]}
	
	# Initialize the count of generated files
	generatedFiles=0

	# Loop through each URL and run Lighthouse test
	outputPath="$outputDir/$(date +%Y-%m-%d-%H-%M-%S).html"
	for url in "${urls[@]}" 
	do
		outputPath="$outputDir/$(date +%Y-%m-%d-%H-%M-%S).html"  # Create a unique output path for each test
		echo "Running Lighthouse test for URL: $url"
		echo "Output Path: $outputPath"
		npx lighthouse "$url" --output html --output-path "$outputPath" --only-categories performance seo accessibility best-practices --chrome-flags="--headless" --preset=desktop
		
		# Remove --preset=desktop to capture autidt for mobile device only
		((generatedFiles++))
	done
	
	echo "Total URLs tested: $totalUrls"
	echo "Total report files generated: $generatedFiles"

Step 6. Explanation of the Script

• #!/bin/bash: This line is like a special title that instruct the computer that a set of instructions written in the “bash” language.
• urls=( … ): Here, we can a list of websites URLs we want to test. we only to provide Urls in double quotes. No restrictions on number of URLs.
• outputDir=”Lighthouse-reports”: Here we create a directory folder where we wanted to store all of the lighthouse reports.
• mkdir -p “$outputDir”: This line will creates the folder (if not exists already )where reports will go.
• NVM_DIR=”$HOME/.nvm” … nvm use version: This helps the computer use the right tools to do the test.
• outputPath=”$outputDir/$(date +%Y-%m-%d-%H-%M-%S).html”: This line creates a specific name for each html report, like adding a date and time stamp to report to make it unique.
• for url in “${urls[@]}” … done: This is like a loop in a to perform repeated actions. It goes through each website url in the url list and does the same steps for each.
• echo “Running …. URL: $url”: This will print the string on console before gathering the audit reports.
• echo “Output Path: $outputPath”: This will print only the folder path where we are storing the report.
• npx lighthouse “$url” … –preset=desktop: This is the most important line which will tell the computer to use lighthouse tool to capture audit reports and score for the supplied categories. If you have any specific category, use that name only else keep all four categories as written in above code.
  –preset=desktop :This parameter will record the desktop report only, whereas if you remove/comment it, will generate mobile report in default.
  –chrome-flags=”–headless” :This parameter can be added on the same line if we wanted to capture the audit report without launching chrome browser but if you wanted to see what’s going on, just remove it and see the magic.
• echo “Total URLs tested: $totalUrls” & echo “Total report files generated: $generatedFiles”:  Here we are printing the no. of urls we tested vs. no. of reports generated. It is only for the comparison of counts to see if all are good. While running the scripts, you can avoid all of the echo statement as these will only print over the terminal and no impact on the reports.

Step 7. Execution of the Script

• So now script is ready and we are going to play with it. Why wait? Just open the terminal again with admin rights.
• Use cd command to move to the directory path where we kept the script lighthousetool.sh. cd [file_location]

•  Now you have reached the location where you kept the script. In my example, its desktop location. you can check the properties of the script file to get the location.
• Now run the script using command bash lighthouse-tool.sh
• That is it, you can see the script execution at console itself.

• Once the script is done with the execution, we can go on the Report directory.
• New directory with the provided name will be created (if not exists). All of the generated reports will be found there.

 
And that’s it! We have created our automated test scripts for performance testing using Google Lighthouse tool for multiple URLs in one go.

What’s next?

These automated scripts of Google lighthouse tool will work to capture audit reports only for non authenticate pages but what if you need to capture audit reports for logged in pages (with authentication).

Don’t worry we will soon update the article to show how we can do audit with authentication. See you soon !

References:

• https://developer.chrome.com/docs/lighthouse/overview/
• https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows
• https://learn.microsoft.com/en-us/windows/wsl/install