对于大多数内容型网站，最推荐的做法是先通过 Chrome DevTools 确认 LCP 元素具体是哪张图片或字体，然后仅对该关键资源添加 preload 提示，避免盲目预加载导致带宽竞争。
先说结论：link preload 能有效减少关键资源的发现延迟，但只建议用于确认为 LCP 元素的图片或字体，滥用会适得其反。
- 先定位：使用 Performance 面板找出当前页面的 LCP 元素是什么。
- 先做：在 HTML head 区域为该资源添加 rel="preload" 标签。
- 再验证：通过 Lighthouse 或 Network 面板确认请求时机是否提前。
第一步：精准定位 LCP 元素
盲目预加载是性能优化大忌，必须先确认目标。以下是 Chrome DevTools 的具体操作步骤：
- 打开面板：按 F12 打开 DevTools，切换到 Performance 面板。
- 开始录制：点击左上角的录制按钮（圆形图标），然后刷新页面。
- 停止录制：页面加载完成后，再次点击录制按钮停止。
- 查找标记：在 Timing 轨道中找到紫色的 LCP 标记，鼠标悬停可查看具体对应的元素（通常是首屏大图或标题字体）。
- 确认 URL：在下方 Network 面板或 Elements 面板中找到该资源的具体 URL 路径。
核心配置示例
确认资源后，在 <head> 区域添加 preload 标签。注意 as 属性必须准确，否则浏览器会忽略。
图片资源：
<link rel="preload" href="/images/hero.jpg" as="image">
字体文件（建议始终添加 crossorigin）：
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
常见资源类型对照表：
| 资源类型 | as 属性值 | 注意事项 |
|---|---|---|
| 图片 | image | 支持 webp, jpg, png 等 |
| 字体 | font | 需添加 crossorigin 属性 |
| 脚本 | script | 谨慎使用，避免阻塞 |
| 样式 | style | 通常不建议 preload CSS |
原理简述
浏览器解析 HTML 时，通常要等到解析到 CSS 或 img 标签时才知道需要加载哪些资源。preload 相当于提前给浏览器一个“剧透”，让它在解析早期就开始建立连接和下载，从而缩短关键资源的等待时间。
验证生效方法
配置完成后，需通过以下方式验证是否生效：
- Network 面板：刷新页面，观察该资源的请求开始时间（Start Time）是否比未添加前更早，且优先级（Priority）是否变为 Highest。
- Lighthouse 测试：运行性能测试，查看 LCP 数值变化及 Opportunities 中是否还有预加载建议。
- 控制台排查：如果 Console 出现警告 "The resource ... was preloaded using link preload but not used within a few seconds"，说明预加载资源未被及时使用，需检查 href 或 as 属性。
常见陷阱与排查
- as 类型不匹配：如果 as="image" 但实际是字体，浏览器会忽略该 preload。
- 字体漏写 crossorigin：对于字体文件，建议始终添加 crossorigin 属性，无论是否跨域，以避免与 CSS 请求模式不匹配导致重复下载。
- 预加载非关键资源：会抢占带宽，导致真正重要的 LCP 资源下载变慢。
- 路径错误：href 路径必须准确，否则会产生 404 请求浪费连接数。