从devTools网络指标获取传输/资源大小和DOMContentLoaded /加载时间

Question

我正在构建一个名为UXChecker的Web应用程序，该应用程序的工作方式与website.grader.com类似，但有很多区别。

用户通过API从前端将URL发送到后端后，我想对该URL进行爬网并进行UX测量。我将检查按钮，SEO，响应度等，并检查网络指标，说网络的总大小（Mb）和有多快是否已加载。我决定使用Puppeteer在Node.js中进行操作。

有没有办法获取“总页面大小”（资源大小）和“加载时间”（或至少DOMContentLoad）指标？

如果没有，请您推荐一个不同的库或代码片段吗？

到目前为止，我已经尝试过：

const perfEntries = JSON.parse(
    await page.evaluate(() => JSON.stringify(performance.getEntries()))
);

我已经计算了所有的transferSizes，但是这个数字甚至与network devTools选项卡中的数字还不接近。 之后，我尝试了：

    let performanceMetrics = await page._client.send('Performance.getMetrics');

这给了我其他指标“ DOMContentLoaded”。但是此数字与“网络”标签中的值不同。我无法获取网络的totalSize（资源大小）。

---

我的人偶代码（您可以通过运行node example.js进行测试）：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const context = await browser.createIncognitoBrowserContext();
    const page = await context.newPage();

    await page.setCacheEnabled(false);

    // setting width and height
    await page.setViewport({
        width: 1200,
        height: 780,
        deviceScaleFactor: 1,
    });

    // going to URL
    await page.goto("http://www.cupcakeipsum.com/", { waitUntil: 'networkidle2' });


    // performance entries available
    const perfEntries = JSON.parse(
        await page.evaluate(() => JSON.stringify(performance.getEntries()))
    );

    // performance test
    // total size of the website:
    totalSize = () => {
        let totalSize = 0;
        perfEntries.forEach(entry => {
            if (entry.transferSize > 0) {
                totalSize += entry.transferSize;
            }
        });
        return totalSize;
    }
    console.log("==== Total size ====")
    console.log(totalSize());

    // performance metrics
    console.log("==== Devtools: Performance.getMetrics ====");
    let performanceMetrics = await page._client.send('Performance.getMetrics');
    console.log(performanceMetrics.metrics);


    await browser.close();
})();

请问有没有一种方法可以衡量这些指标？感谢您的帮助和提示。