Skip to content

Instantly share code, notes, and snippets.

@martinschierle
Created June 27, 2019 07:19
Show Gist options
  • Save martinschierle/5ffe7754087308ce9db5c55a80f1a159 to your computer and use it in GitHub Desktop.
Save martinschierle/5ffe7754087308ce9db5c55a80f1a159 to your computer and use it in GitHub Desktop.
Use puppeter to automatically derive a website layout stability score using the new layout instability API (see https://web.dev/layout-instability-api). Currently the feature is still behind experimental feature flag, which might not always work right depending on the Chrome you test with.
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
};
const phone = devices['Nexus 5X'];
async function run() {
// I can't get the experimental flag working on chromium, so let's start system chrome
const browser = await puppeteer.launch({headless: true,
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
args:["--enable-experimental-web-platform-features"]});
// whenever the feature is out of experimental we can use headless chromium as usual
//const browser = await puppeteer.launch({headless:true, args:["--enable-feature=ExperimentalWebPlatformFeatures", "--enable-experimental-web-platform-features"]});
let page = await browser.newPage();
const client = await page.target().createCDPSession();
await client.send('Network.enable');
await client.send('Network.emulateNetworkConditions', Good3G);
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
await page.emulate(phone);
await page.goto('https://www.spiegel.de');
const score = await page.evaluate(async function() {
let score = 0;
var events = window.performance.getEntriesByType('layoutJank');
for(var i = 0; i < events.length; i++) {
score += events[i].fraction;
}
return score;
});
console.log("Your layout stability score is: " + score + " (higher value is worse. See https://web.dev/layout-instability-api for details.)");
await page.close();
await browser.close();
}
run();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment