提前加载资源，提升网页性能技巧

本文深入解析了如何通过精准使用 `` 提前加载网页关键资源（尤其是字体和首屏高优先级图片）来显著提升性能——它不阻塞渲染，却能有效缓解字体闪白（FOIT）和图片延迟显示问题；强调必须正确配置 `crossorigin` 属性以避免字体重复请求，只预加载首屏真实用到的少数字体变体并搭配 `font-display: swap`，而图片 preload 仅适用于 CSS 背景图、JS 动态插入等浏览器无法自动发现的特殊场景，并提供了实用的验证方法与避坑指南，助你把性能优化落到实处。

提前加载关键字体/图片？">

preload 是浏览器提前获取关键资源的声明式方式，它不阻塞渲染，但能提升字体、图片等核心资源的加载优先级。用对了，能显著减少 FOIT（字体闪白）和图片延迟显示问题。

加载关键字体时注意格式和 crossorigin

Web 字体（如 WOFF2）常受 CORS 限制，尤其从 CDN 加载时。必须显式设置 crossorigin 属性，否则即使 preload 了，后续 @font-face 仍会重新发起请求：

同时确保 CSS 中的 @font-face 使用相同 src 和 crossorigin 值（可设为 anonymous 或空字符串）：

只预加载真正首屏需要的字体变体

不要把整套字体（如 Regular、Bold、Italic、BoldItalic）全 preload。只选首屏文本实际用到的 1–2 个变体，比如正文用 Regular，标题用 Bold：

• 检查 HTML 和 CSS，确认哪些 font-weight / font-style 在首屏被触发
• 避免 preload 斜体或超粗体，除非首屏真实渲染了它们
• 使用 font-display: swap 配合 preload，兼顾性能与可用性

图片 preload 要谨慎，仅用于高优先级内联图

图片一般不推荐全局 preload，因为浏览器已有较智能的加载启发式算法（如 loading="eager" 或解析到 时自动抓取）。但以下情况可以考虑：

• 背景图通过 CSS background-image 加载，且是首屏 Hero 区域的核心图
• 图片在 JS 动态插入前就需就位（如轮播第一张）
• 图片 URL 无法被 HTML 解析器静态发现（如由 JS 拼接路径）

示例（预加载 CSS 背景图）：

验证是否生效：看 Network 和 Timing

打开浏览器开发者工具 → Network 标签页，筛选 Font 或 Img，观察：

• preload 资源是否出现在早期（比其他资源更靠上）
• Initiator 显示为 preload，而非 parser 或 script
• 对比关闭 preload 后的字体渲染时间（重点关注 download 和 finish 时间点）

注意：Chrome 的“Coverage”面板也能帮你识别未使用的字体文件，避免误 preload。

今天关于《提前加载资源，提升网页性能技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！