Network throttling / Mobile device emulation for performance checks

[DKhalil]

Is your feature request related to a problem? Please describe. Right now the performance tests done seem to be for a desktop computer running without any CPU/network throttling enabled, so this skews the results to be way more positive than they'd be with any other performance measurement tool available.

Describe the solution you'd like Adding network and CPU throttling options to get a score more closely to what PSI or Lighthouse itself would provide would be very useful.

[umutuzgur]

Hey @DKhalil. You can enable that using playwright and chrome network throttling like the example below. The arguments for network throttling can be found here https://chromedevtools.github.io/devtools-protocol/tot/Network/#method-emulateNetworkConditions

If I totally misunderstood what you meant, feel free to tell me.

/**
 * This is a basic Playwright script to get you started!
 * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
 */

// Create a Chromium browser
const { chromium, devices } = require('playwright')

// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
async function run () {
  const browser = await chromium.launch()

  const pixel2 = devices['Pixel 2'];
  const context = await browser.newContext({...pixel2});
  const page = await context.newPage();
  const session = await context.newCDPSession(page)
  await session.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: (25 * 1024),
    uploadThroughput: (5 * 1024),
    latency: 100,
  });

  // We visit the page. This waits for the "load" event by default.
  const response = await page.goto('https://google.com')

  // If the page doesn't return a successful response code, we fail the check
  if (response.status() > 399) {
    throw new Error(`Failed with response code ${response.status()}`)
  }

  // We snap a screenshot.
  await page.screenshot({ path: 'screenshot.jpg' })

  // We close the page and browser. Setting the "runBeforeUnload" helps with collecting accurate web vitals.
  await page.close()
  await browser.close()
}

run()

[DKhalil]

@umutuzgur thanks for the response, I've tried that already, but it doesn't seem to have an influence over the automated performance checks when caling the check over the deployment hook on Vercel.

In fact, I don't know if it has an impact even when running manually - neither the screenshot seems to be displaying the changed dimensions I set like this:

await client.send('Emulation.setDeviceMetricsOverride', {
    mobile: true,
    width: 412,
    height: 732,
    deviceScaleFactor: 2.625,
  })

Nor does it seem to do anything with the performance score. I don't mind getting near perfect scores on all the pages - but only if it's actually warranted ;)