このサイトが速いって話、しましたっけ？ そうそう、しました。何度も。

その理由はいくつかあります（普通のものから、じわじわと正気を失い始めた兆候まで）：

• 📄 静的サイト
• ☁️ Cloudflare CDNでキャッシュ
• 🔗 ️HTTP/2とHTTP/3に対応
• 🚫 Webフォントなし（残念ながら）
• ✅ エッジワーカーで動くアクセス解析（Google Analyticsなし）
• 🌸 可能な限りJavaScriptを避ける。用途の90％はCSSでまかなえます。
• 🖼️ ページの再レイアウトを防ぐため、HTMLで画像の幅と高さを指定
• 👍🏻 インライン化して最適化したSVGグラフィックと、手書きのCSS
• 🚅 静的WASM検索（遅延読み込み）
• 🏎️ トップページ全体が、グラフィックを含めても10K未満（Brotli圧縮時）。そのため最初のHTTPラウンドトリップに収まるはずです。
• 💟 なんと、ファビコンまでサイズを最適化しています。追記：この記事のおかげで、今はSVGアイコンを使っています。

とはいえ、2020年ですよ。誰もがファビコンを最適化しているんですよね？ ……ですよね？

ところが、ほかの多くのサイトは、私ほどユーザーのデータ通信量について考えていないようです。というより、控えめに言っても過ぎた表現ですね。まったく気にしていません。でも私にとっては、軽さこそ美しさです！

待って、画像はどうするの？

図やイラストにはSVGを使うのが好みです。写真の場合だけ、JPEGかWebPを使います。

正直に言うと、私はWebPがあまり好きではありません。要するに、MozJPEGで圧縮したJPEGより小さくなるとは限らないのです。詳しく読みたければ、Mozillaのバグトラッカーで長く続いている議論があります。現在でも、SafariはWebPに対応していません。

AVIFの登場 👋

新世代の画像圧縮フォーマット、AVIFを紹介しましょう。これを見てください：

すでにChrome 85とFirefox 80が対応しています。
そして私は、ハリケーンに襲われたような衝撃を受けました 🌪️：

ええ、そうとも言えますし、そうとも言えません。

私のブログにはZolaを使っていますが、ZolaのAVIF対応はまだありません。でも今すぐ欲しい！ そこで、古いJPEGやPNG画像からAVIF画像を作成する不格好なRustスクリプトを急ごしらえしました（そういうものですよね）。念のため、元の生ファイルも残してあります。

内部では、Kornel Lesińskiによるcavifを呼び出しています。

データ通信量の削減

ブログでAVIFを使った結果は、まさに驚くべきものでした：

ブラウザーを確認する

ただ、ちょっと待ってください……あなたのブラウザーは、本当にAVIFを表示できますか？

「はい」と表示されたなら、準備完了です。
「いいえ」と表示されたなら、いくつか選択肢があります：

• Firefoxの場合：アドレスバーにabout:configと入力して、avifを検索します。
• Chromeの場合：最新版に更新されていることを確認してください。
• Safariの場合：あなたが人生で何をしているのか、私にはよく分かりません。代わりに本物のブラウザーを試してください。😏

回避策I：古いブラウザー向けのフォールバック

HTMLの素晴らしいところは、ブラウザーが未知の新しい構文を無視してくれることです。そこで<picture>要素を使って、適切なフォーマットを配信できます。（見て、お母さん、JavaScriptなし！）

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

実際のコードはもう少し複雑ですが、考え方は分かるでしょう。

回避策II：Github Pagesで間違ったContent-Typeが返される問題

ただし、GithubとAVIFには厄介な問題が1つありました。GithubのサーバーがContent-Type: application/octet-streamヘッダーを返していたのです。

そのため、Firefoxでは画像が読み込まれませんでした。

私のページはGithubがホスティングしているので、こちら側で直す方法はありません。今までは！ 以前からCloudflareのWorkers Sitesを試してみたいと思っていたのですが、このバグをきっかけに移行することにしました。基本的には、ウェブサイト全体をCDN上でエッジワーカーとして実行します。自前のウェブサーバーは必要ありません。何が素晴らしいかというと、これでサイトがどこでも高速になったことです。遠隔地であっても、サーバーへの往復はもう必要ありません。

エッジワーカーを実行することで、リクエストオブジェクトとレスポンスオブジェクトを完全に制御できるようにもなりました。ワーカーのレスポンスをインターセプトするために、この小さな逸品を追加しました：

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

これで万事解決です。Firefoxもご機嫌です。レスポンスオブジェクトの変更についてはこちらで詳しく読めます。

Workers Sitesのもう1つの副作用として、本番デプロイにかかる時間が、今では1分になりました。

Cloudflare移行後のパフォーマンス結果

よく知られたサイトとの比較から逃げる必要もありません：

さらに読む

• AVIFの使い方：新世代の高性能画像圧縮フォーマット — AVIFを組み込む際によくある落とし穴を紹介した、分かりやすい入門記事です。これに触発されて、AVIF対応を追加しました。
• Jake ArchibaldによるAVIFがやってきた — SVG、JPEG、PNG、WebP、AVIFという異なるフォーマットの画像サイズと品質を比較しています。
• avif.io — デスクトップとモバイルで動作する、高速で設定可能なクライアントサイド画像圧縮
• Squoosh — AVIFに対応した、WebAssemblyで構築された別の画像圧縮サービス
• Cloudflare Workersの設定方法に関する優れたサンプルがたくさんあります
• Cloudflare Workers Sites