提升 LCP：fetchpriority='high' 使用指南

Source: Dev.to

什么是 fetchpriority？

fetchpriority 是一种浏览器提示，用于指示资源的相对重要性。虽然浏览器通常能够很好地猜测先加载什么，但它们并不是全知全能的。通过添加 fetchpriority="high"，可以将关键资源移到加载队列的前面。

当浏览器解析页面时，会为每个资源分配一个优先级（低、普通、高或非常高）：

• 图片： 通常为 低 或 普通
• 脚本和 CSS： 通常为 高

手动设置优先级会覆盖这些默认值，确保“关键”元素不会被不太重要的任务卡住。

对最大内容绘制（LCP）的影响

LCP 衡量的是最大图片或文本块何时可见。如果你的英雄图是 LCP 元素，fetchpriority="high" 可以：

• 减少排队时间 —— 浏览器更早开始下载该图片。
• 优化带宽 —— 为该资产分配更多的网络“管道”。
• 提升用户体验 —— 用户更快看到主要内容，降低跳出率。

实际测试表明，正确使用该属性可将 LCP 改善 20‑30 %。

如何使用 fetchpriority

图片

[Image: New Summer Collection]

预加载关键资产

为非关键资源降低优先级

[Image: Secondary image]

通用指南

• 不要滥用 —— 如果所有资源都标记为 “high”，提示就失去意义。只在折叠线以上的 1‑2 个最关键元素上使用。
• 结合懒加载 —— 对页面顶部的资产使用 fetchpriority="high"，对其他所有资产使用 loading="lazy"。同一张图片上不要同时使用两者。

测试提示

打开 Chrome DevTools → 网络（Network）面板，启用 Priority 列。你会看到每个请求分配的优先级，从而验证你的提示是否被遵循。

结论

fetchpriority="high" 是开发者性能工具箱中一个简单却强大的工具。它不是魔法棒，但它像一个大声的扩音器，告诉浏览器专注于真正对用户重要的内容。