凌晨 2:10，巴西、墨西哥、东南亚的自然流量正在慢慢“爬坡”，营销同事在群里吼：“移动端首屏白一块，4G 下 LCP 偶尔 5s+。”我盯着 Chrome DevTools 的瀑布图，CSS 始终晚了半拍，JS 也在队列里排队，英雄图还在慢吞吞地握手——典型的“关键静态资源没被提前拉起”的现场。

那一刻我决定：不等改前端大工程，先在 IIS 上把“预加载”做足，用服务器端把关键资源抢到第一棒。

1）目标与判定标准

目标：降低首页 首屏白屏时间（以 FCP/LCP 评估）与首包后关键静态资源首字节等待。

量化：

• 移动 4G（150ms RTT 模拟）下，FCP ≤ 1.5s，LCP ≤ 2.5s；
• 关键 CSS/首屏 JS/英雄图/首屏字体 在 TTFB 后一个 RTT 内开始下载；
• 白屏主因（CSS/字体/英雄图阻塞）消除，不依赖大规模改版。

2）现场环境与硬件参数（真实可复刻）

注意：Windows Server 2019 原生 HTTP/2 可用，但 HTTP/3/TLS1.3 不原生，若要启用可由 CDN 端提供，源站仍是 TLS1.2。

3）问题定位：瀑布图里的“慢半拍”

我抓了三份包（桌面宽带、移动 4G、内地到港专线），共性问题是：

• 关键 CSS（main.css）启动太晚：HTML 到达后浏览器才解析到 <link rel="stylesheet">，才开始队列，错过了第一个拥塞窗口。
• 首屏 JS（runtime/entry）与 CSS 同时排队：HTTP/2 单连接复用，但没有“提示”优先顺序。
• 英雄图与字体 没被提前调度：FOIT（字体阻塞）偶发，英雄图进入视区晚。
• 首包后应用冷启动 也会拖慢（首次访问后端 JIT/连接池冷，IIS 线程热身慢）。

结论：在不大改前端的前提下，服务器端用 Link 预加载 + 预热，把关键资源拉到第一个 RTT 里，最立竿见影。

4）总体策略（服务端视角）

A. 应用预热：IIS「Application Initialization」+ 站点/应用池预加载，消除冷启动带来的首包后卡顿。

B. 静态资源预加载（Preload/Preconnect）：

• 用 HTTP Link 响应头 和/或 HTML <link rel="preload">，锁定 main.css / runtime.js / 首屏字体 / 英雄图。
• 仅首页（或首页模板）注入，严格控制数量和体积。

C. 传输与缓存：IIS 静态压缩 + 长缓存 + 正确 MIME；有 CDN 时开启 Early Hints/HTTP/3（由 CDN 端提供）。

5）一步步实操

5.1 开启与验证 HTTP/2（已在 Win2019 原生）

• 绑定证书（SNI）、强制 HTTPS；
• 用 Chrome DevTools -> Network -> 添加“Protocol”列，确认为 h2；
• 保持同域名承载关键静态资源（避免跨域阻塞与 CORS 复杂度）。
• 为什么重要：HTTP/2 单连接复用 + 服务端给出预加载提示后，浏览器能更快分配调度窗口。

5.2 应用预热：IIS「Application Initialization」

安装功能：Windows 功能 > 角色 > Web Server (IIS) > Application Development > Application Initialization。

应用池：

• startMode="AlwaysRunning"
• Idle Time-out 适当调大/关闭（配合业务）。

站点：preloadEnabled="true"。

web.config 示例（ASP.NET Core 有健康页或 warmup 路由最佳）：

<configuration>
  <system.applicationHost>
    <applicationPools>
      <add name="ShopPool" startMode="AlwaysRunning" />
    </applicationPools>
    <sites>
      <site name="ShopSite" id="1" serverAutoStart="true">
        <application path="/" applicationPool="ShopPool" preloadEnabled="true">
          <virtualDirectory path="/" physicalPath="D:\sites\shop" />
        </application>
      </site>
    </sites>
  </system.applicationHost>

  <system.webServer>
    <applicationInitialization doAppInitAfterRestart="true">
      <add initializationPage="/warmup" />
    </applicationInitialization>
  </system.webServer>
</configuration>

小技巧：发布后用一个 PowerShell 预热脚本在本机循环 GET /warmup、/、关键分类页，直至 200 且平均耗时达标再切流。

5.3 找出“必须预加载”的资源清单

目标：让浏览器在拿到 HTML 的同时，就启动关键资源的下载。

使用 Chrome 的 Coverage 与 Performance 分析，标记 首屏必要资源：

经验法则：预加载条目 ≤ 5 个，总大小 ≤ 150–200 KB（尽量压在首个拥塞窗口内），优先 CSS 与小 JS，再是字体与英雄图。

5.4 方案一：用 HTTP Link 响应头 注入预加载（推荐）

优点：不改模板/HTML，IIS 统一下发；可按路径条件控制，仅对 / 生效。

做法：IIS「URL Rewrite」的 Outbound Rules + RESPONSE_Link 服务器变量。

web.config（仅对首页 / 返回 HTML 时添加 Link 头）：

<configuration>
  <system.webServer>
    <rewrite>
      <outboundRules>
        <rule name="Add Preload Links on Root" preCondition="IsHtml">
          <match serverVariable="RESPONSE_Link" pattern=".*" />
          <conditions>
            <add input="{REQUEST_URI}" pattern="^/$" />
          </conditions>
          <action type="Rewrite" value="</assets/css/main.abcd1234.css>; rel=preload; as=style, </assets/js/runtime.1a2b3c.js>; rel=preload; as=script, </assets/js/entry.home.9f8e7d.js>; rel=preload; as=script, </assets/fonts/Inter-roman.woff2>; rel=preload; as=font; crossorigin=anonymous, </assets/img/hero-home@1x.webp>; rel=preload; as=image; type=image/webp" />
        </rule>
        <preConditions>
          <preCondition name="IsHtml">
            <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
          </preCondition>
        </preConditions>
      </outboundRules>
    </rewrite>
  </system.webServer>
</configuration>

要点

• as= 必须正确（style/script/font/image），否则浏览器可能 重复下载。
• 字体要加 crossorigin=anonymous（与 CSS 域一致），并在服务器上开放 CORS（见 5.6）。
• 控制 Link 头长度：总字符建议 < 2KB，避免某些代理中间件截断/丢弃响应头。

批量配置（appcmd） —— 如果接受“全站下发”而非仅 /：

%windir%\system32\inetsrv\appcmd.exe set config "ShopSite" -section:system.webServer/httpProtocol /+"customHeaders.[name='Link',value='</assets/css/main.abcd1234.css>; rel=preload; as=style, </assets/js/runtime.1a2b3c.js>; rel=preload; as=script']" /commit:apphost

5.5 方案二：在 HTML <head> 内加入 <link rel="preload">（备选/双保险）

<link rel="preload" href="/assets/css/main.abcd1234.css" as="style">
<link rel="preload" href="/assets/js/runtime.1a2b3c.js" as="script">
<link rel="preload" href="/assets/js/entry.home.9f8e7d.js" as="script">
<link rel="preload" href="/assets/fonts/Inter-roman.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/img/hero-home@1x.webp" as="image" imagesrcset="/assets/img/hero-home@1x.webp 1x, /assets/img/hero-home@2x.webp 2x" imagesizes="100vw">

避免误用：不要把 <link rel="preload"> 当成 <link rel="stylesheet"> 使用；

如果用 onload-rel 切换技巧（rel=preload + onload="this.rel='stylesheet'"），注意无障碍与 <noscript> 兜底。

5.6 字体与 CORS/FOIT 处理

MIME 与字体映射：

<staticContent>
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>

CORS：允许 CSS/HTML 同域或指定子域加载字体

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://www.example.com" />
    <add name="Timing-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

CSS 中使用 font-display: swap，避免 FOIT：

@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter-roman.woff2') format('woff2');
  font-weight:400; font-style:normal;
  font-display:swap;
}

5.7 预连接与解析优化（可少量使用）

在首页 HTML 里增加（仅针对确实会命中的域）：

<link rel="preconnect" href="https://static.example-cdn.com" crossorigin>
<link rel="dns-prefetch" href="//static.example-cdn.com">

注意：preconnect 建立 TLS/ALPN 会占用握手预算，宁缺毋滥，仅对高命中域使用 1–2 个即可。

5.8 缓存与压缩（与预加载是“左右手”）

长缓存（指纹文件）：

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <staticContent enableETag="false" />
</staticContent>

压缩（IIS 自带 gzip；Brotli 建议走 CDN 或装 iisbrotli 扩展）：

<urlCompression doStaticCompression="true" doDynamicCompression="true" />
<httpCompression>
  <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
  <dynamicTypes>
    <add mimeType="text/*" enabled="true" />
    <add mimeType="application/javascript" enabled="true" />
    <add mimeType="application/json" enabled="true" />
  </dynamicTypes>
  <staticTypes>
    <add mimeType="text/*" enabled="true" />
    <add mimeType="application/javascript" enabled="true" />
    <add mimeType="application/json" enabled="true" />
    <add mimeType="image/svg+xml" enabled="true" />
  </staticTypes>
</httpCompression>

有 CDN 时：开启 Early Hints (103) 与 HTTP/3（CDN 侧），能把你设置的 Link: rel=preload 提前到握手阶段下发，更快。

5.9 CI 自动化：从产物清单生成 Link 头（防“指纹变化忘记改配置”）

假设前端构建输出 manifest.json（Vite/Webpack 均可），写个简单 PowerShell，把清单里标记为 initial 的 CSS/JS/字体/英雄图拼接成 Link 值，并写入 web.config（或 appcmd）：

$manifest = Get-Content "D:\sites\shop\assets\manifest.json" | ConvertFrom-Json
$links = @()

# 仅示例：按你的清单结构取关键资源
$links += "</assets/css/$($manifest.main.css)>; rel=preload; as=style"
$links += "</assets/js/$($manifest.runtime.js)>; rel=preload; as=script"
$links += "</assets/js/$($manifest.entry_home.js)>; rel=preload; as=script"
$links += "</assets/fonts/$($manifest.font_Inter.woff2)>; rel=preload; as=font; crossorigin=anonymous"
$links += "</assets/img/$($manifest.hero.webp)>; rel=preload; as=image; type=image/webp"

$linkHeader = [string]::Join(", ", $links)

& $env:windir\system32\inetsrv\appcmd.exe set config "ShopSite" -section:system.webServer/httpProtocol /-"customHeaders.[name='Link']" /commit:apphost | Out-Null
& $env:windir\system32\inetsrv\appcmd.exe set config "ShopSite" -section:system.webServer/httpProtocol /+"customHeaders.[name='Link',value='$linkHeader']" /commit:apphost

6）验证与对比数据

网络条件：Chrome Throttle，“Fast 3G/4G 近似”（RTT 150ms，下行 1.6–4Mbps）。

设备：安卓中端机 + iPhone 12。

页面：/（首页）。

观察：预加载后，关键资源与 HTML 几乎并行启动，白屏段明显收缩，LCP 峰值也更平滑。

7）常见坑与现场排障

as= 类型不对 → 浏览器不复用下载，导致 重复请求。

CSS 必须 as=style，JS as=script，字体 as=font，图像 as=image。

字体跨域：preload 写了 crossorigin，但服务器没放行 CORS → 报错或二次请求。

解决：加 Access-Control-Allow-Origin，推荐精确域名。

Link 头太长：被代理/安全设备截断或丢弃 → 预加载失效。

控制在 2KB 内；只保留首屏必需项。

英雄图抢带宽：大图过早拉起，挤压 CSS/JS。

用 webp/avif 压缩、合理 sizes/srcset，并保证 CSS 永远优先。

多语言/多模板：不同首页关键资源不一致。

出一份 路由到 Link 头 的映射（IIS OutboundRule 可按 REQUEST_URI 匹配），或在 CDN/边缘做逻辑生成。

ETag 导致回源 miss（多源或灰度节点 inode 不同）。

统一关闭静态文件 ETag，靠 Cache-Control: max-age, immutable。

HTTP/2 server push 幻觉：IIS 10/Win2019 不原生推送，且 Push 已被主流浏览器边缘化。

不要折腾 Push，资源提示用 preload +（有 CDN 时）Early Hints 更现实。

8）无 CDN / 有 CDN 两种落地建议

无 CDN：

• 以 IIS OutboundRules + Link 为主；
• 严控条目与大小；
• 依赖 HTTP/2；
• 补齐 gzip、长缓存、字体 CORS、应用预热。

有 CDN：

• 源站同样下发 Link；
• CDN 开启 Early Hints(103)、HTTP/3（客户端到 CDN 更快）；
• CDN 边缘缓存关键静态资源，命中率上来后，首屏更稳。

9）上线与回滚

• 灰度：按 UA/Region/百分比灰度 Link 头；
• 监控：RUM 上报 FCP/LCP/TTFB/首屏错误；服务端监控响应头大小与 5xx；
• 回滚：appcmd 一键移除 Link 头或禁用 OutboundRule（保留预热与缓存配置）。

10）小清单（可直接照做）

•  开启 HTTP/2（证书、SNI、强制 HTTPS）并验证 h2
•  安装并启用 Application Initialization，站点 preloadEnabled="true"
•  确认 关键资源清单（CSS/entry JS/字体/英雄图 ≤ 5 项，≤ 200KB）
•  IIS OutboundRule 添加 RESPONSE_Link（仅 / 生效）
•  字体 MIME 与 CORS、font-display: swap
•  静态压缩 与 长缓存（指纹文件）
•  （可选）CDN 早提示 Early Hints、HTTP/3
•  RUM 对比 FCP/LCP 曲线，观察 P75/P95 变化

凌晨 3:05，新的配置刚生效，瀑布图像是被“拉直”的钢琴键：HTML 与 main.css 同时起跑，runtime/entry 也不再“排队挤门”。群里先是安静了三十秒，然后“ok，白屏没了，LCP 稳在 2.xs”。
机房外的风更凉了，我给运维日志打上了“Preload 成功”的标签。第二天我把这套方案写进 SOP：先用服务器端的“预加载”把关键资源抢到前排，再谈前端改造。这不是一次“黑魔法”，只是我们在有限条件下，把浏览器能理解的“信号”给足了。

如果你也在香港的机房里，为跨境用户盯着首屏那一片“白”，不妨先把上面的清单跑一遍。多数时候，IIS 的一行 Link 头，就能让你的首页先跑起来、跑顺起来