2023年9月より当ブログサイト(DevelopersIO)の画像配信を改善するため、CDNとして Cloudflareを導入、 Cloudflare Polish を利用した WebP変換などの最適化を開始しました。
その内容と、この半月間で確認できた実績、効果について共有させて頂きます。
構成図
事前準備
DNS
未活用だったドメインのDNSを、Route53のHostedZoneからCloudflareに移設しました。
CloudFront
従来から画像ファイル保管に利用しているS3をオリジンとして設定したCloudFrontを用意、 CloudflareのDNSに CNAME「プロキシ無し」で登録しました。
サイトプラン変更
「Cloudflare Polish」プロ以上のサイトプランで利用可能です。
イベントなどでスパイク的なアクセス発生時、ブログ画像配信が滞る事は望ましくないため、今回は「ビジネスプラン」を月額課金で利用する選択としました。
Polish設定
Cloudflareの管理画面で、「スピード」→「最適化」→「イメージの最適化」より、 「非可逆」、「WebP変換」 とした設定を行いました。
切替作業
WP Offload Media
WordPressのメディアとしてアップロードしたファイル、S3待避に利用するプラグイン(WP Offload Media Lite)の設定で、 画像ファイルの公開に用いるカスタムドメイン名(CNAME)を、Cloudflare管理の「developers.io」 ドメインのFQDNに変更しました。
DNSプロキシ
CloudflareのDNS設定で、画像配信に利用するCNAME設定のプロキシステータスを「プロキシ無し」から「プロキシ済み」に変更。 Polish による画像最適化を有効としました。
転送実績
Cloudflare 導入前後、一週間分の画像配信の転送実績の比較を実施、20〜30%の転送量の削減を確認できました。
Cloudflare
- 9/8(金)〜9/14(木)
CloudFront
- 8/17(金)〜8/23(木)
効果
WebP配信の割合
75%の画像画像ファイルがWebP変換されている事が、Cloudflareのパフォーマンスレポートで確認できました。
ファイルサイズ比較
配信頻度が多かった画像ファイルを中心に、Poloshによる画像最適前後のファイルサイズを比較。 20〜70%のファイルサイズの抑制が実現出来ていることが確認できました。
| Polishなし | Poloshあり | 削減率(%) | 画像ファイル |
|---|---|---|---|
| 62.5 KB | 29.5 KB | 52.8% |  |
| 122 KB | 96.4 KB | 21.0% |  |
| 140 KB | 78.9 KB | 43.6% |  |
| 649 KB | 160 KB | 75.3% |  |
EXIF除去
EXIF確認君を利用。 スマホで撮影した写真のEXIF情報、GPS情報などが削除されている事を確認できました。
Polish有効
Polish無効
- EXIF情報より、撮影場所、機材などの確認が出来る状態でした。
コスト
Cloudflareによる画像ファイルの配信を開始後、従来画像配信に利用していたCloudFrontのアウトバウンド通信量は1/3に減少しました。
- 8/17(金)〜8/23(木)
- 9/8(金)〜9/14(木)
当ブログサイト、CloudFrontは クラスメソッドメンバーズ、AWS請求代行(EC2・CDN割引プラン)の価格で利用しています。
2.2TBのアウトバウンド通信が減少した場合、月額約100ドルのAWS利用費が削減。 Cloudflare(ビジネスプラン:月額250ドル)の導入により、150ドルの月額費用追加となる計算となりました。
CloudFrontアウトバウンド通信量と費用の変化
| 前月実績 | 当月(予想) | |
|---|---|---|
| アウトバウンド通信量 | 3451.9 GB | 1244.4 GB |
| 東京リージョン定価計算($0.114/GB) | 393.5 USD | 141.9 USD |
| EC2・CDN割引プラン計算($0.0456/GB) | 157.4 USD | 56.7 USD |
EC2・CDN 割引プラン ※2 Amazon CloudFront全リージョンの単価が$0.0456/GBになります。例えば東京リージョンの単価$0.114/GBやアジアパシフィックリージョンの単価$0.120/GBに対して、$0.0456/GBでご提供します。
まとめ
DevelopersIOのブログサイト、2013年当時から画像ファイルの配信には S3とCloudFrontを利用、 ブログ配信環境に占めるCloudFront、S3の費用の割合としては高くなかった事もあり、画像最適化の優先度は低めの扱いでした。
過去には、WordPressプラグイン、Lambda、Nginx を利用した画像最適化の導入は試みていましたが、 WordPressプラグインはシステムの過負荷を招く原因となっていた事。 LambdaとNginxは、利用するライブラリに起因する脆弱性への対応や、未対応フォーマット、画質などの課題が発生した事で継続利用を断念した経緯がありました。
今回導入した「Cloudflare Polish」は、 ドメインの用意と 有償プランの契約だけで、簡単に最適化された画像配信を環境を実現できました。
引き続き 費用対効果に優れたブログ配信環境の実現に向けて Cloudflareの各種サービスの活用を図る予定ですが、 他にも 優れたSaaS、PaaS などの活用も試みていく予定です。今後の改善にもご期待ください。
4
