Cloudflare Mirage
Cloudflare Mirageは、モバイルブラウザで使用される画像の帯域幅を削減します。非常に遅いモバイル接続やHTTP/1で画像が多いウェブサイトの読み込みを加速することができます。
これを実現する方法は以下の通りです：
- 画像を低解像度のサムネイルに置き換え、それらを1つのファイルにまとめます。
- レイジーローダーとして機能し、高解像度の画像の読み込みを、それらが表示されるまで遅延させます。
Mirageを機能させるにはJavaScriptを有効にする必要があります。
- Polishは、モバイルだけでなくすべてのブラウザ向けに画像をシームレスに最適化し、画像をフル解像度のまま保持します。
- Image Resizingは、
loading="lazy"およびsrcsetHTML属性と組み合わせることで、Mirageと同様の結果を得ることができますが、実装にはマークアップの変更が必要です。
| Free | Pro | Business | Enterprise | |
|---|---|---|---|---|
Availability | No | Yes | Yes | Yes |
Mirageは以下の画像フォーマットで動作します：
.jpg.jpeg.png.gif.img
ドメイン全体でMirageの画像最適化を有効にするには：
- Cloudflareダッシュボード ↗にログインします。
- アカウントとゾーンを選択します。
- Speed > Optimization > Image Optimizationに移動します。
- MirageのトグルをOnに切り替えます。
Mirageのモバイルブラウザ最適化機能は、高遅延およびネットワーク接続が不良な場合にトリガーされます。モバイルブラウザで以下のフラグを使用してドメインにリクエストを送信することで、Mirageをテストできます：
EXAMPLE.COM/?forcepreload
プレローダーのみを実行し、ページ上で劣化した画像を提供するには、以下を入力します：
EXAMPLE.COM/?forcepreloadonly
以下は、?forcepreloadonlyフラグによってMirage 2がトリガーされた例です。顕著な画像の劣化は、Mirageが機能しているサインです：
