「ウェブサイトが重い」「AWSのデータ転送料金が高い」――そんな悩みを抱えていませんか？ CloudFrontを使っている方なら、表示速度やコストを改善するために「自動圧縮」オプションが有効だと聞いたことがあるかもしれません。

しかし、「本当に効果があるの？」「どれくらいファイルサイズが小さくなるの？」と疑問に思う方も多いのではないでしょうか。

この記事では、CloudFrontの自動圧縮がどれほど効果的なのか、具体的な検証を通じてその効果を「見える化」します。そして、あなたのウェブサイトで今すぐ使える検証方法と、最適な設定について解説します。

CloudFrontの自動圧縮オプションとは？

CloudFrontの自動圧縮は、ウェブサイトのコンテンツをより小さなサイズでユーザーに配信するオプションです。CloudFrontが、オリジン（S3など）から取得したファイルをGzipまたはBrotli形式で圧縮し、ユーザーに届けます。

これにより、以下のようなメリットが得られます。

  • 表示速度の向上: 圧縮されたファイルはサイズが小さいため、ダウンロード時間が短縮され、ウェブサイトの読み込みが速くなります。
  • コストの削減: AWSからインターネットへのデータ転送量（データアウト）が削減されるため、コストの低減につながります。

この自動圧縮機能は、すべてのファイルに適用されるわけではありません。圧縮によって高い効果が見込める特定のファイル形式にのみ適用されます。

  • 圧縮が適用されるファイル形式: HTML, CSS, JavaScript, SVG, JSON, XML, CSV, PDF, フォント (EOT, OTF, TTF)
  • 圧縮が適用されないファイル形式: 画像 (JPEG, PNG, GIF), 動画 (MP4), 音声 (MP3, AAC), すでに圧縮済みのファイル (ZIP)

今回は、この自動圧縮が実際にどれほどの効果をもたらすのかを、具体的なデータで検証していきます。

【実践】自動圧縮の効果を「見える化」してみた

今回の検証では、CloudFrontの圧縮オプションを有効にした場合と無効にした場合で、同じファイルへのアクセスを比較しました。ブラウザの開発者ツールを使って、レスポンスヘッダーから圧縮の有無やファイルサイズを確認します。

検証方法

  1. 圧縮オプションを有効・無効にした2つのCloudFrontを用意。
  2. オリジンとなるS3に、以下のファイルを配置。
    • テキストデータ (HTML): 圧縮の効果を比較
    • フォントデータ (TTF): 圧縮の効果を比較
    • 画像データ (PNG): 圧縮対象外のファイルとして比較
  3. ブラウザからそれぞれのCloudFront経由でファイルにアクセス。
  4. 開発者ツールでレスポンスヘッダーのContent-Encoding: gzip/brを見て圧縮の有無を、Sizeで転送サイズを確認。

テキストデータ（HTML）の場合

パターン1: ファイルサイズを水増ししたもの

同じ内容を複数回繰り返して作成した、元サイズが45.5KBのHTMLファイルです。

  • 圧縮なし: 転送サイズは45.4KB。元のサイズとほぼ同じです。
  • 圧縮あり: Content-Encoding:br が表示され、転送サイズは驚きの1.8KBに。元のサイズから96%もの大幅な削減に成功しました。これは、ファイルに多くの繰り返しが含まれていたためです。

圧縮オプションを有効化していないファイルサイズを水増ししたもののレスポンスヘッダー。 転送サイズは45.4KB。元のサイズとほぼ同じです。
圧縮オプションを有効化していないファイルサイズを水増ししたもののレスポンスヘッダー

圧縮オプションを有効化したファイルサイズを水増ししたもののレスポンスヘッダー。 ```Content-Encoding:br``` が表示され、転送サイズは驚きの1.8KBに。元のサイズから**96%**もの大幅な削減に成功しました。これは、ファイルに多くの繰り返しが含まれていたためです。
圧縮オプションを有効化したファイルサイズを水増ししたもののレスポンスヘッダー

パターン2: 繰り返しを含まないもの

複製を含めず作成した、元サイズが9.7KBのHTMLファイルです。

  • 圧縮なし: 転送サイズは9.7KB。元のサイズとほぼ同じです。
  • 圧縮あり: Content-Encoding:br が表示され、転送サイズは4.4KBに。元のサイズから54%の削減となり、繰り返しがないファイルでも非常に高い圧縮効果があることが分かりました。

圧縮化オプションを有効化していないファイルのレスポンスヘッダー｡ 転送サイズは9.7KB。元のサイズとほぼ同じです。
圧縮化オプションを有効化していないファイルのレスポンスヘッダー｡

圧縮化オプションが有効なファイルのレスポンスヘッダー｡ ```Content-Encoding:br``` が表示され、転送サイズは4.4KBに。元のサイズから**54%**の削減となり、繰り返しがないファイルでも非常に高い圧縮効果があることが分かりました。
圧縮化オプションが有効なファイルのレスポンスヘッダー｡

フォントデータ（TTF）の場合

元サイズが8.7MBのフォントデータです。

  • 圧縮なし: 転送サイズは8.7MB。
  • 圧縮あり: Content-Encoding:br が表示され、正常に圧縮されていることがわかります。ただし今回の検証では、TTFファイルへ直接アクセスしたため、適切な圧縮率を測定できませんでした。正しく検証するには、CSS経由でフォントを読み込む必要があります。

圧縮化オプションを有効化していないフォントファイルのレスポンスヘッダー｡ 転送サイズは8.7MB。
圧縮化オプションを有効化していないフォントファイルのレスポンスヘッダー

圧縮化オプションを有効化したフォントファイルのレスポンスヘッダー｡ Content-Encoding:br が含まれているため圧縮されています｡
圧縮化オプションを有効化したフォントファイルのレスポンスヘッダー

画像データ（PNG）の場合

元サイズが213KBの画像データです。

  • 圧縮なし: 転送サイズは213KB。
  • 圧縮あり: レスポンスヘッダーにContent-Encodingは表示されず、転送サイズは219KBとほぼ変わりませんでした。PNGはすでに圧縮済みの形式のため、CloudFrontの圧縮オプションは適用されないことが確認できました。

圧縮オプションが有効化されていない画像ファイルのレスポンスヘッダー｡ 転送サイズは213KB。
圧縮オプションが有効化されていない画像ファイルのレスポンスヘッダー

圧縮オプションが有効化されたCloudFrontへアクセスした画像ファイルのレスポンスヘッダー｡ 圧縮されていないことが確認できます｡
圧縮オプションが有効化されたCloudFrontへアクセスした画像ファイルのレスポンスヘッダー

まとめ：CloudFrontの自動圧縮は驚くほど効果的！

今回の検証結果をまとめると、以下のようになります。

元データ 圧縮なし 圧縮あり 圧縮率
HTML（水増し） 45.5KB 45.4KB 1.8KB 96%
HTML（通常） 9.7KB 9.7KB 4.4KB 54%
フォント（TTF） 8.7MB 8.7MB – –
画像（PNG） 218 KB 219 KB 219 KB 0%

この結果から、CloudFrontの自動圧縮が特にテキストファイルに対して劇的な効果をもたらすことが分かりました。

実環境での実践例：コスト削減の効果

実稼働中のサービスでCloudFrontの自動圧縮オプションを有効化したところ、1リクエストあたりのデータ転送量が約13%削減されました。

有効化前 有効化後
リクエスト数 21,638,933,832 16,549,421,690
データ転送量 1,631,918,470,778 1,085,870,321,882
1リクエストあたりの
データ転送量		 75.415 65.613

これは、特定の期間におけるデータ転送量の合計を、リクエスト数の合計で割ることで算出できます。CloudWatchのメトリクスを比較した結果、有効化前の「75.415」から、有効化後は「65.613」に削減されていることが確認できました。

あなたのウェブサイトでも、CloudFrontの自動圧縮を有効にすることで、表示速度の向上とAWSコストの削減という大きなメリットが得られるでしょう。もし、まだ設定していない場合は、今すぐ有効にすることをおすすめします。