WordPress サイトを CloudFront で配信すると compress オプションを設定していても圧縮転送されない…

タイトルで言い切ってますが

CloudFront の「Compress Objects Automatically」ってオプションを有効にすると、対応しているブラウザに対しては圧縮転送をしてくれるはずなんですが、オリジンサーバが WordPress の場合、これが有効になりません。
css とか js なんかの静的ファイルはちゃんと圧縮してくれてるんですが

調べたところ、CloudFront で compress オプションが有効になるには、以下の条件があるようです。

  • The file must be of a type that CloudFront compresses.
  • The file size must be between 1,000 and 10,000,000 bytes.
  • The response must include a Content-Length header so CloudFront can determine whether the size of the file is in the range that CloudFront compresses. If the Content-Length header is missing, CloudFront won't compress the file.
  • The response must not include a Content-Encoding header.

Serving Compressed Files – Amazon CloudFront

これの「The response must include a Content-Length header so CloudFront can determine」が引っかかってるんですね

そんなわけで、Content-Length ヘッダを創出してやればちゃんと CloudFront で圧縮転送オプションが有効になります。
ob_start() と ob_end_flush() にお出まししてもらいましょうか。

このサイトは TwentyTwelve の子テーマとして作成されてるので、テーマの index.php を以下のようにしました。

普通のテーマなら、index.php の最初で <?php ob_start();> して、最後で <?php header('Content-Length: '.ob_get_length()); ob_end_flush(); ?> すればいいかな。
まぁ、子テーマにしてテーマディレクトリに上記のような index.php を置いておく方が後々のテーマのアップデート時とか楽なので、その方がいいでしょう。

ちゃんと gzip されるようになりましたね。

$ curl --head -H "Accept-Encoding: gzip" https://dogmap.jp/
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Content-Encoding: gzip
Date: Fri, 26 May 2017 07:50:25 GMT
Server: nginx
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Vary: Accept-Encoding
X-Cache-Status: HIT
X-Cached: Fri, 26 May 2017 07:50:09 GMT
X-Cache: Miss from cloudfront
Via: 1.1 2bb00e225b1b6c3d82913e7c9db706c5.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cFG5SBIQJjYYWwuMHX6RV-WOt77-pTKtqoI-UwLz9c2cU1O0I6nSaA==

現場からは以上です。

コメントを残す

メールアドレスが公開されることはありません。