SuperAPI AI 工具集

fetchpriority-attribute

前端与建站

查看项目

更新于 10-16 08:48

技能介绍

用途:通过 fetchpriority 提示资源加载优先级,优化最大内容绘制(LCP)与关键资源加载顺序。浏览器依靠内部启发式判断优先级,无法自动识别 LCP 候选图片,因此需要显式标注。

主要能力:为 LCP 图片添加 fetchpriority="high" 以加速首屏渲染;为折叠下方的非关键图片添加 fetchpriority="low",避免与关键资源竞争;对关键字体和 CSS 也可使用 fetchpriority="high"。资料称在真实测试中可降低 LCP 5%–30%。

使用方式:在 LCP 图片元素及任何被预加载的关键资源上添加 fetchpriority="high",对非关键的折叠下方图片添加 fetchpriority="low"。检查 LCP 图片或首屏元素是否缺少 fetchpriority="high",以及高优先级 preload 链接是否遗漏该属性,可在代码审查中标记缺失项。

适用场景:优化 LCP、减少渲染阻塞资源竞争、微调关键渲染路径中的资源加载顺序,以及前端代码审查。

限制:不要将超过一到两个资源标记为高优先级,否则会削弱该提示的作用;资料未提供具体框架实现细节,需参见 references/rule.md 获取完整代码示例与框架专属指导。