-
-
Save WebDevLuke/cb8ad1ce9cba72c4f25f8d35d4bbba5a to your computer and use it in GitHub Desktop.
Simple Google Lighthouse tool to create and compare reports from the console.
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
const lighthouse = require('lighthouse'); | |
const chromeLauncher = require('chrome-launcher'); | |
const argv = require('yargs').argv; | |
const url = require('url'); | |
const fs = require('fs'); | |
const glob = require('glob'); | |
const path = require('path'); | |
const launchChromeAndRunLighthouse = (url) => { | |
return chromeLauncher.launch().then(chrome => { | |
const opts = { | |
port: chrome.port | |
} | |
return lighthouse(url, opts).then(results => { | |
return chrome.kill().then(() => { | |
return { | |
js: results.lhr, | |
json: results.report | |
} | |
}); | |
}); | |
}); | |
} | |
const getContents = (pathStr) => { | |
const output = fs.readFileSync(pathStr, 'utf8', (err, results) => { | |
return results; | |
}); | |
return JSON.parse(output); | |
}; | |
const compareReports = (from, to) => { | |
const metricFilter = [ | |
'first-contentful-paint', | |
'first-meaningful-paint', | |
'speed-index', | |
'estimated-input-latency', | |
'total-blocking-time', | |
'max-potential-fid', | |
'time-to-first-byte', | |
'first-cpu-idle', | |
'interactive' | |
] | |
const calcPercentageDiff = (from, to) => { | |
const per = ((to - from) / from) * 100; | |
return Math.round(per * 100) / 100; | |
}; | |
for(let auditObj in from['audits']) { | |
if(metricFilter.includes(auditObj)) { | |
const percentageDiff = calcPercentageDiff( | |
from['audits'][auditObj].numericValue, | |
to['audits'][auditObj].numericValue | |
); | |
let logColor = '\x1b[37m'; | |
const log = (() => { | |
if(Math.sign(percentageDiff) === 1) { | |
logColor = "\x1b[31m"; | |
return `${percentageDiff.toString().replace('-','') + '%'} slower`; | |
} | |
else if(Math.sign(percentageDiff) === 0) { | |
return 'unchanged'; | |
} | |
else { | |
logColor = "\x1b[32m"; | |
return `${percentageDiff.toString().replace('-','') + '%'} faster`; | |
} | |
})(); | |
console.log(logColor, `${from['audits'][auditObj].title} is ${log}`); | |
} | |
} | |
} | |
if(argv.from && argv.to) { | |
compareReports( | |
getContents(argv.from + '.json'), | |
getContents(argv.to + '.json') | |
); | |
} | |
else if(argv.url) { | |
const urlObj = new URL(argv.url); | |
let dirName = urlObj.host.replace('www.',''); | |
if(urlObj.pathname !== '/') { | |
dirName = dirName + urlObj.pathname.replace(/\//g,'_'); | |
} | |
if(!fs.existsSync(dirName)) { | |
fs.mkdirSync(dirName); | |
} | |
launchChromeAndRunLighthouse(argv.url).then(results => { | |
const prevReports = glob(`${dirName}/*.json`, { | |
sync: true | |
}); | |
if(prevReports.length) { | |
dates = []; | |
for(report in prevReports) { | |
dates.push(new Date(path.parse(prevReports[report]).name.replace(/_/g, ':'))); | |
} | |
const max = dates.reduce(function(a, b) { | |
return Math.max(a, b); | |
}); | |
const recentReport = new Date(max).toISOString(); | |
const recentReportContents = getContents(dirName + '/' + recentReport.replace(/:/g, '_') + '.json'); | |
compareReports(recentReportContents, results.js); | |
} | |
fs.writeFile(`${dirName}/${results.js['fetchTime'].replace(/:/g, '_')}.json`, results.json, (err) => { | |
if (err) throw err; | |
}); | |
}); | |
} | |
else { | |
throw "You haven't passed a URL to Lighthouse"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@nguyenduonghai-sky You need to use some automation script to pass the authentication, You can use puppeter, cherrio or soo.
Check ex: puppeter example
but also there is lighthouse docs: