先把当时的情况摆出来。为了优化 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 只对确实要用的资源有效,推多了等于让浏览器提前排队,反而挤占首屏关键请求。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。
