图片加载优化：loading与fetchpriority属性详解
你可能遇到过这种情况：页面看起来不复杂，但首屏加载就是慢半拍。很多时候，问题不在框架，不在后端，也不在于“再上一个性能插件”，而在于我们没有把足够的信息告诉浏览器。
这篇文章只讲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 / eager</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"。一个控制不延迟加载，一个控制尽早抢占资源。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！