先把当时的情况摆出来。为了优化 LCP,在 Nginx 里加了 103 Early Hints 预加载 CSS 和字体。上线后 TTFB 从 420ms 涨到 820ms,LCP 一点没改善。

真正麻烦的地方在于,几个原因的现象几乎一样。103 需要应用先返回中间响应,后端处理被拉长。少数情况下是预加载的资源没有设置 crossorigin,浏览器重复下载。

另外,CDN 不支持 103,被降级成缓冲整个响应。少数情况下是预加载列表里放了三方字体,连接建立反而拖慢首屏。

第一件事是确认响应里是否真的发出 103

curl -sI --http1.1 https://www.example.com/ | head -5

给预加载补 crossorigin 与 as

Link: </app.css>; rel=preload; as=style

只保留关键 CSS 一条预加载

add_header Link "</style.css>; rel=preload; as=style" always;

末了对比开启前后的 TTFB 与 LCP

curl -s -o /dev/null -w '%{time_starttransfer}\n' https://www.example.com/

改之前我把相关日志按时间截了一段存着,事后对时间线用得上。

恢复的判定其实很直接。去掉多余预加载后 TTFB 回落到 430ms,LCP 保持在 2.0 秒以内,首屏渲染没有回退。

容易忽略的是,Early Hints 只对确实要用的资源有效,推多了等于让浏览器提前排队,反而挤占首屏关键请求。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。

作者 9823189