読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress(Page Speed対応) - キャッシュ バリデータを指定する(プロキシーキャッシ(Proxy Cache)を活用する)


難易度

★★★大変

概要

公開プロキシーサーバーのキャッシュを利用すると、サイトを訪問したことのないユーザーにもキャッシュを利用することができます。プロキシーはキャッシュ機能を実装しているので、過去にサーバから受信したコンテンツを一定期間保持しておくことができます。そのため、ユーザがリクエストしたコンテンツをすでにプロキシーが保持していた場合は、本来のサーバまで情報を取りにいかず、自分自身にキャッシュされているデータを返却するので、ユーザはコンテンツを素早く取得することが可能になります。また、本来のサーバに発生していたアクセスをプロキシーが対応してくれるため、サーバに掛かる負荷の軽減にも繋がります。

設定方法は以下になります。

  1. Cache-control: publicヘッダーを設定する
  2. レスポンスヘッダーにVary: Accept-Encodingを指定する

1.Cache-control: publicヘッダーを設定する

Cache-control: publicヘッダーを設定することで、公開プロキシーサーバーにもキャッシュさせることができます。

.htaccessファイルに以下のように記述します。

[bash]<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$"> # 24weeks Header set Cache-Control "max-age=14515200, public" </FilesMatch> <FilesMatch ".(xml|txt)$"> # 2DAYS Header set Cache-Control "max-age=172800, public, must-revalidate" </FilesMatch>

下記を有効にするとwptouchのPC⇔スマートフォンの切り替えが正常に行えなくなる

<FilesMatch ".(html|htm|php)$"> # 2HOURS

Header set Cache-Control "max-age=7200, must-revalidate"

</FilesMatch>[/bash]

Cache-Controlについての説明は、「ブラウザのキャッシュを活用する」で詳細に説明しているので、こちらを参考にしてください。

2.レスポンスヘッダーにVary: Accept-Encodingを指定する

この指示はプロキシーに対して、圧縮されたファイル、未圧縮のファイルと2つのバージョンで保存することを意味しています。いくつかの公開プロキシーはContent-Encodingレスポンスヘッダーを検出しないバグを持っているため、gzip圧縮に対応していないブラウザに対しても、圧縮ファイルを送信してしまう恐れがあります。Vary: Accept-Encodingを指定することにより、圧縮したものと未圧縮のものと2つのバージョンをプロキシーにキャッシュすることができ、圧縮ファイルの誤送信を防げます。

.htaccessファイルに以下のように記述します。

[bash]<IfModule mod_deflate.c> Header append Vary Accept-Encoding env=!dont-vary </IfModule>[/bash]

圧縮を有効にする」で詳細に説明しているので、こちらを参考にしてください。

注意点

・静的リソースURLにクエリー文字列をつけない

多くのプロキシーで"?"のついたリソースは、たとえCache-control: publicを指定していてもキャッシュされません。静的リソースにはクエリー文字列を付けないようにし、フィンガープリントキーをファイル名に付けるなどの工夫で対応しましょう。

フィンガープリントの説明についてはこちら

・クッキー(Cookie)を設定したリソースには、プロキシのキャッシュは利用しない

Cache-control: publicでパブリックにリソースをキャッシュし複数のユーザーで共有する場合、リソースにセットされたクッキーも共有してしまいます。クッキーをセットしている場合はCache-control: privateに設定するか、クッキーが無くても取得できるコンテンツは、クッキーを利用しない専用ドメインを用意し、クッキーレスな環境からリソースを配信するようにしましょう。

・Vary

Varyヘッダはプロキシーサーバでのキャッシュを制御するために設定しますが、IEで問題があります。IEでは、Accept-EncodingとUser-Agent以外のヘッダを指定するとブラウザで一切のキャッシュが行われなくなるため、VaryヘッダからAccept-EncodingとUser-Agent以外のフィールドを全て除去してください。

確認方法

htmlやcss、jsなど各ファイルタイプによって、指定を分けているので、各ファイル毎に確認をします。Chromeでサイトを開き、右クリックして、要素を検証。Networkタブを開き、該当のファイルを開きます。

下部のResponse Headersの各項目にそれぞれ適切な値が入っているかを確認します。

f:id:t-namikata:20160130133130p:plain

・Cache-Control:max-age=14515200, public Cache-Controlにpublicが指定されているか

・Vary:Accept-Encoding,User-Agent Accept-Encodingが表示されているか

参考サイト

プロキシーキャッシュを活用する link http://t32k.github.com/speed/caching/LeverageProxyCaching.html

プロキシについて link http://www.cybersyndrome.net/pg.html