给首屏 banner 加上 fetchpriority high 之后 瀑布图里它还是排在几十个请求之后 开始下载比 CSS 晚了 600 毫秒 属性像是完全没生效。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,同时带 loading lazy 或者被别的 preload 抢走带宽的时候 优先级都会被覆盖掉 图片写在 CSS background 里也根本读不到这个属性 真正该优先的图反而排到了末尾。
「fetchpriority 优先级」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
<img src='hero.avif' width='1200' height='600'
fetchpriority='high' alt='first screen'>
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
具体做法是,先确认这张图是 img 而不是背景图 背景图得改结构;去掉同一元素上的 loading lazy 属性 这两个属性不能同时写;查一下有没有别的 preload 在占带宽 把它的优先级降下来。
最后用这个标准收尾,首屏图紧跟 HTML 发起请求 开始下载的时间提前了 500 毫秒以上 效果稳定。
