title: How to test the performance impact of a single script on a website?
body: <p>I am trying to understand the impact of an additional script being added to a webpage.</p>
  <p>My first attempt has been to use lighthouse, and to try and calculate metrics before and after the addition of the script:</p>
  <pre class="lang-js prettyprint-override"><code>const fs = require('fs');
  const playwright = require('playwright');
  const lighthouse = require('lighthouse');
  const args = require('minimist')(process.argv.slice(2));
  
  const BROWSER_CONTEXT_DIR = 'browserContextDir';
  
  async function main(inject) {
    const context = await playwright.chromium.launchPersistentContext(BROWSER_CONTEXT_DIR, {
      args: [`--remote-debugging-port=8041`],
      headless: false,
    });
  
    if (inject){
      await context.addInitScript({
        path: 'script.js'
      })
    }
  
    const lhOptions = { 
      port: 8041,
      onlyCategories: ['performance']
    };
  
    const result = await lighthouse(args.url, lhOptions);
  
    fs.writeFileSync('lhreport.json', JSON.stringify(result.lhr.audits, null, 2));
    await context.close();
    fs.rmdirSync(BROWSER_CONTEXT_DIR, { recursive: true });
    return {
      speed: result.lhr.audits['speed-index'],
      cpu: result.lhr.audits['first-cpu-idle'],
      blocking: result.lhr.audits['total-blocking-time']
    }
  }
  </code></pre>
  <p>While this works, each run of lighthouse has too much variance in the results. It seems the proper way to go would be to do this in isolation, not via injecting into a live site.</p>
  <p>What approaches can I take to measure the impact on CPU, memory and site speed of a 3rd party script?</p>