如何优化 CDN 首屏加载速度降低 TTFB 耗时？

降低 CDN 场景下的 TTFB，最直接的方案是确保静态资源命中边缘节点缓存，同时优化源站响应逻辑，适用于大多数内容型网站和 API 加速场景。

先说结论：TTFB 过高通常是因为请求没有命中 CDN 缓存或源站处理过慢，优先检查缓存命中状态，再排查源站性能。

先定位：使用 curl 或浏览器开发者工具确认 TTFB 耗时主要发生在 DNS、连接建立还是服务端处理阶段。
先做：开启 CDN 边缘缓存规则，确保静态资源返回命中状态，同时优化源站数据库查询和代码逻辑。
再验证：对比优化前后的响应头信息和水幕图，确认缓存命中且首字节时间明显缩短。

命令速用版

如果你习惯使用命令行，可以用以下命令快速查看 TTFB 和缓存状态。将 URL 替换为你的实际域名：

首先创建格式文件，执行以下命令：

echo -e "time_starttransfer: %{time_starttransfer}s\n----------\ntime_total: %{time_total}s" > format.txt

然后使用 curl 测试：

curl -w "@format.txt" -o /dev/null -s "https://www.example.com"

重点关注 time_starttransfer，它近似等于 TTFB。同时检查响应头中是否有 X-Cache 或 CF-Cache-Status 字段，确认是否命中 HIT。

为什么会这样

TTFB（Time To First Byte）是指从客户端发起请求到接收到第一个字节所经历的时间。在 CDN 架构下，这个时间主要由几部分组成：DNS 解析时间、TCP 握手时间、TLS 握手时间、CDN 节点处理时间以及源站响应时间。

如果 CDN 缓存命中，请求会在边缘节点直接返回，TTFB 通常较低；如果缓存未命中（MISS），CDN 需要回源拉取数据，TTFB 会增加一个往返源站的网络耗时加上源站生成内容的时间。TTFB 降低幅度取决于节点距离和源站性能，核心在于减少回源次数。

分步处理

1. 检查缓存配置

阿里云 CDN：域名管理 > 缓存配置 > 缓存过期时间，为 css、js、图片设置较长过期时间（如 1 个月）。
Cloudflare：Caching > Configuration > Browser Cache TTL，建议设置为 Respect Existing Headers 或自定义时长。

对于动态内容，谨慎设置缓存，避免用户看到旧数据。

2. 优化源站响应

如果缓存无法命中（如 HTML 文档或 API 接口），TTFB 主要取决于源站。检查后端日志，确认数据库查询是否缓慢。开启源站服务器的 Keep-Alive 功能，减少 TCP 连接重建开销。

Nginx 源站配置示例：

http {\n    keepalive_timeout 65;\n    server {\n        location / {\n            proxy_http_version 1.1;\n            proxy_set_header Connection "";\n            proxy_connect_timeout 60s;\n        }\n    }\n}

3. 启用 HTTP/2 或 HTTP/3

在 CDN 控制台开启 HTTP/2 支持。HTTP/2 的多路复用特性可以减少队头阻塞，虽然主要提升并发加载，但对连接复用也有助于降低后续请求的握手耗时。

4. 减少重定向

检查域名是否存在多次跳转（例如 http 到 https，www 到非 www）。每一次 301/302 跳转都会增加一次完整的请求往返，直接拉长 TTFB。

怎么验证是否生效

1. 浏览器开发者工具

打开 Chrome 浏览器，按 F12 进入 Network 面板，勾选 Disable cache 后刷新页面，查看 Waterfall 列中的 Waiting (TTFB) 时长。再次刷新（允许缓存），观察该时长是否缩短。

2. 检查响应头

在 Network 面板点击具体请求，查看 Response Headers。如果看到 X-Cache: HIT 或类似字段，说明 CDN 已生效。如果显示 MISS 或 EXPIRED，说明仍需优化缓存规则。

3. 多地拨测

使用第三方监控工具（如 WebPageTest 或 CDN 厂商自带的拨测工具），从不同地域发起请求，观察 TTFB 的平均值和波动情况。

常见坑

1. 动态内容误缓存

不要为了追求低 TTFB 而强制缓存用户个性化页面（如购物车、个人中心），这会导致严重的内容错误。建议在源站配置响应头明确指示不缓存：

Cache-Control: no-cache, private\nPragma: no-cache

或使用 CDN 的边缘计算功能处理动态请求。

2. SSL 握手开销

如果 CDN 和源站之间没有配置合理的 SSL 复用，每次回源都可能重新握手。确保 CDN 到源站也启用了 Keep-Alive 和会话复用。

3. DNS 解析慢

有时候 TTFB 高不是因为 CDN 慢，而是 DNS 解析慢。检查本地 DNS 设置，或使用 DNS Prefetch 技术在页面头部预解析域名。

参考来源

MDN Web Docs, "Performance overview", https://developer.mozilla.org/zh-CN/docs/Web/Performance
Google Web Dev, "Optimizing TTFB", https://web.dev/articles/ttfb
Cloudflare Blog, "What is Time to First Byte (TTFB)?", https://www.cloudflare.com/learning/performance/metrics/what-is-time-to-first-byte/