WordPressで利用するファイルのExpiresヘッダを見直す

WordPress で運用するコンテンツを最適化するメモです。

GTmetrix を使って Page Speed と YSlow のパフォーマンス診断を行いましたので、今回から各指摘事項を潰していこうと思っています。

まずは影響が大きいと思われる下記項目から見直していきます。

• Page Speed → Leverage browser caching
• YSlow → Add Expires headers

スポンサーリンク

Expires ヘッダを最適化する

上記の指摘事項は何を指しているかというと、コンテンツを構成する各ファイル (css, js, 画像等) に設定される「Expires ヘッダ」を見直して、ブラウザキャッシュを有効的に使えって事のようです。

Expires ヘッダのざっくりした認識としてはこんな感じです。

Web コンテンツ全般に言える最適化事項なので WordPress に限った話ではないですが、経験上、この最適化は設定が簡単な割には効果が非常に大きいと感じています。

特に、画像を沢山掲載しているコンテンツなんかだと効果が大きいです。いくら画像を最適化しても文字に比べるとバイト数はデカいですから、クライアントがダウンロードを完了するまで比較的長くコネクションを占領されてしまいがち。

忙しいサーバだと特に効果を感じれるような気がします。

今回は、Apache で mod_expires モジュールが使えるのを前提に書いていますが、WordPress の htaccess にこんな感じに追加してみました。

<IfModule mod_expires.c>

  ExpiresActive On
  ExpiresByType text/css "access plus 3 weeks"
  ExpiresByType text/javascript "access plus 3 weeks"
  ExpiresByType application/javascript "access plus 3 weeks"
  ExpiresByType application/x-javascript "access plus 3 weeks"
  ExpiresByType image/gif "access plus 6 months"
  ExpiresByType image/jpeg "access plus 6 months"
  ExpiresByType image/png "access plus 6 months"
  ExpiresByType image/vnd.microsoft.icon "access plus 6 months"

  <FilesMatch "\.(css|js|gif|jpe?g|png|ico)$">
    Header append Cache-Control "private"
  </FilesMatch>

</IfModule>

書くファイルの有効期限を設定している書式は概ね下記のような感じです。

css, js ファイルは有効期限を 3 週間、各種画像ファイルは有効期限を半年にしてみました。

よくある注意点としては、上記設定を入れた後は css, js の変更に少し気を使う必要が出てきます。ファイル名 style.css でキャッシュされるとブラウザは有効期限までサーバに取りにいかないので変更が反映されない現象が起きます。

一応、解決策はあるのですがこれは次回に回すとして、早速この状態でパフォーマンス計測してみます。

work.log クローン環境の計測結果

before

after

こんな感じでスコアアップしました。Pingdom のスコアの伸びが半端ないです。

work.log の計測結果

つづいてこのブログ。

before

after

こっちはまだまだという感じですが前回よりは大分良いです。

こっちも Pingdom の伸びは良いですが Page Speed は全然駄目ですね。これはコンテンツ圧縮の絡みが大きいと思うのでこの辺りは優先的に見直す予定。

微々たる所ですが、アクセス解析とかの外部スクリプト等も含めての評価なので、その点はクローンと比べるとマイナス評価されちゃってます。外のサービスなので弄れないですしここはしょうがない。

ただ、それにしてもクローン環境とリクエスト数が違うような気がしますがとりあえず保留！

最後に、本件に関する情報が細かく書かれたページを見つけたので貼っておきます。まだ全部読めてないですがこれは必読かも。