事情本身不复杂,线索都在日志里。为了减少字体闪烁,给三个字重都加了 preload,结果首屏大图被挤到后面,LCP 从 2.1 秒涨到 2.9 秒。

排查方向其实有限,先把可能性排一排。preload 会抢占首屏关键资源的带宽。少数情况下是三个字重实际只用到两个,多加载了一份。

另外,字体文件没有做子集化,体积偏大。

动手时先看首屏真正用到几个字重

curl -s https://www.example.com/ | grep -o 'font-weight:[^;]*' | sort -u

只预加载主字重

<link rel="preload" as="font" href="/f.woff2" crossorigin>

做子集化压缩体积

pyftsubset font.ttf --text-file=chars.txt

这类改动我都写进变更记录,过两周再出问题时能对上号。

我习惯把每一步的执行时间和结果记在一边,后面复盘省事。

改完先别撤,确认这几项。字体提前可用,首屏图不再被挤后,LCP 回到两秒附近。

这里还有个坑。字体 preload 必须带 crossorigin,否则浏览器会重复下载一次,等于白花带宽还多了一次请求,改完用网络面板确认只加载一次,别只看首屏快了没有。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。

作者 9823189