Function getCLS

cumulative-layout-shift.js:38–67

* Get cumulative layout shift for a URL * @param {String} url - url to measure * @return {Number} - cumulative layout shift

(url)

 * @return {Number} - cumulative layout shift
 */
async function getCLS(url) {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    timeout: 10000,
  });

  try {
    const page = await browser.newPage();
    const client = await page.target().createCDPSession();

    await client.send('Network.enable');
    await client.send('ServiceWorker.enable');
    await page.emulateNetworkConditions(puppeteer.networkConditions['Good 3G']);
    await page.emulateCPUThrottling(4);
    await page.emulate(phone);
    // inject a function with the code from
    // https://web.dev/cls/#measure-cls-in-javascript
    await page.evaluateOnNewDocument(calculateShifts);
    await page.goto(url, {waitUntil: 'load', timeout: 60000});

    const cls = await page.evaluate(() => {
      return window.cumulativeLayoutShiftScore;
    });
    browser.close();
    return cls;
  } catch (error) {
    console.log(error);
    browser.close();
  }
}

getCLS('https://pptr.dev').then((cls) => console.log('CLS is: ' + cls));