有提過這個網站很快嗎？喔有啊，我提過，還提過好幾次。

幾個原因（從正常到開始有點走火入魔）：

• 📄 靜態網站
• ☁️ 透過 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，這個新一代的圖片壓縮格式。來看看這個：

Chrome 85 和 Firefox 80 已經支援了。
然後我就像被颶風迎面擊中一樣 🌪️：

算是，也不算是。

我的部落格是用 Zola 架的，而 Zola 的 AVIF 支援還沒到位，但我現在就想要！所以我就隨手寫了一個很醜的 Rust 腳本（就像大家會做的那樣），把舊的 JPEG 和 PNG 圖片轉成 AVIF。原始檔我還是留著，以備不時之需。

底層其實是呼叫了 Kornel Lesiński 寫的 cavif。

節省的流量

AVIF 在部落格上的成果只能說令人驚艷：

檢查一下你的瀏覽器

不過先等一下……你的瀏覽器真的能顯示 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，我也完全掌握了 request 和 response 物件。我加了這段小妙招來攔截 worker 的回應：

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

然後砰的一聲，就大功告成了。Firefox 也開心了。你可以在這裡閱讀更多關於修改 response 物件的資訊。

Workers Sites 的另一個副作用是，現在正式環境的部署只要一分鐘就能完成。

搬到 Cloudflare 後的效能成果

拿去跟那些知名網站比較，我也不怕見笑：

延伸閱讀

• How to Use AVIF: The New Next-Gen Image Compression Format — 很棒的入門介紹，點出了整合 AVIF 時常見的坑。就是它啟發我加入 AVIF 支援的。
• AVIF has landed by Jake Archibald — 比較了不同格式的圖片大小與品質：SVG、JPEG、PNG、WebP 和 AVIF。
• avif.io — 快速、可設定、在桌機和手機上都能用的客戶端圖片壓縮工具。
• Squoosh — 另一個用 WebAssembly 打造、支援 AVIF 的圖片壓縮服務
• 大量關於如何設定 Cloudflare Workers 的精選範例
• Cloudflare Workers Sites