Last active
December 29, 2022 16:23
-
-
Save brenes/b75ef874e4a4165d23ea555ca1a23867 to your computer and use it in GitHub Desktop.
Page SPeed monitorization through Google Spreadsheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This script is based on https://ithoughthecamewithyou.com/post/automate-google-pagespeed-insights-with-apps-script | |
// STEP 0: Create a spreadsheet document on Google Drive, go to the code editor | |
// (in spanish "Editor de la secuencia de comandos"). | |
// Then paste this code and modify it. | |
// STEP 1: Insert your pagespeed API KEY | |
var pageSpeedApiKey = ''; | |
// STEP 2: Insert the monitored URL | |
var pageSpeedMonitorUrl = ''; | |
// STEP 3: Insert the name of the sheet of your document where the info will be inserted. | |
// This means you should have a sheet named "pagespeed" in your document. | |
var sheetName = 'pagespeed'; | |
// STEP 4: Insert your slack webhook (if you have one) | |
var slackWebhookUrl = 'https://hooks.slack.com/services/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' | |
// STEP 5: Configure a trigger (in spanish "Editar > Todos tus activadores"). | |
// I configured a time based trigger so it performs the monitorization once every 30 minutes. | |
function monitor() { | |
if(pageSpeedMonitorUrl != '') { | |
var desktop = callPageSpeed('desktop'); | |
var mobile = callPageSpeed('mobile'); | |
appendData(desktop, mobile); | |
if (slackWebhookUrl != '') { | |
notifySlack(desktop, mobile); | |
} | |
} | |
} | |
function callPageSpeed(strategy) { | |
var pageSpeedUrl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=' + pageSpeedMonitorUrl + '&key=' + pageSpeedApiKey + '&strategy=' + strategy; | |
var response = UrlFetchApp.fetch(pageSpeedUrl); | |
var json = response.getContentText(); | |
return JSON.parse(json); | |
} | |
function appendData(desktop, mobile) { | |
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); | |
var sheet = spreadsheet.getSheetByName(sheetName); | |
// STEP 6: Insert your preferred data. Here are configured the 6 basic metricas and the total score per device. | |
sheet.appendRow([ | |
Utilities.formatDate(new Date(), 'GMT', 'yyyy-MM-dd HH:mm'), | |
desktop.lighthouseResult.categories.performance.score * 100, | |
desktop.lighthouseResult.audits["first-contentful-paint"].numericValue, | |
desktop.lighthouseResult.audits["first-meaningful-paint"].numericValue, | |
desktop.lighthouseResult.audits["speed-index"].numericValue, | |
desktop.lighthouseResult.audits["first-cpu-idle"].numericValue, | |
desktop.lighthouseResult.audits["interactive"].numericValue, | |
desktop.lighthouseResult.audits["estimated-input-latency"].numericValue, | |
mobile.lighthouseResult.categories.performance.score * 100, | |
mobile.lighthouseResult.audits["first-contentful-paint"].numericValue, | |
mobile.lighthouseResult.audits["first-meaningful-paint"].numericValue, | |
mobile.lighthouseResult.audits["speed-index"].numericValue, | |
mobile.lighthouseResult.audits["first-cpu-idle"].numericValue, | |
mobile.lighthouseResult.audits["interactive"].numericValue, | |
mobile.lighthouseResult.audits["estimated-input-latency"].numericValue, | |
]); | |
} | |
function notifySlack(desktop, mobile) { | |
// STEP 7: Configure your slack text post | |
var data = { | |
'text': 'Desktop: ' + desktop.lighthouseResult.categories.performance.score * 100 + ' - Mobile: ' + mobile.lighthouseResult.categories.performance.score * 100 + '. Más detalles en https://docs.google.com/spreadsheets/d/1sKbzbz7h4Eu21M0uEcZ9jpRTeIAd9Kg_7PeXl2cWJxk/edit#gid=1447868276' | |
}; | |
var options = { | |
'method' : 'post', | |
'contentType': 'application/json', | |
'payload' : JSON.stringify(data) | |
}; | |
UrlFetchApp.fetch(slackWebhookUrl, options); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment