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

Posted 2023-02-23

【中文标题】在通过 Google Lighthouse 的 First Contentful Paint 报告中是不是考虑了服务器响应时间？

【英文标题】：Is server response time considered in First Contentful Paint report via Google Lighthouse?在通过 Google Lighthouse 的 First Contentful Paint 报告中是否考虑了服务器响应时间？

【发布时间】：2020-04-26 09:27:24

【问题描述】：

我试图了解 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

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

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

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

有人有想法吗？谢谢！

【参考方案1】：

可能是 Lighthouse 的一个错误。看过几起事件有人一直complaining lighthouse local result inaccuracy：

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

Lighthouse 将 FCP 定义为：

首次内容绘制：首次内容绘制是浏览器首次在屏幕上绘制任何内容（文本、图像、画布等）。

Lighthouse 应提供与 FCP 匹配的屏幕截图/幻灯片视图。即查看您是否在 1 秒标记之前看到屏幕上的活动，即使您减慢服务器响应时间也是如此。如果是这样，

a) 清除缓存，重新加载页面并查看您在 Google 开发者工具的网络面板中看到的内容

b) 清除应用程序数据（谷歌开发者工具 -> 应用程序 -> 清除存储 -> 清除站点数据。然后尝试运行

希望这会有所帮助。