ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

先日、PageSpeed Insightsというツールを知りました。

PageSpeed Insightsとは、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるGoogle Developersのツールです。

早速、僕のブログも試してみたところ、速度がさんざんな結果になりました。

photo by DAVID MELCHOR DIAZ

PageSpeed Insightsでのテスト結果

モバイルのテスト結果、43点。

パソコンのテスト結果、61点。

「これはいけませんぞ！」と思いましたが、とりあえず、いきなり全ての問題を一度に解決するのは不可能なので、まずはパソコンの方から修正していくことにしました。

パソコンの修正提案の概要

PageSpeed Insightsでは、サイトの表示スピードが高速になるように修正箇所を提案してくれます。

当ブログが今回受けたデータ修正提案は以下。

修正が必要なもの

CSS、JS、画像などのブラウザのキャッシュを活用する
CSSやJSファイルなどリソース圧縮を有効にする

とりあえず、一度に行うのは大変なので「1.ブラウザのキャッシュを活用する」から対策していくことにしました。2は、のちのちやっていきたいと思います。

修正を考慮したほうがいいもの

スクロールせずに見えるコンテンツのレンダリングブロックJavaScript/CSSを排除する
画像を最適化する
サーバーの応答時間を短縮する
CSSを縮小する
JavaScriptを縮小する
HTMLを縮小する

これらもいずれ対策したいと思います。

ブラウザキャッシュを活用する方法

まずはブラウザキャッシュを利用する方法です。どうやら一般的な方法は「.htaccess」を設定する必要があるようです。

.htaccessとは以下のようなことができる設定ファイルです。

ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル。
具体的には、CGIやSSIなどを実行するための宣言(命令)や、拡張子ごとにファイルタイプを指定するMIMEタイプの設定、ユーザ認証、IPアドレスやドメイン単位でのアクセス制限などを書き込むことができる。
.htaccessとは – 意味/解説/説明/定義： IT用語辞典

簡単に言うと、.htaccessというテキストファイルに書き込むだけで、サーバーを制御できてしまう強力な設定ファイルです。

一つ注意しないといけないのは、強力な設定ファイルなだけに、この設定を誤ると運営者が意図しない不具合を起こしてしまうので編集には細心の注意が必要です。とはいう僕も先日、設定をヘマして数時間サイト全体が表示されないという失敗をしています。

XSERVERで.htaccessの設定をヘマしブログ全体エラーで顔面蒼白になった経緯と解決方法

で、肝心のブラウザキャッシュを利用する方法なんですけど、設定自体は簡単です。

.htaccessファイルに下記を追加すればOKです。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

以下を参考にさせていただきました。

参考そろそろ本気で WordPress の高速化に取り組んでみる | WordPressに感謝だ！

僕の使用しているエックスサーバーだと.htaccessがある場所は、「/[あなたのドメイン]/public_html 」にあります。(詳しい人は好きな場所に新しく作ってもいいけど）

エックスサーバーでWordpressをドメイントップにインストールしている場合だと、.htaccessの編集後は次のようになります。

suPHP_ConfigPath /home/[サーバID]/[ドメイン]/xserver_php/
AddHandler x-httpd-php5.3 .php .phps #PHPのバージョン指定
# BEGIN WordPress
 
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
 
# END WordPress
#以上までがデフォルトの設定

#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

[サーバID]と[ドメイン]は、元から設定が書き込まれているので特にいじる必要ないと思います。(XSERVERの場合）

ブラウザキャッシュの設定では、キャッシュの有効期限を設定しています。

期限について詳しく言うと、CSSは頻繁に変更をすることがあるので1日に設定。

他の、画像ファイル（gif、jpeg、png）とJavaScriptファイル（js）は、ブラウザキャッシュの有効期限を1週間に設定してあります。