Created
June 27, 2019 07:19
-
-
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.
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 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