Skip to content

Instantly share code, notes, and snippets.

@SarathSantoshDamaraju
Last active August 16, 2022 20:48
Show Gist options
  • Select an option

  • Save SarathSantoshDamaraju/68271a0a46daef7421f79b9d81581196 to your computer and use it in GitHub Desktop.

Select an option

Save SarathSantoshDamaraju/68271a0a46daef7421f79b9d81581196 to your computer and use it in GitHub Desktop.
Puppeteer script to get performance metrics
// Puppeteer snippet to get performance metrics images from Google Page insights, PingDom, gtmetrix
/* Requirements
* 1. Node js >= 10
* 2. Puppeteer, npm i -g puppeteer | yarn global add puppeteer
*/
/* Execution
* 1. save the file to a name, say `snippet.js`
* 2. Run "node snippet.js [urls]". Eg., "node snippet.js http://example.com http://sample.com"
* 3. This would create screenshots of metrics from `Google insights, pingdom, gtMetrix`
*/
/* Tips
* 1. make sure to have two or three versions of code hosted. check surge for that matter.
* 2. Make sure to run the tests for 2-3 iterations to get average metrics
*/
/* Issues TODO
* 1. PingDom has a limitation on number of pages tested inder given time. Script may break on such occurances
* 2. gtMetrics mat take two redirects or one redirects while performing page analysis. Script may throw exception when it occurs
*/
// snippet.js
const puppeteer = require('puppeteer');
const urlPathRegex = new RegExp(/^https?:\/\/(.+)/, 'i')
function getPathFromUrl(url) {
return url.match(urlPathRegex)[1].split('/').join("_");
}
process.argv.slice(2).forEach(function (url, index) {
console.log('⏳ Downloading reports for -', url);
// # Google page insights
(async (url, index) => {
let gi_url = `https://developers.google.com/speed/pagespeed/insights/?url=${url}`;
let fileName = `gi_metrice_${getPathFromUrl(url)}.png`
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(gi_url);
await page.waitFor('.result-container');
// adding latency incase of network delay
await page.waitFor(1500);
await page.screenshot({ path: fileName, fullPage: true });
await browser.close();
console.log(" ✅ Report from google insights");
})(url, index).catch(err => {
console.error(" ❌ Failed for GI", err);
return false;
});
// # Pingdom
(async (url, index) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let fileName = `pd_metrice_${getPathFromUrl(url)}.png`
await page.goto('https://tools.pingdom.com');
await page.type('#urlInput', url);
await page.click('input[type="submit"]');
await page.waitFor('.share-modal')
// adding latency incase of network delay
await page.waitFor(1000);
await page.screenshot({ path: fileName, fullPage: true });
await browser.close();
console.log(" ✅ Report from Pingdom");
})(url,index).catch(err => {
console.error(" ❌ Failed for PD", err);
return false;
});
// # GT metrics
(async (url, index) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let fileName = `gt_metrice_${getPathFromUrl(url)}.png`
await page.goto('https://gtmetrix.com');
await page.waitFor('.analyze-form-input');
await page.type('input.js-analyze-form-url', url);
await page.click('.analyze-form-button button[type="submit"]');
await page.waitForNavigation();
// adding latency incase of network delay
await page.waitFor(5000);
await page.waitFor('.page-report');
await page.screenshot({ path: fileName, fullPage: true });
await browser.close()
console.log(" ✅ Generated report from GTmetrix");
})(url, index).catch(err => {
console.error(" ❌ Failed for GT", err);
return false;
})
return { status: "done" }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment