页面打开慢时，预加载看起来像一条捷径，但提前下载错资源也会挤占网络，让真正重要的内容更晚到达。判断图片及脚本资源预加载的适用条件，先看资源是否位于关键路径、浏览器何时发现它，以及它是否确实影响首屏显示或核心操作。
适合优先检查的通常是首屏主图、首屏背景图，以及页面启动时必需、但要等其他脚本执行后才会被发现的脚本。页尾装饰图、滚动后才出现的内容和非必要功能，则不应仅因文件较大就预加载。
先筛关键路径：下载后能否更早完成重要任务
关键路径上的资源会影响页面绘制或用户操作。比如文章页首屏的大幅配图，如果由脚本稍后插入，浏览器可能要等脚本运行后才开始请求；搜索页面的启动脚本若负责绑定输入和提交行为，也可能关系到用户能否尽快使用搜索。
反过来，尺寸很大的图片若在首屏以下，提前获取可能与首屏主图争用带宽。预加载能改变请求时机，不会让网络凭空变快。因此，先确认资源是否关键，再判断浏览器是否发现得太晚。
图片与脚本：按资源类型设定优先级
图片适合“早发现、早使用”的情况
首屏主图是常见候选，尤其当它通过样式表背景、客户端渲染或复杂组件间接加载时。若图片已经直接写在初始标记中，浏览器通常能较早发现它，额外预加载未必有收益。响应式图片还要考虑候选尺寸：使用适当的图片来源和尺寸提示，避免预加载一张、页面随后又下载另一张。
主图可评估预加载，也可通过 fetchpriority 提示其重要性。两者不是越多越好；多个资源同时被标为高优先级，会削弱优先级排序的意义。图标、缩略图和延迟加载图片通常不该与主图竞争。
脚本只预载启动所必需的部分
若关键脚本要到运行时才被发现，或模块入口依赖的模块会阻碍启动，可考虑提前请求。传统脚本的预加载应明确资源类型；ES 模块依赖则可评估 modulepreload。预加载只负责提前获取，并不等同于立即执行，也不能替代合理的脚本加载策略。
将整套页面脚本、所有路由代码或第三方统计脚本一并预载，容易造成无用下载。用户未必会访问其他页面，非关键代码也不应抢占首屏资源的带宽。
用四步确认是否值得预加载
- 列出候选资源：从首屏主图、启动必需脚本和关键模块依赖开始，不先把全站资源加入清单。
- 确认发现时机：查看页面初始标记和样式中的加载关系。资源若已被浏览器及时发现，通常优先考虑调整资源优先级，而非再发起一条预加载请求。
- 比较前后效果：在相同设备、网络条件和页面状态下，对照主图出现时间、首屏绘制及关键操作可用时间。重复下载、请求排队变长或首屏指标没有改善，都说明需要调整。
- 逐项上线与复查：一次改一个资源，确认页面实际使用的文件与预加载目标一致，再检查不同视口和页面类型，避免响应式选择造成重复请求。
常见失误：把“重要”误当成“越早越好”
预加载的主要代价是争用带宽、增加无效下载，并可能让更关键的请求排队。跨来源资源还要确保请求模式等配置一致，否则可能出现预加载后再次请求。若页面由多个模板组成，某个资源在一个页面很关键，在另一个页面可能完全不会用到，应该按页面类型分别判断。
实际筛选图片及脚本资源预加载的适用条件时，可采用一个简单标准：资源确实影响当前页面的首屏或关键交互，且浏览器原本发现得偏晚，才进入候选名单。否则，减少资源、改善发现路径或设置合理优先级往往更直接。
常见问题
首屏图片都应该预加载吗？
不应该。优先检查首屏主图；小图、背景装饰和非首屏图片通常不必提前获取。
脚本预加载会让脚本立刻运行吗？
不会。预加载主要提前获取资源，执行时机仍取决于脚本类型、页面结构和加载策略。
预加载后请求变多，正常吗？
可能发生重复下载，常见原因是预加载目标与页面最终使用的文件或请求配置不一致，应检查网络请求并移除无效规则。
该如何决定保留还是删除规则？
对照相同测试条件下的首屏呈现与关键操作时间；没有稳定改善，或造成其他关键请求变慢，就不应保留。