Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Automating Google
Lighthouse
Hamlet Batista // RankSense
SLIDESHARE.NET/HAMLETBATISTA
@hamletbatista
2 October | Brighton ...
YESSSS!
This Photo by Unknown Author is licensed under CC BY-NC-ND
THE NEXT
DAY...
This Photo by Unknown Author is licensed under CC BY-SA
HOW CAN WE
AVOID THIS?
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 ...
GATSBY
ECOMMERCE
EXAMPLE
Setting up Gastby with
an ecommerce template site
npm install -g gatsby-cli
LET’S USE A STARTER SITE FROM
https://www.gatsbyjs.org/starters/?v=2
STATIC SITE GENERATION
GIT WORKFLOW INTEGRATION
https://www.netlifycms.org/
OUR CMS IS
NETLIFY CMS
gatsby new gatsby-starter-netlify-cms https://github.com/netlify-
templates/gatsby-starter-netlify-cms
cd gatsby-starter-netlify-cms
gatsby develop
SET UP GITHUB CONNECTION
git config --global user.email hamletb@ranksense.com
git config --global user.name ”Hamlet Batist...
GATSBY AND
NETLIFY CMS
SUMMARY GATSBY RUNS PAGES REALLY
FAST THANKS TO STATIC SITE
GENERATION
NETLIFY CMS PROVIDES A UI TO...
GITHUB AND
NETLIFY
Setting up a Github repo to host the
source code of the site
GITHUB AND
NETLIFY
SUMMARY GITHUB NOTIFIES NETLIFY OF
CHANGES IN THE REPO
THROUGH WEBHOOKS
NETLIFY DEPLOYS CHANGES TO
THEI...
LIGHTHOUSE CI
AND GITHUB
Setting up Lighthouse CI
as a Github Action
• COMMAND LINE TOOL
• SERVER WITH STORAGE AND REPORTING UI
https://github.com/GoogleChrome/lighthouse-ci
LIGHTHOUSE CI
USE CASES
Get a Lighthouse report alongside every pull request.
Prevent regressions in accessibility, SEO, offline support...
TOO
SLOW
ADDING THE
LIGHTHOUSE
CI ACTION TO
THE REPO
git clone https://github.com/hamletbatista/gatsby-
starter-netlify-cms.git
cd ...
Adding the Lighthouse CI
Action to the repo (cont.)
• This is the file
.github/workflows/main.yml
• This is all we need to...
Adding the Lighthouse CI
Action to the repo (cont.)
• git add .
• git commit -m "added LHCI action"
• git push origin mast...
LIGHTHOUSE
AND GITHUB
SUMMARY LIGHTHOUSE CI CAN CHECK URLS
FROM THE COMMAND LINE AND
GENERATE REPORTS ON DEMAND
LHCI GITHU...
PERFORMANCE
BUDGETS
Setting up Lighthouse
CI performance budgets
ADDING A
PERFORMAN
CE BUDGET
ADDING A
PERFORMANCE
BUDGET (CONT.)
Adding a performance
budget (cont.) • git add ../../budget.json
• git commit -
m ”added budget.json to home dir”
• git pus...
PERFORMANCE
BUDGETS
SUMMARY LIGHTHOUSE SUPPORTS BUDGETS TO
PREVENT REGRESSIONS
WHEN BUDGETS ARE EXCEEDED, THE
BUILD STOPS ...
LIGHTHOUSE CI
SERVER
Setting up Lighthouse CI server with a
Postgres backend to host the reports
Setting up the
Lighthouse CI Server
• npm install -D @lhci/cli @lhci/server
SETTING
UP THE
LIGHTHOUSE
CI SERVER
(CONT.)
SETTING UP
POSTGRES
• Create an instance
• Set up user and password
• Create a database named lighthouse
• Find your LHCI ...
CREATE A
POSTGRES
CONNECTION
URL
For example:
postgres://postgres:<password>@<IP
of database instance>/lighthouse
This wil...
STARTING
THE LHCI
SERVER
First, we need to install the Postgres driver for Node using:
npm install -g pg
lhci server --sto...
First time we run it we get this screen
Initialize the LHCI
Server
• lhci wizard
LIGHTHOUSE
CI SERVER AND
POSTGRES
SUMMARY LHCI SERVER CAN PERSIST
REPORTS TO A DATABASE
WE CHOOSE POSTGRES WHICH ALLOWS
US...
SENDING REPORTS
TO LHCI SERVER
Setting up our LHCI Github Action to upload
reports to the LHCI Server on every push
Updating our workflow
definition
• We add three lines to replace the
temporary storage
• upload.serverBaseUrl: ${{
secrets...
ADDING
SETTINGS AS
GITHUB
SECRETS
SENDING
REPORTS TO
LHCI SERVER
SUMMARY LHCI GITHUB ACTION CAN SEND
REPORTS DIRECTLY TO A LHCI SERVER
GITHUB SECRETS CAN KE...
We offer guaranteed PSI scores of
+70 in mobile and +80 in desktop
for Shopify stores
Visit to learn more
https://bit.ly/2...
THANK YOU
@hamletbatista
https://www.ranksense.com
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Automating Google Lighthouse
Nächste SlideShare
Wird geladen in …5
×

9

Teilen

Herunterladen, um offline zu lesen

Automating Google Lighthouse

Herunterladen, um offline zu lesen

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.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Automating Google Lighthouse

  1. 1. Automating Google Lighthouse Hamlet Batista // RankSense SLIDESHARE.NET/HAMLETBATISTA @hamletbatista 2 October | Brighton Centre | 10 Years of brightonSEO
  2. 2. YESSSS! This Photo by Unknown Author is licensed under CC BY-NC-ND
  3. 3. THE NEXT DAY... This Photo by Unknown Author is licensed under CC BY-SA
  4. 4. HOW CAN WE AVOID THIS?
  5. 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. 6. GATSBY ECOMMERCE EXAMPLE Setting up Gastby with an ecommerce template site
  7. 7. npm install -g gatsby-cli
  8. 8. LET’S USE A STARTER SITE FROM https://www.gatsbyjs.org/starters/?v=2
  9. 9. STATIC SITE GENERATION GIT WORKFLOW INTEGRATION https://www.netlifycms.org/ OUR CMS IS NETLIFY CMS
  10. 10. gatsby new gatsby-starter-netlify-cms https://github.com/netlify- templates/gatsby-starter-netlify-cms
  11. 11. cd gatsby-starter-netlify-cms gatsby develop
  12. 12. SET UP GITHUB CONNECTION git config --global user.email hamletb@ranksense.com git config --global user.name ”Hamlet Batista”
  13. 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. 14. GITHUB AND NETLIFY Setting up a Github repo to host the source code of the site
  15. 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. 16. LIGHTHOUSE CI AND GITHUB Setting up Lighthouse CI as a Github Action
  17. 17. • COMMAND LINE TOOL • SERVER WITH STORAGE AND REPORTING UI https://github.com/GoogleChrome/lighthouse-ci LIGHTHOUSE CI
  18. 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. 19. TOO SLOW
  20. 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. 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. 22. Adding the Lighthouse CI Action to the repo (cont.) • git add . • git commit -m "added LHCI action" • git push origin master
  23. 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. 24. PERFORMANCE BUDGETS Setting up Lighthouse CI performance budgets
  25. 25. ADDING A PERFORMAN CE BUDGET
  26. 26. ADDING A PERFORMANCE BUDGET (CONT.)
  27. 27. Adding a performance budget (cont.) • git add ../../budget.json • git commit - m ”added budget.json to home dir” • git push origin master
  28. 28. PERFORMANCE BUDGETS SUMMARY LIGHTHOUSE SUPPORTS BUDGETS TO PREVENT REGRESSIONS WHEN BUDGETS ARE EXCEEDED, THE BUILD STOPS AND PREVENTS DEPLOYMENT
  29. 29. LIGHTHOUSE CI SERVER Setting up Lighthouse CI server with a Postgres backend to host the reports
  30. 30. Setting up the Lighthouse CI Server • npm install -D @lhci/cli @lhci/server
  31. 31. SETTING UP THE LIGHTHOUSE CI SERVER (CONT.)
  32. 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. 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. 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. 35. First time we run it we get this screen
  36. 36. Initialize the LHCI Server • lhci wizard
  37. 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. 38. SENDING REPORTS TO LHCI SERVER Setting up our LHCI Github Action to upload reports to the LHCI Server on every push
  39. 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. 40. ADDING SETTINGS AS GITHUB SECRETS
  41. 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. 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. 43. THANK YOU @hamletbatista https://www.ranksense.com
  • ShahidAbbasi11

    Oct. 22, 2020
  • schgrv

    Oct. 8, 2020
  • TiffanyKalus

    Oct. 7, 2020
  • AlejandroTorres212

    Oct. 5, 2020
  • xyborg

    Oct. 3, 2020
  • GeraintWatts

    Oct. 2, 2020
  • joshhinds

    Oct. 2, 2020
  • GamzeGldenSIIRCI

    Oct. 2, 2020
  • KorayGbr

    Oct. 2, 2020

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.

Aufrufe

Aufrufe insgesamt

3.103

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

1.421

Befehle

Downloads

40

Geteilt

0

Kommentare

0

Likes

9

×