I see a significant difference in the web vitals reported through K6 script and the one given by google's API, both for desktop and mobile

I am running the following script and the numbers seem to vary significantly from Google’s pagespeed reports. I am not sure at this point if this has something to do with the k6 framework or the implementation in the script below

Example - For the URL - Designs for Sorority Merch, Frat Apparel, Team Jerseys, & Club Shirts | Fresh Prints | Fresh Prints, both the LCP is significantly lower than what is reported by pagespeed insights. And on mobile the numbers deviate even more.

import { browser } from 'k6/experimental/browser';
import http from 'k6/http';

const UrlPaths = [ 'designs'];
const vusCount = 1;
const durations = '120s';

const baseURLs = {
    'qa': 'https://freshprints-qa.internal-fp.com',
};
const env = __ENV.env ? __ENV.env : 'qa';
const URLs = UrlPaths.map(path => `${baseURLs[env]}/${path}`);

function TestGenerator(url, isMobile) {
    return async () => {
        const context = browser.newContext({
            headless: false,
            viewport: isMobile ? { width: 375, height: 667 } : { width: 2440, height: 1980 },
            userAgent: isMobile ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36',
        });
        
        const page = await context.newPage();
        try {
            const response = await page.goto(url);
            await page.waitForLoadState('load');
            await page.screenshot({ path: `${isMobile ? 'mobile' : 'desktop'}.png` });
        } finally {
            await page.close();
            await context.close();
        }
    };
}

export const browserTest = async function () {
    for (const url of URLs) {
        await TestGenerator(url, false)();
    }
};

export const mobileTest = async function () {
    for (const url of URLs) {
        await TestGenerator(url, true)();
    }
};

const thresholds = URLs.reduce((acc, url) => {
    acc[`browser_web_vital_inp{url:${url},scenario:browser}`] = ['avg<180'];
    acc[`browser_web_vital_lcp{url:${url},scenario:browser}`] = ['avg<2300'];
    acc[`browser_web_vital_cls{url:${url},scenario:browser}`] = ['avg<0.08'];
    acc[`browser_web_vital_fcp{url:${url},scenario:browser}`] = ['avg<1620'];
    acc[`browser_web_vital_ttfb{url:${url},scenario:browser}`] = ['avg<1620'];
    
    acc[`browser_web_vital_inp{url:${url},scenario:mobile}`] = ['avg<180'];
    acc[`browser_web_vital_lcp{url:${url},scenario:mobile}`] = ['avg<2300'];
    acc[`browser_web_vital_cls{url:${url},scenario:mobile}`] = ['avg<0.08'];
    acc[`browser_web_vital_fcp{url:${url},scenario:mobile}`] = ['avg<1620'];
    acc[`browser_web_vital_ttfb{url:${url},scenario:mobile}`] = ['avg<1620'];
    
    return acc;
}, {});

export const options = {
    scenarios: {
        browser: {
            executor: 'constant-vus',
            exec: 'browserTest',
            vus: vusCount,
            duration: durations,
            options: {
                browser: {
                    type: 'chromium',
                },
            },
        },
        mobile: {
            executor: 'constant-vus',
            exec: 'mobileTest',
            vus: vusCount,
            duration: durations,
            options: {
                browser: {
                    type: 'chromium',
                },
            },
        },
    },
    thresholds: thresholds,
};

Even with a simpler script, the numbers seem to be very different compared to pagespeed’s results.

https://pagespeed.web.dev/analysis/https-freshprints-qa-internal-fp-com-designs/6n1d7hpa0w?hl=en-US&form_factor=desktop

import { browser } from 'k6/experimental/browser';
const vusCount = 1;
const durations = '30s';

export const options = {
  scenarios: {
    browser: {
            executor: 'constant-vus',
            vus: vusCount,
            duration: durations,
            options: {
                browser: {
                    type: 'chromium',
                },
            },
        },
  },
  thresholds: {
    checks: ['rate==1.0'],
  },
};

export default async function () {
  const page = await browser.newPage();

  try {
    await page.goto('https://freshprints-qa.internal-fp.com/designs');
    await page.screenshot({ path: 'screenshots/screenshot.png' });
  } finally {
    await page.close();
  }
}

Hi @rahulpanda,

I believe you’ve reported this issue already on our Github repository. We’ll try to take a look into it.