官网加载为什么慢：JS/CSS/字体/图片的资源优先级优化

企业官网最常见的抱怨是"首屏半天不出来"。排查完发现服务器不慢、代码也不复杂，慢就慢在浏览器要按顺序加载一大堆资源：CSS 卡住了渲染，字体阻塞了文字，首屏外的图片抢了带宽，第三方脚本又插在中间。官网优化不是"上 CDN 就完事"，而是把资源的优先级排对：哪些先、哪些后、哪些压根不该现在加载。本文按资源类型拆解一套可直接落地的优先级方案。

一、先看清瀑布流：慢在哪里

打开浏览器 DevTools 的 Network 面板，按"起始时间"排序看瀑布流，常见三类问题：

慢的典型形态： 1. 一条超长的渲染阻塞链：HTML → 同步JS → 同步CSS → 又同步JS 2. 首屏大图挤占带宽，真正关键的 CSS/JS 排队等 3. 字体文件在文字渲染前阻塞，白屏期全是等待

正常的形态： HTML 一到就出骨架，CSS 尽快就位，JS 全部 defer， 字体用 font-display: swap，图片按视口懒加载

判断标准很简单：滚动条能滚之前，页面上"可见内容"用了多少毫秒。这个数字（首屏可交互前的时间）才是官网优化的目标，不是"整页 load 事件"。

二、JS：默认 defer，关键逻辑才内联

<!-- 默认：defer 让脚本在 DOM 解析后执行，不阻塞渲染 -->
<script src="/js/app.js" defer></script>

<!-- 例外：首屏必需的极小块逻辑，内联进 head，避免一次请求 -->
<script>
  // 例如：首屏主题色、骨架屏渲染、关键埋点初始化
  document.documentElement.style.setProperty('--theme', '#0b5fff');
</script>

• 一律不用同步 <script src>：它会阻塞 HTML 解析和渲染，官网首页几乎不存在"必须同步"的脚本。
• 第三方脚本（统计、客服、字体）全部延后：放到 body 末尾或用 defer，必要时"空闲时再加载"（requestIdleCallback），别让第三方拖慢首屏。

三、CSS：能拆就拆，关键 CSS 内联

CSS 默认会阻塞渲染，所以原则是"首屏要用的快，首屏不用的后到"：

四、字体：font-display: swap + 子集化

字体是"看不见的阻塞者"：文字要用字体渲染，字体没到文字就空白。两个关键动作：

@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;      /* 先显示系统字体，字体就绪再替换 */
  unicode-range: U+4E00-9FFF; /* 中文子集：只加载用得到的字符 */
}

• font-display: swap 避免字体加载期间整页白字/无字。
• woff2 + 子集化能把中文字体从几 MB 压到几十 KB。
• 首屏只引 1-2 个字重，别一次引 4 个字重（4 个请求 4 个阻塞）。

五、图片：懒加载 + 现代格式 + 尺寸对齐

首屏图用 fetchpriority="high"，首屏外全部懒加载，格式优先 AVIF/WebP：

<!-- 首屏大图：高优先级 -->
<img src="/hero.webp" fetchpriority="high" width="1200" height="630" alt="产品主视觉">

<!-- 首屏外：懒加载，滚动到附近才加载 -->
<img loading="lazy" src="/feature.webp" width="800" height="500" alt="功能截图">

• 宽高必须写：不写会造成布局偏移（CLS），浏览器还要猜尺寸。
• CDN 按尺寸出图：列表页用小图、详情用大图，别让 2MB 原图去适配 300px 的缩略位。
• 懒加载的坑：首屏第一张图不要 lazy（会和关键资源抢），loading="lazy" 只给视口外的。

六、踩坑清单

七、工程落地建议

官网性能优化建议按"先看瀑布流、再逐类排序"推进：第一步用 DevTools 录一份首屏瀑布流，圈出前三长条；第二步把同步 JS 全部 defer、关键 CSS 内联（通常立竿见影）；第三步处理字体（swap+子集）和图片（懒加载+格式+尺寸）；最后再调第三方脚本时机。每一步改完用"首屏可交互时间"和移动端 3G 模拟验证一次，别只看桌面端。对大多数官网，做到"JS 全 defer + 关键 CSS 内联 + 字体 swap + 图片懒加载"四项，首屏就能快一个量级。

八、复盘清单

• 瀑布流里前三长的资源分别是什么、是否必要
• 是否有同步 JS 阻塞渲染
• 关键 CSS 是否内联、非关键是否延迟
• 字体是否 swap + 子集化、字重是否收敛
• 首屏图是否 high 优先级、非首屏是否 lazy、宽高是否齐全
• 第三方脚本是否延后/空闲加载
• 是否用移动端弱网验证过首屏可交互时间

结语

官网加载慢，九成不是服务器慢，而是资源优先级没排对。把 JS 放后面、CSS 关键的内联、字体别阻塞、图片按视口加载，这一套是每个前端都能落地、效果立竿见影的基础优化。先录瀑布流，再逐类排序，最后用弱网验证——官网首屏从"转圈"到"秒开"往往就差这几步。

以上为通用前端性能实践分享，仅作技术交流。