Nginx无法直接获取FCP/LCP等前端渲染指标，需由前端通过PerformanceObserver计算并以X-Perf-FCP等自定义请求头上报，Nginx配置$log_format和$http_x_perf_fcp变量记录该值，实现间接采集。
在 Nginx 中无法直接获取前端页面的“首屏加载耗时”（First Contentful Paint、Largest Contentful Paint 等），因为这是浏览器端指标，Nginx 作为反向代理或 Web 服务器，不执行 JavaScript，也不参与页面渲染。但你可以通过 前端主动上报 + Nginx 日志记录请求头 的方式，间接实现该数据写入自定义日志。
前端埋点：将首屏耗时注入请求头
在页面加载完成后（例如在 window.addEventListener('load', ...) 或使用 PerformanceObserver 监听 LCP/FCP），计算出首屏关键耗时，并将其作为自定义 HTTP 请求头（如 X-Page-Load-Time 或 X-Perf-FCP）附加到后续的上报请求（比如一个打点接口）中：
// 示例：上报 FCP 耗时（毫秒）
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
fetch('/log/perf', {
method: 'POST',
headers: { 'X-Perf-FCP': entry.startTime.toFixed(2) }
});
break;
}
}
});
observer.observe({ entryTypes: ['paint'] });Nginx 配置：捕获并记录自定义请求头
在 http 或 server 块中定义 log_format，使用 $http_XXX 变量读取对应请求头（注意：下划线自动转为连字符，X-Perf-FCP → $http_x_perf_fcp）：
log_format perf_log '$remote_addr - $remote_user [$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent" '
'$http_x_perf_fcp $http_x_perf_lcp $http_x_page_load_time';然后在 access_log 中使用该格式，指向你的日志文件：
立即学习“前端免费学习笔记（深入）”；
access_log /var/log/nginx/perf_access.log perf_log;
⚠️ 注意：$http_x_* 变量只对实际存在的请求头生效；若前端未发送，对应字段为空或破折号（-）。
后端配合（可选但推荐）：统一打点接口
不建议让前端直接向静态资源路径发带性能头的请求（易被拦截或跨域限制）。更稳妥的做法是：
- 提供一个专用的轻量级打点接口（如
/api/v1/perf），由后端接收并原样记录或转发 - 后端可在响应中返回 204（无内容），避免前端等待
- 若用 Nginx 直接处理该接口（如 proxy_pass 到空服务或 return 204），也能记录日志，但失去校验和聚合能力
验证与排查要点
- 用浏览器开发者工具 → Network → 查看上报请求的 Headers，确认
X-Perf-FCP是否存在且值合理 - 检查 Nginx error.log，确认无
invalid number of arguments in "log_format"类报错 - 临时加一条
add_header X-Debug-FCP $http_x_perf_fcp;到 location 块，用 curl 测试是否能读取 - 确保前端请求是同源或已配好 CORS，否则自定义头可能被浏览器过滤
本质上，Nginx 是管道，不是分析器。它只负责记录你让它记的东西——把浏览器算出的耗时，借一次 HTTP 请求“运进来”，再落盘，就是最实用的方案。
