在通过Google Lighthouse的First Contentful Paint报告中是否考虑了服务器响应时间？

Question

我试图了解Google Lighthouse提供的FCP是否包含服务器必须用来响应的时间。

从我可以看到Browser Performance API和Google Lighthouse提供的值是不同的。

例如，我构建了一个简单的演示服务器，该服务器具有查询参数以控制响应速度：

const path = require('path');
const express = require('express');

const port = 6789;
const app = express();

app.get('/index', (req, res) => {
  setTimeout(() => {
    res.sendFile(path.resolve(__dirname, './index.html'));
  }, Number(req.query.delay || 0));
});

app.listen(port);
console.log('server started on port %s', port);

我以10秒的延迟向此服务器发出请求，例如http://localhost:6789/index/?delay=10000，并且在加载后，我运行脚本以在控制台中获取FCP的值：

window.performance.getEntriesByName('first-contentful-paint')[0].startTime;
// 10113.205000001471

但是，当我以相同的10s延迟http://localhost:6789/index/?delay=10000运行Google Lighthouse时，我看到FCP仅为0.8s秒，不到一秒钟，例如。

我的假设是Google Lighthouse不包括服务器加载时间，但是它什么时候开始测量指标？这是来自官方网络文档的报价-

FCP衡量用户浏览到您的页面后浏览器呈现第一段DOM内容所花费的时间。（来源-https://web.dev/first-contentful-paint/?utm_source=lighthouse&utm_medium=devtools）

有人有想法吗？谢谢！

Answer 1

可能是Lighthouse的错误。看到一些人去过的地方complaining lighthouse local result inaccuracy：

让我们假设这不是错误。通常，服务器响应时间直接影响First Contentful Paint。但是如今，（静态）资产由浏览器缓存，或者如果您使用的是渐进式Web应用程序，则浏览器在某种程度上可以轻松应对缓慢的后端。

灯塔将FCP定义为：

第一个内容丰富的绘画：第一个内容丰富的绘画是浏览器第一次在屏幕上绘制任何内容（文本，图像，画布等）。

灯塔应提供与FCP匹配的屏幕截图/幻灯片视图。也就是说，即使您放慢了服务器的响应时间，也要在1s标记之前查看屏幕上是否有活动。如果是这样，

a）清除缓存，重新加载页面并查看您在Google Developer Tools的“网络面板”中看到的内容

b）清除应用程序数据（Google开发人员工具->应用程序->清除存储->清除站点数据。然后尝试运行

希望这会有所帮助。