你可能遇到过这种情况：

• 页面看起来不复杂，但首屏就是慢半拍；

很多时候，问题不在框架，不在后端，也不在“再上一个性能插件”。
而在于我们没有把足够的信息告诉浏览器。

这篇文章只讲 2 个属性：

• loading：资源什么时候加载
• fetchpriority：资源多紧急

它们都很小，但对性能和表单体验都很实用。下面直接上可落地的写法。

1）loading：让“看不见的内容”晚点再下载

默认情况下，浏览器会尽快请求 HTML 中可见的资源，即使它们在页面很下方。
如果一个资讯页有 40 张图片，首屏网络就会被“未来才会看到”的资源抢占。

推荐用法

<!-- 首屏主视觉：不要懒加载 -->
<img
  src="/assets/banner-spring-sale.webp"
  alt="春季大促横幅"
  width="1280"
  height="720"
  loading="eager"
>

<!-- 列表区图片：建议懒加载 -->
<img
  src="/assets/product-108.webp"
  alt="蓝牙耳机商品图"
  width="600"
  height="600"
  loading="lazy"
>

<!-- 价格地图、第三方页面等 iframe 也可懒加载 -->
<iframe
  src="https://example-map.com/store-locator"
  title="门店分布"
  loading="lazy"
></iframe>

实战测试

<article class="item">
  <img src="https://picsum.photos/id/102/600/600" alt="产品图A" width="600" height="600" loading="lazy">
  <div class="ok">产品 A / lazy</div>
</article>
<article class="item">
  <img src="https://picsum.photos/id/103/600/600" alt="产品图B" width="600" height="600" loading="eager">
  <div class="ok">产品 B / lazy</div>
</article>

上面产品图A元素在上面，但是设置了loading="lazy"，产品图B元素在下面，但是设置了loading="eager"，结果产品图B先加载，产品图A后加载。

使用要点

• 首屏关键图（尤其是 LCP 候选）不要设 lazy，否则可能拉高 LCP。
• loading="lazy" 的图片务必写 width 和 height，减少布局抖动（CLS）。
• 不是所有图片都需要懒加载：页面很短、图片很少时，收益可能有限。

2）fetchpriority：告诉浏览器“谁最重要”

浏览器有自己的调度策略，但它不总能猜对你的业务优先级。
比如首页 Hero 图通常最关键，却可能与字体、统计脚本、次要资源一起排队。

fetchpriority 是优先级提示：high、low、auto（默认）。

推荐用法

<!-- 首页最关键视觉图：提高优先级 -->
<img
  src="/assets/home-hero.avif"
  alt="智能看板产品截图"
  width="1440"
  height="900"
  loading="eager"
  fetchpriority="high"
>

<!-- 非关键预加载字体：降低竞争 -->
<link
  rel="preload"
  href="/fonts/brand-secondary.woff2"
  as="font"
  type="font/woff2"
  crossorigin
  fetchpriority="low"
>

<!-- 非关键脚本：延后且低优先级 -->
<script src="/js/heatmap.js" defer fetchpriority="low"></script>

和 loading 的区别（高频混淆）

• loading 解决“现在要不要发请求”；
• fetchpriority 解决“如果要发，谁先抢到带宽”。

首屏主图常见组合是：loading="eager" + fetchpriority="high"。
一个控制不延迟，一个控制尽早抢资源。