把 Hexo 或 Hugo 这样的静态博客部署到 GitHub Pages 或 Cloudflare Pages，已经是当下技术人的标配。静态页面本身没有数据库查询的负担，速度已经很快，但这真的是极限了吗？

当你的博客面临全球不同地区的访问，或者页面包含大量高清配图时，如果不进行深度的 CDN 调优，访问体验依然会大打折扣。今天，结合我自己的建站实战，聊聊如何”榨干” Cloudflare 的免费额度，实现网站的秒级响应。

一、开启 Brotli 压缩（比 Gzip 更凶狠）

很多人知道 Gzip，但 Cloudflare 提供了更高效的 Brotli 压缩算法。对于纯文本的 HTML、CSS 和 JS 文件，Brotli 能比 Gzip 多压缩 15%-20% 的体积。

实战操作：登录 Cloudflare 控制台 → 侧边栏选择 速度 (Speed) → 优化 (Optimization) → 打开 Brotli 开关。

收益：前端静态资源的传输时间瞬间减少五分之一。建议同时确保源服务器也已开启 Gzip/Brotli，形成双重压缩保障。

二、制定精准的 Cache Rules

Cloudflare 默认的缓存策略是相对保守的，它通常不会缓存 HTML 文件。为了达到极致的速度，我们可以强制 Cloudflare 在其全球边缘节点缓存我们的所有静态内容。

在 缓存 (Cache) → Cache Rules 中创建一条新规则：

  1. 匹配请求：选择 URI Path 包含 /（即全站拦截）。
  2. 边缘缓存 TTL：对于静态博客，内容变化不频繁，可以激进地设置为 7 天 甚至 1 个月。
  3. 浏览器缓存 TTL：设置为 1 天。

这样，访客哪怕是第一次打开你的网站，也是直接从离他最近的 Cloudflare 节点拉取数据，完全不需要回源。

⚠️ 注意：开启强缓存后，如果你发布了新文章，记得去控制台点击一下”清除缓存 (Purge Cache)”，否则访客看到的还是旧页面。

三、Auto Minify 自动压缩

Cloudflare 免费版还提供了自动压缩 HTML、CSS 和 JavaScript 的功能：

  • 进入 速度 → 优化 → Auto Minify
  • 全部勾选（JavaScript、CSS、HTML）

这会在边缘节点自动移除代码中的空白和注释，进一步减小文件体积。对于已经压缩过的文件影响不大，但对于某些遗漏压缩的第三方资源，这是最后的保障。

四、Early Hints 优化首屏

这是一个非常前沿的 Web 技术。传统浏览器需要先下载 HTML，解析到 <head> 里的 CSS 和字体链接时，才去发起请求。

而开启了 Early Hints 后，Cloudflare 会在服务器还在生成 HTML 时，就提前告诉浏览器：”嘿，你等下会用到这些 CSS 和字体，赶紧先去下载！”

实战操作：在 速度 → 优化 中，找到并开启 Early Hints。这对于提升 LCP（最大内容渲染时间）这一核心 SEO 指标有奇效。

五、HTTP/3 (QUIC) 与 0-RTT

HTTP/3 使用 UDP 替代 TCP，大幅减少了连接建立的延迟。在 Cloudflare 中，HTTP/3 通常默认开启。但有一个进阶选项值得注意——0-RTT 连接恢复：

  • 进入 网络 (Network) 设置
  • 开启 0-RTT Connection Resumption

这允许曾访问过你网站的浏览器在后续连接时跳过握手，直接发送数据。对回访用户的体验提升非常显著。

⚠️ 0-RTT 有一个安全代价：重放攻击。如果你的网站有非幂等的 POST 请求（如支付、登录），请谨慎开启或确保应用层有防重放机制。

六、Argo Smart Routing（付费选项）

如果你的预算允许，Cloudflare 的 Argo 智能路由是性价比最高的付费功能。它会根据全球网络实时拥塞状况，动态选择最快路径回源。实测可以将首次字节时间（TTFB）降低 30% 以上。每月仅需几美元，但效果立竿见影。

七、终极避坑：PJAX 与 CDN 的路由冲突

在使用带有 PJAX（无刷新加载）技术的 Hexo 主题时，极易与 Cloudflare 的路由规则发生冲突。因为 PJAX 是局部请求，如果 CDN 强制处理了尾部斜杠（Trailing Slash），会导致前端直接报 404 错误。

解决方案：
在主题配置中果断关闭 PJAX（pjax: false），或者在系统配置中将优雅链接（pretty_urls）与服务器路由对齐。对于追求 SEO 和广告加载流畅度的站点，建议直接关闭 PJAX——谷歌爬虫不会等你执行 JavaScript。

八、性能验证

配置完成后，用以下工具验证实际效果：

  • WebPageTest：全球多节点测速，查看首屏时间、LCP、TTFB
  • Lighthouse：Chrome DevTools 内置，关注 Performance 和 SEO 评分
  • Cloudflare Analytics：查看缓存命中率和带宽节省量

总结

Cloudflare 免费版的潜力远不止于”开个 CDN”。Brotli 压缩、合理的缓存策略、Early Hints 和 HTTP/3 的组合，足以让一个静态博客在全球范围内实现 < 1 秒的首屏加载。这套配置就是我的生产环境方案，已验证有效。