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