ポイント
WordPress の .htaccess 先頭に次を追加して画像や CSS や Javascript など全てのキャッシュを 1 ヶ月間有効にします。
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" </IfModule>
では実際に設定していきます♪
Apache 側で mod_expires を有効にします!
mod_expires モジュールが無効になっていますとキャッシュの機能が働かず、全く意味がありません。Apache 設定ファイルを編集します。
vim /etc/httpd/conf/httpd.conf
行頭の「#」をはずして mod_expires を無効にしているコメントを外すだけですわ。次のようになります。
LoadModule expires_module modules/mod_expires.so
そして、Apache を再起動して完了ですの♪
/etc/init.d/httpd restart
mod_expires の設定については以前次の Apache モジュールを無効にしてメモリ節約を試みた投稿でオフにしていたのでした。そのときからいつかオンにすると決めておりまして、それが今!なのでした!
WordPress の .htaccess を編集してキャッシュされるようにします!
ExpiresDefault ディレクティブによる設定とし、画像や CSS、javascript に関係なくすべてを1ヶ月間キャッシュするようにしました。
ただし、投稿本文の HTML はキャッシュされないはずです。と言いますのも、動的に生成されたコンテンツには Expires ヘッダが追加されず、結果としてキャッシュされないためです。
修正時刻に基づいた設定を使用している場合、Expires ヘッダは ディスクのファイル以外のコンテンツには追加されないことに注意 してください。そのようなコンテンツには修正時刻は存在しないからです。
結果として、修正後の .htaccess ファイルは次のようにいたしました。
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" </IfModule> <FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php)"> Order Allow,Deny Deny from all </FilesMatch> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress
動いているか、確認!
Chrome のデベロッパーツールで確認いたしました。
- Google Chrome を起動
- わたくしたちのサイトにアクセス
- ページの適当な場所で右クリック「要素の検証」(command + option + i)
- メニュー Network を選択
- ページをリロード
- CSS や Javascript、HTML を選択
- Status Code と、Response Headers を確認
そして、次のようになっていればバッチリ!キャッシュされていますの!
- Status Code が「304 Not Modified」
- Response Headers が次のようになっている。
- Cache-Control が 0 ではない。1ヶ月と設定したので max-age=2592000 (= 60秒 × 60分 × 24時間 × 30日 = 約 1 ヶ月の秒数)となっている。
- Expires が未来の日付となっている。たとえば Sat, 18 Jan 2014 11:49:13 GMT 。なお、キャッシュされていない場合は過去の日付が設定され、たとえば Wed, 11 Jan 1984 05:00:00 GMT となる。
実際に例を示すますの。まずは、キャッシュが効いている例ですわ。上の3つのポイントが満たされております♪
続いて、キャッシュが効いていない例ですの!これは、投稿本文の HTML 部分ですわね。前述した通り、PHP で動的に生成されており、ファイルではないためキャッシュされませんの!
逆に考えますと、キャッシュされませんので投稿本文は即座に修正し、反映することができますわね♪
おわりに
今回の投稿、長い時間がかかりましたの!行っていることは簡単なのですけれども、ほら、わたくしったら頭の回転が緩やかでしょう?
ある程度きちんと理解して、自信を持って自分の施したことをお話できるようになるまで多くの時間が必要でしたの><。
最後に、ページの紹介ですわ♪大変勉強になったページですの!今後さらに mod_expires を修正するときはぜひ座右に置いてくださいまし!
- mod_expires – Apache HTTP サーバ
- 事例に学ぶWebシステム開発のワンポイント(12):ブラウザキャッシュでパフォーマンス向上―負荷分散装置の落とし穴に注意- – @IT
- Multipurpose Internet Mail Extensions – Wikipedia
また、次のページも実践例や具体例、理解の補助としてとても参考になりました♪ありがとう存じます♪
- Expiresヘッダを追加しよう! | dogmap.jp
- WordPressサイト用の.htaccess例 | dogmap.jp
- Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう! (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
- ブラウザ上でcssやjavascriptのキャッシュを使わせない方法 » WisdomTrees
- ぼくがかんがえたさいきょうのWordPressテーマ開発のはじめかた | 高橋文樹.com
- 「~.css?数字」というファイル名のご解説を! | Webデザイン・CSSのQ&A【OKWave】
以上です。