在NextJS中使用puppeteer和web-vitals获取网站的web vitals

moiiocjp  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(185)

我在NextJS中构建了一个简单的工具,给定一个URL执行puppeteer并返回web vitals,但是当这样做时,我无法检索结果,它不打印任何东西,这可能是什么原因?

const browser = await puppeteer.launch({ headless: false,  });
const website = await browser.newPage();

await website.goto(request.url, {waitUntil: 'networkidle0'});

// inject the web vitals library into the page
await website.addScriptTag({url: 'https://unpkg.com/web-vitals@2/dist/web-vitals.umd.js'});

// listen for web vitals metrics from the page
website.exposeFunction('onReport', ({name, value}: any) => {
    console.log(`${name}: ${value}`);
});

const onReport = (data: any) => {
    console.log(data);
}

await website.evaluate(() => {
    webVitals.getCLS(console.log);
    webVitals.getFID(console.log);
    webVitals.getLCP(console.log);
    webVitals.getTTFB(console.log);
    webVitals.getFCP(console.log);
});

await browser.close();
pdtvr36n

pdtvr36n1#

web-vitals脚本依赖于可能不会立即触发的性能观察器。特别地,LCP直到页面上存在交互才被最终化,并且CLS直到页面加载结束才被最终化。
您确实使用了await website.evaluate(()...,但它只“等待”性能观察器的设置。然后立即关闭页面。
我建议导航到另一个页面,或者将页面移动到隐藏状态,而不是在之后立即调用await browser.close();,您可能会看到这些被调用。顺便说一下,这是web-vitals库本身为它的测试所做的,正如你在LCP testsCLS tests中看到的那样。

相关问题