1.
Automating Google
Lighthouse
Hamlet Batista // RankSense
SLIDESHARE.NET/HAMLETBATISTA
@hamletbatista
2 October | Brighton Centre | 10 Years of brightonSEO

2.
YESSSS!
This Photo by Unknown Author is licensed under CC BY-NC-ND

3.
THE NEXT
DAY...
This Photo by Unknown Author is licensed under CC BY-SA

4.
HOW CAN WE
AVOID THIS?

5.
AGENDA
HERE IS WHAT WE ARE GOING TO DO:
• Set up a test Gatsby site and deploy it to Netlify
• Set up a Github repository for the site
• Add Github Action to run Lighthouse CI automatically
when new changes are published
• Set up performance budgets to halt deployment to
production if changes lower page speed performance
• Set up a LightHouse CI server to host the reports and to
visualize changes overtime

6.
GATSBY
ECOMMERCE
EXAMPLE
Setting up Gastby with
an ecommerce template site

7.
npm install -g gatsby-cli

8.
LET’S USE A STARTER SITE FROM
https://www.gatsbyjs.org/starters/?v=2

9.
STATIC SITE GENERATION
GIT WORKFLOW INTEGRATION
https://www.netlifycms.org/
OUR CMS IS
NETLIFY CMS

10.
gatsby new gatsby-starter-netlify-cms https://github.com/netlify-
templates/gatsby-starter-netlify-cms

11.
cd gatsby-starter-netlify-cms
gatsby develop

12.
SET UP GITHUB CONNECTION
git config --global user.email hamletb@ranksense.com
git config --global user.name ”Hamlet Batista”

13.
GATSBY AND
NETLIFY CMS
SUMMARY GATSBY RUNS PAGES REALLY
FAST THANKS TO STATIC SITE
GENERATION
NETLIFY CMS PROVIDES A UI TO
ALLOW FOR REGULAR CHANGES
IN A GIT WORKFLOW

14.
GITHUB AND
NETLIFY
Setting up a Github repo to host the
source code of the site

15.
GITHUB AND
NETLIFY
SUMMARY GITHUB NOTIFIES NETLIFY OF
CHANGES IN THE REPO
THROUGH WEBHOOKS
NETLIFY DEPLOYS CHANGES TO
THEIR CDN ONCE IT RECEIVES
THE NOTIFICATIONS

16.
LIGHTHOUSE CI
AND GITHUB
Setting up Lighthouse CI
as a Github Action

17.
• COMMAND LINE TOOL
• SERVER WITH STORAGE AND REPORTING UI
https://github.com/GoogleChrome/lighthouse-ci
LIGHTHOUSE CI

18.
USE CASES
Get a Lighthouse report alongside every pull request.
Prevent regressions in accessibility, SEO, offline support, and performance best practices.
Track performance metrics and Lighthouse scores over time.
Set and keep performance budgets on scripts and images.
Run Lighthouse many times to reduce variance.
Compare two versions of your site to find improvements and regressions of individual resources.

19.
TOO
SLOW

20.
ADDING THE
LIGHTHOUSE
CI ACTION TO
THE REPO
git clone https://github.com/hamletbatista/gatsby-
starter-netlify-cms.git
cd gatsby-starter-netlify-cms
mkdir .github/workflows/
cd .github/workflows/

21.
Adding the Lighthouse CI
Action to the repo (cont.)
• This is the file
.github/workflows/main.yml
• This is all we need to create a test
action
• I left the test URLs in the example.
We will change them later

22.
Adding the Lighthouse CI
Action to the repo (cont.)
• git add .
• git commit -m "added LHCI action"
• git push origin master

23.
LIGHTHOUSE
AND GITHUB
SUMMARY LIGHTHOUSE CI CAN CHECK URLS
FROM THE COMMAND LINE AND
GENERATE REPORTS ON DEMAND
LHCI GITHUB ACTION ALLOWS US TO
RUN LHCI ON COMMITS TO THE REPO

24.
PERFORMANCE
BUDGETS
Setting up Lighthouse
CI performance budgets

25.
ADDING A
PERFORMAN
CE BUDGET

26.
ADDING A
PERFORMANCE
BUDGET (CONT.)

27.
Adding a performance
budget (cont.) • git add ../../budget.json
• git commit -
m ”added budget.json to home dir”
• git push origin master

28.
PERFORMANCE
BUDGETS
SUMMARY LIGHTHOUSE SUPPORTS BUDGETS TO
PREVENT REGRESSIONS
WHEN BUDGETS ARE EXCEEDED, THE
BUILD STOPS AND PREVENTS
DEPLOYMENT

29.
LIGHTHOUSE CI
SERVER
Setting up Lighthouse CI server with a
Postgres backend to host the reports

30.
Setting up the
Lighthouse CI Server
• npm install -D @lhci/cli @lhci/server

31.
SETTING
UP THE
LIGHTHOUSE
CI SERVER
(CONT.)

32.
SETTING UP
POSTGRES
• Create an instance
• Set up user and password
• Create a database named lighthouse
• Find your LHCI server P using:
curl ifconfig.co
• In Connections, add this IP to whitelist it.
For example, 35.196.34.79/32

33.
CREATE A
POSTGRES
CONNECTION
URL
For example:
postgres://postgres:<password>@<IP
of database instance>/lighthouse
This will allow the LHCI Server to
persist the reports to the database
we created

34.
STARTING
THE LHCI
SERVER
First, we need to install the Postgres driver for Node using:
npm install -g pg
lhci server --storage.sqlDialect=postgres --
storage.sqlConnectionUrl="postgres://postgres:<password>@<DB
IP>/lighthouse”
We get “Server listening on port 9001”
STARTING
THE LHCI
SERVER
First, we need to install the Postgres driver for Node using:
npm install -g pg
lhci server --storage.sqlDialect=postgres --
storage.sqlConnectionUrl="postgres://postgres:<password>@<DB
IP>/lighthouse”
We get “Server listening on port 9001”

35.
First time we run it we get this screen

36.
Initialize the LHCI
Server
• lhci wizard

37.
LIGHTHOUSE
CI SERVER AND
POSTGRES
SUMMARY LHCI SERVER CAN PERSIST
REPORTS TO A DATABASE
WE CHOOSE POSTGRES WHICH ALLOWS
US TO CONNECT DIRECTLY FROM DATA
STUDIO LATER

38.
SENDING REPORTS
TO LHCI SERVER
Setting up our LHCI Github Action to upload
reports to the LHCI Server on every push

39.
Updating our workflow
definition
• We add three lines to replace the
temporary storage
• upload.serverBaseUrl: ${{
secrets.LHCI_SERVER }}
• upload.token: ${{
secrets.LHCI_TOKEN }}

40.
ADDING
SETTINGS AS
GITHUB
SECRETS

41.
SENDING
REPORTS TO
LHCI SERVER
SUMMARY LHCI GITHUB ACTION CAN SEND
REPORTS DIRECTLY TO A LHCI SERVER
GITHUB SECRETS CAN KEEP THE
ADDRESS OF THE LHCI SERVER AND
TOKEN PRIVATE

42.
We offer guaranteed PSI scores of
+70 in mobile and +80 in desktop
for Shopify stores
Visit to learn more
https://bit.ly/2ECAr6z

43.
THANK YOU
@hamletbatista
https://www.ranksense.com