Measure performance impact of inlining above-the-fold CSS

[freezy]

Given that JavaScript takes a lot more time to process than CSS, this probably won't give a significant boost of loading time. However, it's still worth a try. CSS could be extracted with Puppeteer:

const puppeteer = require('puppeteer');

(async () => {

	const url = 'http://localhost:3333';
	const browser = await puppeteer.launch();
	const page = await browser.newPage();

	try {
		// enable coverage
		await page.coverage.startCSSCoverage();

		// load page
		console.log('Opening page at %s...', url);
		await page.goto(url, { waitUntil: 'load' });

		const coverage = await page.coverage.stopCSSCoverage();

		let totalBytes = 0;
		let usedBytes = 0;
		for (const entry of coverage) {
			console.log('# ================ %s ================', entry.url);
			for (const range of entry.ranges) {
				console.log(entry.text.substring(range.start, range.end));
			}
		}
		console.log('Done!');
		await browser.close();

	} catch (err) {
		if (argv.screenshots) {
			await page.screenshot({ path: 'error.png' });
		}
		console.log('ERROR: ', err);
		await browser.close();
		process.exit(1);
	}
})();

However, to do this correctly, the viewport should also be resized, and links should be at least hovered over to get the interactive styles as well.