Small puppeteer script to find out how much content of the first viewport is loaded and rendered just with initial html response

initialRender.js

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const pixelmatch = require('pixelmatch');
var fs = require('fs');

const phone = devices['Nexus 5X'];
var first = true;

async function writeScreenshot(url, filename, initial) {
    const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.emulate(phone);
	if(initial) {
  		await page.setRequestInterception(true);

   	 	page.on('request', interceptedRequest => {
    		if (first){
	  	  	  first = false;
      		  interceptedRequest.continue();
		    }
           else
              interceptedRequest.abort();
        });
	}
  
  	await page.goto(url);
  	await page.screenshot({path: filename});
  	await browser.close();
}

writeScreenshot("https://www.buecher.de", 'initial_html.png', true).then(function() {
	writeScreenshot("https://www.buecher.de", 'full.png', false).then(function() {
		var numDiffPixels = pixelmatch(fs.readFileSync('initial_html.png'), fs.readFileSync('full.png'), null, phone.viewport.width, phone.viewport.height);
		console.log("#DifferentPixels: " + numDiffPixels);
		var ratio = numDiffPixels*1.0/(phone.viewport.width*phone.viewport.height);
		console.log("Ratio loaded on first respond: " + ratio);
	});
});