Automating Google Lighthouse
9 likes5,216 views
Google Lighthouse is super valuable but it only checks one page at a time. Hamlet will show you how to get it to check all pages of a site, and how to run automated Lighthouse checks on-demand at scheduled intervals and from automated tests. He'll also cover how to set performance budgets, how to get alerts when budgets are exceeded, and how to aggregate page reports using BigQuery and Google Data Studio.
![[BrightonSEO Oct 2022] Remarketing SEO - Himani Kankaria - Missive Digital.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/brightonseooct2022remarketingseo-himanikankaria-missivedigital-221007092921-974e6bb5-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Automating Google Lighthouse (20)
Ad
More from Hamlet Batista (20)
Ad
Recently uploaded (20)
Automating Google Lighthouse
- 1. Automating Google Lighthouse Hamlet Batista // RankSense SLIDESHARE.NET/HAMLETBATISTA @hamletbatista 2 October | Brighton Centre | 10 Years of brightonSEO
- 7. YESSSS! This Photo by Unknown Author is licensed under CC BY-NC-ND
- 8. THE NEXT DAY... This Photo by Unknown Author is licensed under CC BY-SA
- 12. HOW CAN WE AVOID THIS?
- 14. 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
- 15. GATSBY ECOMMERCE EXAMPLE Setting up Gastby with an ecommerce template site
- 18. npm install -g gatsby-cli
- 19. LET’S USE A STARTER SITE FROM https://www.gatsbyjs.org/starters/?v=2
- 21. STATIC SITE GENERATION GIT WORKFLOW INTEGRATION https://www.netlifycms.org/ OUR CMS IS NETLIFY CMS
- 22. gatsby new gatsby-starter-netlify-cms https://github.com/netlify- templates/gatsby-starter-netlify-cms
- 24. SET UP GITHUB CONNECTION git config --global user.email [email protected] git config --global user.name ”Hamlet Batista”
- 25. 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
- 26. GITHUB AND NETLIFY Setting up a Github repo to host the source code of the site
- 34. 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
- 35. LIGHTHOUSE CI AND GITHUB Setting up Lighthouse CI as a Github Action
- 37. • COMMAND LINE TOOL • SERVER WITH STORAGE AND REPORTING UI https://github.com/GoogleChrome/lighthouse-ci LIGHTHOUSE CI
- 38. 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.
- 40. TOO SLOW
- 43. 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/
- 44. 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
- 45. Adding the Lighthouse CI Action to the repo (cont.) • git add . • git commit -m "added LHCI action" • git push origin master
- 47. 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
- 48. PERFORMANCE BUDGETS Setting up Lighthouse CI performance budgets
- 53. Adding a performance budget (cont.) • git add ../../budget.json • git commit - m ”added budget.json to home dir” • git push origin master
- 55. PERFORMANCE BUDGETS SUMMARY LIGHTHOUSE SUPPORTS BUDGETS TO PREVENT REGRESSIONS WHEN BUDGETS ARE EXCEEDED, THE BUILD STOPS AND PREVENTS DEPLOYMENT
- 56. LIGHTHOUSE CI SERVER Setting up Lighthouse CI server with a Postgres backend to host the reports
- 58. Setting up the Lighthouse CI Server • npm install -D @lhci/cli @lhci/server
- 60. 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
- 61. 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
- 62. 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”
- 63. First time we run it we get this screen
- 64. Initialize the LHCI Server • lhci wizard
- 65. 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
- 66. SENDING REPORTS TO LHCI SERVER Setting up our LHCI Github Action to upload reports to the LHCI Server on every push
- 68. Updating our workflow definition • We add three lines to replace the temporary storage • upload.serverBaseUrl: ${{ secrets.LHCI_SERVER }} • upload.token: ${{ secrets.LHCI_TOKEN }}
- 70. 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
- 71. We offer guaranteed PSI scores of +70 in mobile and +80 in desktop for Shopify stores Visit to learn more https://bit.ly/2ECAr6z