

# 圧縮ファイルを供給する
<a name="ServingCompressedFiles"></a>

リクエストされたオブジェクトを圧縮するとオブジェクトが小さくなるため、ダウンロード時間を短縮できます。場合によっては、元のサイズの 4 分の 1 未満になることがあります。特に、JavaScript および CSS ファイルでは、ダウンロードが速くなると、ビューワーにウェブページが表示されるまでの時間が短縮されます。さらに、CloudFront データ転送のコストは、供給されるデータの合計量に基づきます。圧縮ファイルを供給すると、非圧縮ファイルを供給するよりもコストが安くなる可能性があります。

**Topics**
+ [

## オブジェクトを圧縮するように CloudFront を設定する
](#compressed-content-cloudfront-configuring)
+ [

## CloudFront 圧縮の仕組み
](#compressed-content-cloudfront-how-it-works)
+ [

## 圧縮の条件
](#compressed-content-cloudfront-notes)
+ [

## CloudFront が圧縮するファイルタイプ
](#compressed-content-cloudfront-file-types)
+ [

## `ETag` ヘッダーの変換
](#compressed-content-cloudfront-etag-header)

## オブジェクトを圧縮するように CloudFront を設定する
<a name="compressed-content-cloudfront-configuring"></a>

オブジェクトを圧縮するように CloudFront を設定するには、圧縮オブジェクトを供給するキャッシュ動作を更新します。

**オブジェクトを圧縮するように CloudFront を設定するには (コンソール)**

1. [CloudFront コンソール](https://console.aws.amazon.com/cloudfront/v4/home)にサインインします。

1. ディストリビューションを選択し、編集する **[動作]** を選択します。

1. **[オブジェクトを自動的に圧縮]** 設定では、**[はい]** を選択します。

1. [キャッシュポリシー](controlling-the-cache-key.md)を使用してキャッシュ設定を指定し、**[Gzip]** と **[Brotli]** の両方の圧縮形式を有効にします。

**注意事項**  
Brotli 圧縮を使用するには、[キャッシュポリシー](controlling-the-cache-key.md)を使用する必要があります。Brotli はレガシーキャッシュ設定をサポートしていません。
[CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-cloudfront-distribution-cachebehavior.html) または [CloudFront](https://docs.aws.amazon.com/cloudfront/latest/APIReference/Welcome.html) API を使用して圧縮を有効にするには、`Compress`、`EnableAcceptEncodingGzip`、`EnableAcceptEncodingBrotli` パラメータを `true` に設定します。

CloudFront がオブジェクトを圧縮する方法を理解するには、次のセクションを参照してください。

## CloudFront 圧縮の仕組み
<a name="compressed-content-cloudfront-how-it-works"></a>

1. ビューワーがオブジェクトを要求する ビューワーにより `Accept-Encoding` HTTP ヘッダーがリクエストに含められます。ヘッダー値には `gzip`、`br`、またはその両方が含められます。これは、ビューワーが圧縮オブジェクトをサポートすることを示します。ビューワーが Gzip と Brotli の両方をサポートしている場合、CloudFront では Brotli を使用します。
**注記**  
ウェブブラウザ Chrome および Firefox では、HTTPS を使用してリクエストを送信する場合のみ、Brotli 圧縮をサポートします。これらのブラウザでは、HTTP リクエストでの Brotli はサポートしていません。

1. CloudFront では、エッジロケーションで、リクエストされたオブジェクトの圧縮コピーのキャッシュを確認します。

1. 圧縮オブジェクトがキャッシュにあるかどうかに応じて、CloudFront は次のいずれかを実行します。
   + 圧縮オブジェクトが既にキャッシュにある場合、CloudFront ではそのオブジェクトをビューワーに送信し、残りの手順をスキップします。
   + 圧縮オブジェクトがキャッシュにない場合、CloudFront がリクエストをオリジンに転送します。
**注記**  
オブジェクトの非圧縮のコピーがすでにキャッシュにある場合、CloudFront はリクエストをオリジンに転送せずにビューワーに送信することがあります。例えば、CloudFront が[以前に圧縮をスキップした](#compression-skipped)場合に、この現象が起こる可能性があります。この場合、CloudFront では非圧縮オブジェクトをキャッシュし、オブジェクトが有効期限切れになるか、削除されるか、あるいは無効になるまで、処理を継続します。

1. オリジンが圧縮オブジェクトを返す場合 (HTTP レスポンスの `Content-Encoding` ヘッダーに示されているように)、CloudFront では圧縮オブジェクトをビューワーに送信し、それをキャッシュに追加して、残りの手順をスキップします。CloudFront では、オブジェクトを再度圧縮することはありません。

1. オリジンが HTTP レスポンスに `Content-Encoding` ヘッダーがない状態で CloudFront に非圧縮オブジェクトを返す場合、CloudFront ではオブジェクトが圧縮可能かどうかを判断します。詳細については、「[圧縮の条件](#compressed-content-cloudfront-notes)」を参照してください。

1. オブジェクトが圧縮できる場合、CloudFront ではオブジェクトを圧縮して、それをビューワーに送信し、キャッシュに追加します。

1. 以降、同じオブジェクトに対するビューワーリクエストがある場合、CloudFront は最初のキャッシュ済みバージョンを返します。例えば、ビューワーが Gzip 圧縮を使用する特定のキャッシュされたオブジェクトをリクエストして、ビューワーが Gzip 形式を*受け入れる*と、ビューワーが Brotli と Gzip の両方を受け入れる場合でも、同じオブジェクトに対する以降のリクエストには常に Gzip バージョンが返されます。

一部のカスタムオリジンでは、オブジェクトを圧縮することもできます。オリジンでは、CloudFront で圧縮されないオブジェクトを圧縮できる場合があります。詳細については、「[CloudFront が圧縮するファイルタイプ](#compressed-content-cloudfront-file-types)」を参照してください。

## 圧縮の条件
<a name="compressed-content-cloudfront-notes"></a>

CloudFront でオブジェクトを圧縮しないシナリオの詳細については、次のリストを参照してください。

**リクエストで HTTP 1.0 が使用される**  
CloudFront へのリクエストで HTTP 1.0 が使用される場合、CloudFront では `Accept-Encoding` ヘッダーを削除し、レスポンスのオブジェクトを圧縮しません。

**`Accept-Encoding` リクエストヘッダー**  
ビューワーリクエストに `Accept-Encoding` ヘッダーがない場合、またはヘッダーに `gzip` または `br` が値として含まれていない場合、CloudFront ではレスポンスのオブジェクトを圧縮しません。`Accept-Encoding` ヘッダーに追加の値 (`deflate` など) が含まれる場合、CloudFront ではそれらを削除してからリクエストをオリジンに転送します。  
CloudFront が[オブジェクトを圧縮するように設定されている](#compressed-content-cloudfront-configuring)場合、キャッシュキーとオリジンリクエストに `Accept-Encoding` ヘッダーが自動的に含められます。

**オブジェクトが圧縮されるように CloudFront を設定すると、コンテンツがすでにキャッシュされている**  
CloudFront では、オブジェクトをオリジンから取得したときにそのオブジェクトを圧縮します。オブジェクトが圧縮されるように CloudFront を設定した場合、CloudFront では、すでにエッジロケーションでキャッシュされたオブジェクトを圧縮しません。さらに、キャッシュされたオブジェクトがエッジロケーションで有効期限切れになり、CloudFront でオブジェクトに対する別のリクエストをオリジンに転送した場合に、HTTP ステータスコード 304 がオリジンから返されると、CloudFront ではファイルを圧縮しません。つまり、エッジロケーションには既に最新バージョンのオブジェクトがあります。エッジロケーションですでにキャッシュされているオブジェクトを CloudFront で圧縮するには、これらのオブジェクトを無効にする必要があります。詳細については、「[ファイルを無効化してコンテンツを削除する](Invalidation.md)」を参照してください。

**オブジェクトが圧縮されるようにオリジンがすでに設定されている**  
オブジェクトが圧縮されるように CloudFront を設定し、オリジンでもオブジェクトが圧縮される場合、オリジンには `Content-Encoding` ヘッダーが含まれている必要があります。このヘッダーは、オブジェクトが既に圧縮されていることを CloudFront に示します。オリジンからのレスポンスに `Content-Encoding` ヘッダーが含まれる場合、ヘッダーの値に関係なく CloudFront ではオブジェクトを圧縮しません。CloudFront ではレスポンスをビューワーに送信し、エッジロケーションでオブジェクトをキャッシュします。

**CloudFront が圧縮するファイルタイプ**  
詳細な一覧については、「[CloudFront が圧縮するファイルタイプ](#compressed-content-cloudfront-file-types)」を参照してください。

**CloudFront で圧縮するオブジェクトのサイズ**  
CloudFront では サイズが 1,000～10,000,000 バイトのオブジェクトを圧縮します。

**`Content-Length` ヘッダー**  
オリジンは、レスポンスに `Content-Length` ヘッダーを含める必要があります。これは、オブジェクトのサイズが CloudFront で圧縮できる範囲にあるかどうかを判断するために使用されるものです。`Content-Length` ヘッダーがない、無効な値が含まれている、または CloudFront で圧縮できるサイズの範囲外の値が含まれている場合、CloudFront はオブジェクトを圧縮しません。CloudFront がサイズ範囲を超える可能性のある大きなオブジェクトを処理する方法の詳細については、「[CloudFront がオブジェクトの部分的リクエスト (レンジ GET) を処理する方法](RangeGETs.md)」を参照してください。

**レスポンスの HTTP ステータスコード**  
CloudFront では、レスポンスの HTTP ステータスコードが `200`、`403`、または `404` の場合にのみ、オブジェクトが圧縮されます。

**レスポンスに本文がない**  
オリジンからの HTTP レスポンスに本文がない場合、CloudFront で圧縮するものはありません。

**`ETag` ヘッダー**  
CloudFront では、オブジェクトを圧縮するときに HTTP レスポンスの `ETag` ヘッダーを変更することがあります。詳細については、「[`ETag` ヘッダーの変換](#compressed-content-cloudfront-etag-header)」を参照してください。

**CloudFront が圧縮をスキップする**  
CloudFront はベストエフォートベースでオブジェクトを圧縮します。まれに、CloudFront のトラフィック負荷が高い場合、CloudFront はオブジェクトの圧縮をスキップします。CloudFront は、ホスト容量を含むさまざまな要因に基づいて、この決定を行います。CloudFront がオブジェクトの圧縮をスキップした場合、非圧縮オブジェクトをキャッシュし、オブジェクトが有効期限切れになるか、削除されるか、無効になるまで、処理を継続します。

## CloudFront が圧縮するファイルタイプ
<a name="compressed-content-cloudfront-file-types"></a>

オブジェクトが圧縮されるように CloudFront を設定すると、CloudFront が `Content-Type` レスポンスヘッダーに次の値を持つオブジェクトだけを圧縮します。
+ `application/dash+xml`
+ `application/eot`
+ `application/font`
+ `application/font-sfnt`
+ `application/javascript`
+ `application/json`
+ `application/opentype`
+ `application/otf`
+ `application/pdf`
+ `application/pkcs7-mime`
+ `application/protobuf`
+ `application/rss+xml`
+ `application/truetype`
+ `application/ttf`
+ `application/vnd.apple.mpegurl`
+ `application/vnd.mapbox-vector-tile`
+ `application/vnd.ms-fontobject`
+ `application/wasm`
+ `application/xhtml+xml`
+ `application/xml`
+ `application/x-font-opentype`
+ `application/x-font-truetype`
+ `application/x-font-ttf`
+ `application/x-httpd-cgi`
+ `application/x-javascript`
+ `application/x-mpegurl`
+ `application/x-opentype`
+ `application/x-otf`
+ `application/x-perl`
+ `application/x-ttf`
+ `font/eot`
+ `font/opentype`
+ `font/otf`
+ `font/ttf`
+ `image/svg+xml`
+ `text/css`
+ `text/csv`
+ `text/html`
+ `text/javascript`
+ `text/js`
+ `text/plain`
+ `text/richtext`
+ `text/tab-separated-values`
+ `text/xml`
+ `text/x-component`
+ `text/x-java-source`
+ `text/x-script`
+ `vnd.apple.mpegurl`

## `ETag` ヘッダーの変換
<a name="compressed-content-cloudfront-etag-header"></a>

オリジンからの非圧縮オブジェクトに有効な強い `ETag` HTTP ヘッダーが含まれていて、CloudFront でそのオブジェクトを圧縮する場合、CloudFront では強い `ETag` ヘッダー値を弱い `ETag` に変換し、ビューワーに弱い `ETag` 値を返します。ビューワーは、弱い `ETag` 値を格納し、それを使用して `If-None-Match` HTTP ヘッダーで条件付きリクエストを送信できます。これにより、ビューワー、CloudFront、およびオリジンは、オブジェクトの圧縮バージョンと非圧縮バージョンを意味的に同等なものとして扱い、不要なデータ転送を減らすことができます。

有効な強い `ETag` ヘッダー値は、二重引用符 (`"`) で開始および終了します。強い `ETag` 値を弱い値に変換するために、CloudFront は強い `W/` 値の先頭に文字 `ETag` を追加します。

オリジンからのオブジェクトに弱い `ETag` ヘッダー値 (文字 `W/` で始まる値) が含まれている場合、CloudFront はこの値を変更せず、オリジンから受け取ったままビューワーに返します。

オリジンからのオブジェクトに無効な `ETag` ヘッダー値が含まれている場合 (値が `"` または `W/` で始まらない)、CloudFront は `ETag` ヘッダーを削除し、`ETag` レスポンスヘッダーなしでオブジェクトをビューワーに返します。

詳細については、MDN ウェブドキュメントの以下のページを参照してください。
+ [ディレクティブ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag#Directives) (`ETag` HTTP ヘッダー)
+ [弱い検証](https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation) (HTTP 条件付きリクエスト)
+ [If-None-Match HTTP ヘッダー](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-None-Match)