My Blog Just Got Faster: Cloudflare Workers and AVIF Support

2020-09-14

Matthias Endler

我的博客又变快了：Cloudflare Workers 与 AVIF 支持

原文由 Matthias Endler 于 2020-09-14 发布，订阅该博客

提过这个网站很快吗？当然，提过，还不止一次。

原因有这么几条（从常规操作到初现偏执）：

📄 静态网站
☁️ 通过 Cloudflare CDN 缓存
🔗 支持 HTTP/2 与 HTTP/3
🚫 无网页字体（可惜了）
✅ 基于 Edge Worker 的统计分析（不用 Google Analytics）
🌸 尽可能避免使用 JavaScript；90% 的场景用 CSS 就能搞定。
🖼️ 在 HTML 中指定图片宽高，避免页面回流。
👍🏻 内联、经过优化的 SVG 图形和手写的 CSS
🚅 静态 WASM 搜索（懒加载）
🏎️ 整个首页（含图形）经 Brotli 压缩后不到 10K，应该能放进首个 HTTP 往返里。
💟 就连 favicon 都做了体积优化。更新：多亏了这篇文章，现在我改用 SVG 图标了。

不过话说回来，都 2020 年了：人人都在优化自己的 favicon，对吧？…对吧！？

结果发现，大多数其他网站根本不像我这么在意用户的流量套餐。实际上，这么说都算客气了：他们完全不在乎。但对我来说，精简即是美！

等等，图片怎么办？

我更喜欢用 SVG 来做图表和插图。只有是照片时，才会用 JPEG 或 WebP。

老实说，我从来不太喜欢 WebP。简单来说，用 MozJPEG 压缩的 JPEG 甚至可能比它更小。想了解更多可以看看 Mozilla bug tracker 上的长篇争论。直到今天，Safari 仍不支持 WebP。

你好，AVIF 👋

来认识一下 AVIF，新一代图像压缩格式。看看这个：

[ReachLightSpeed.com](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/) — 来源：ReachLightSpeed.com

它已经被 Chrome 85 和 Firefox 80 支持了。
然后我就像被飓风击中了一样 🌪️：

😲 天哪，主流浏览器现在都支持 AVIF 了！？
我也想给博客用上！

算是吧，也不完全是。

我的博客用的是 Zola，而 Zola 对 AVIF 的支持还没跟上，但我现在就想要！于是我就随手写了个简陋的 Rust 脚本（常规操作），把旧的 JPEG 和 PNG 转成 AVIF。原始文件我也留着，以防万一。

底层调用的是 Kornel Lesiński 写的 cavif。

节省了多少流量

检查一下你的浏览器

不过先等等……你的浏览器真的能显示 AVIF 吗？

如果上面显示的是“yup”，那就没问题了。
如果显示的是“nope”，你可以试试这几个办法：

Firefox：在地址栏打开 about:config 并搜索 avif。
Chrome：确保已更新到最新版本。
Safari：不知道你是怎么想的。换个正经浏览器试试吧。😏

变通方案一：为旧浏览器提供回退

HTML 有个好处，浏览器会忽略不认识的新语法。所以我可以用 <picture> 元素为你提供合适的格式。（看，没有 JavaScript！）

<picture>
  <source srcset="fancy_browser.avif" />
  <source srcset="decent_browser.webp" />
  <img src="meh_browser.jpg" />
</picture>

实际代码要复杂一些，不过你懂意思就行。

变通方案二：Github Pages 上错误的 Content-Type

不过，Github 和 AVIF 之间有个棘手的问题：他们的服务器返回的是 Content-Type: application/octet-stream 响应头。

这导致图片在 Firefox 上无法加载。

由于页面托管在 Github 上，我这边没法修复这个问题。直到现在！我早就想试试 Cloudflare 的 Workers Sites，这个 bug 终于让我下定决心切换。简单来说，我把整个网站作为 Edge Worker 直接跑在 CDN 上，不再需要自己的服务器。好处是，现在网站在任何地方都很快——即使在偏远地区——不再需要往返源站。

通过运行 Edge Worker，我还获得了对请求和响应对象的完全控制。我加了这样一段小巧的代码来拦截 Worker 的响应：

if (/\.avif$/.test(url)) {
  response.headers.set("Content-Type", "image/avif");
  response.headers.set("Content-Disposition", "inline");
}

搞定，大功告成。Firefox 也正常了。你可以在这里了解更多关于修改响应对象的内容。

Workers Sites 的另一个附带好处是，现在生产环境部署只需一分钟。

迁移到 Cloudflare 后的性能表现

和知名网站对比，我也不落下风：