SEO 百科

资源优先级

本页目录

资源优先级

资源优先级指浏览器下载页面资源时排出先后次序，也指站长用提示去影响这个次序的做法[1]。浏览器会按资源类型与位置自动分配优先级，多数时候够用；站长可以用 preload、preconnect 与 fetchpriority 去调整，把首屏关键资源提前[2]。用错提示会让真正重要的文件排队更久，收益反而变成损失。

优先级的分配

浏览器按资源类型与位置给出默认次序[2]：

  • <head> 里阻塞渲染的样式：最高；
  • 未加 defer 的 <head> 脚本：高；
  • 用 preload 标明的资源：高；
  • 首屏图片：较高；
  • 屏幕外图片与延迟加载资源：低。

提示的种类

  • preconnect：提前与跨域服务器建立连接；
  • dns-prefetch：只提前做域名解析，成本更低；
  • preload：提前拉取当前页面要用的关键资源；
  • prefetch：提前拉取后续页面可能要用的资源；
  • fetchpriority：就单个资源给出高或低的提示。

该提前的资源

只提前那些晚才能被发现的资源：样式表里引用的字体、CSS 背景图、由脚本插入的资源。这几类资源浏览器在解析初期看不到，preload 才有价值[1]。

<!-- 提前取回样式表里的字体，并预热字体域名 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>

<!-- 首屏大图提高抓取优先级 -->
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="示例横幅">

用错的后果

  • 一次预加载过多资源，带宽被分走，关键文件反而更慢；
  • 给用不到的资源加 preload，浏览器会在控制台提示「预加载但未使用」；
  • 字体预加载漏写 crossorigin，浏览器会再下载一次；
  • 抬高一个资源的优先级，等于压低同页面其他资源的次序。

HTTP Archive 的统计显示，资源提示的写法差异很大，误用并不少见[4]。

改动带来的代价

每条提示都要维护：换域名、换字体、换图片路径，提示也得跟着改，漏改就留下一条无效请求。预加载会与浏览器自身的调度打架，调过头需要反复测。把提示写进构建流程能减轻维护，但增加了配置的复杂度。

与抓取和收录的关系

提示只作用于浏览器与 CDN 的取数过程，爬虫按自己的调度抓取，不受这些标签影响。百度把搜索分成抓取、建立索引、展现三步[3]，抓取这一步与资源提示无关。提示影响的是首屏速度，以及页面体验这一路的排序参考。

附录

参见

参考资料

官方（境外）

  1. 《rel=preload》，MDN Web Docs。
  2. 《使用 Fetch Priority API 优化资源加载》，web.dev。

官方（国内）

  1. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

  1. 《Web Almanac: Resource Hints》，HTTP Archive，2021。

外部链接

无。