Custom Monitor Google Lighthouse

Introduction

Google Lighthouse is an open-source tool which helps in improving the quality of web pages. It provides audits for performance, accessibility, progressive web apps, and more.

Lighthouse can be run in Chrome DevTools, from the command line, or as a Node module. Given a URL to audit, Lighthouse runs a series of audits against the page, and then it generates a report on how well the page did. You can analyze the audits on how to improve the page.

Prerequisites

• Google Chrome latest version
• Lighthouse
• JQ
• NodeJS ( 12 + )

Installation & Configuration

Catchpoint agents are pre-installed with NodeJS and npm.

To install the latest version of Google Chrome:
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
$ sudo yum install ./google-chrome-stable_current_*.rpm

Install Google Lighthouse

1. Installing Lighthouse can be achieved with a single command as listed below:
   $ sudo npm install -g lighthouse
2. To test the installation, run the following lighthouse command.
   $ lighthouse --chrome-flags='--headless --no-sandbox' http://www.google.com --output=json --output-path=report.json --save-assets
3. The command outputs the lighthouse data in a report.json file

Install JQ

JQ allows you to parse the JSON report generated by the lighthouse.
$ sudo yum install jq

Implementation

Write the Custom Script

1. Navigate to /opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox to create a shell script.
2. Create a shell script, which will be executed by the Custom Monitor script.
   $ vi lighthouse_report.sh
3. Paste the code given below and save it:

#!/bin/sh
regex='[-A-Za-z0-9\+&@#/%?=~_|!:,.;]*[-A-Za-z0-9\+&@#/%=~_|]'
test_url=${CP_UNSAFE_VAR_url}
metrics=${CP_UNSAFE_VAR_metrics}
if [[ $test_url =~ $regex ]]
then
     lighthouse --emulated-form-factor=desktop --quiet --no-enable-error-reporting --chrome-flags='--headless --no-sandbox' $test_url --output=json --output-path=report.json --save-assets
     echo "Host URL:" $test_url

     for i in $(echo $metrics | sed "s/,/ /g")
     do
     if  [ $i == "performance" -o  $i == "accessibility" -o $i == "best-practices" -o $i == "seo" -o $i == "pwa" ]
     then
     cat report.json | jq -r ".categories[\"${i}\"].score"*100 |sed "s/^/${i}: /"
     else
     cat report.json | jq -r ".audits[\"${i}\"].displayValue"| sed "s/^/${i}: /"
     fi 
    done
   exit $?
else
      echo "Unsafe URL"
    exit 1
fi

4. Run these commands to change the permission and owner of the shell script:
   $ chmod 500 lighthouse_report.sh
$ chown serveruser lighthouse_report.sh

Create the Custom Test

1. Create a Custom Test within the Portal with the JSON template given below.  Make sure that you replace the necessary values.

{
   "shell_command_file_name": "lighthouse_report.sh",
   "url":"https://www.google.com",
   "metrics": "performance,accessibility,seo,first-contentful-paint,speed-index,interactive,first-meaningful-paint,unused-css-rules"
}

Results

Based on the output that gets printed in the console, you can create Tracepoints and Indicators to capture the metrics and analyze it in the Portal.

Here are the results of the test:

Now we can set up Insight to capture and analyze the results.