做首屏优化时 Chrome 控制台反复冒出一条警告 A preload for https://cdn.xx.com/f.woff2 is found but is not used 字体其实早就下到了本地 首屏时间却一点没变快 白白折腾半天。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,preload 只负责提前下载 不参与优先级排序 字体要等 CSS 解析到 font-face 才真正用上 中间只要有阻塞样式挡着 提前下的字体就一直躺在缓存里。
「preload 未使用警告」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
<link rel='preload' href='/fonts/brand.woff2'
as='font' type='font/woff2' crossorigin>
同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
具体做法是,确认 preload 的地址和 @font-face 里的 src 完全一致 差个版本号就对不上;补上 as 和 type 以及 crossorigin 这三个属性 少写一个都不算命中请求;字体 preload 放在所有阻塞样式之前 让它先排进请求队列。
最后用这个标准收尾,警告消失 字体请求在瀑布图里靠前 首屏文字出现时间前移。
