PageSpeed Insightsで指摘された「ブラウザのキャッシュを活用する」への対策と解決方法

以前の記事「ブログの表示スピードを調べる方法」で「PageSpeed Insights」を紹介したのですが、このサイトでチェックしてみると幾つか修正しなさい！という項目がいました。

その内今回は「ブラウザのキャッシュを活用する」という項目に対策してみる事にしました。

1 ブラウザのキャッシュを活用するってどういう事？
2 ブラウザのキャッシュの設定方法は2通りある
- 2.1 プラグインを使ってブラウザキャッシュの設定をする方法
- 2.2 「.htaccess」の編集でブラウザキャッシュの設定をする方法
  - 2.2.1 「.htaccess」の編集

ブラウザのキャッシュを活用するってどういう事？

一度サイトへ訪問したら次回からは保存したキャッシュを利用する設定で、画像ファイルやCSSファイル、JavaScriptファイルの有効期限を設定します。

以前表示されたデータがキャッシュに残ってる場合はそちらを活用するようになるので、読み込むファイル数が減り表示速度が上がる仕組みです。

要は一度訪問したサイトの画像やCSSファイルなどを保存しておいて次回のアクセスではその保存しておいたデータを使う事で手間を省く感じですね。

ブラウザのキャッシュの設定方法は2通りある

PageSpeed Insightsで指摘された「ブラウザのキャッシュを活用する」には大まかに2通りのやり方があります。

プラグインを利用する
.htacessファイルに各ファイルの有効期限を書き込む

プラグインを利用する方法は非常に簡単なんですが、キャッシュ系のプラグインなのでサーバー環境や、使っているテーマ、他のプラグインとの相性もありますので、両方のやり方を紹介してみたいと思います。

プラグインを使ってブラウザキャッシュの設定をする方法

ブラウザのキャッシュ対策できるキャッシュ系のプラグインは複数あるのですが、使いやすいのは「WP Fastest Cache」です。

「WP Fastest Cache」をインストールして有効化し、設定で日本語に切り替え。

後はチェックできる項目全部チェックしておけばOKです。項目の中に「ブラウザのキャッシュ：ブラウザキャッシュを利用してロード時間を短縮する」という項目もあります。

設定してサイトの表示などに問題なければOKです。

後、これはブラウザのキャッシュとはあまり関係ないですが、プラグインで生成されるキャッシュの有効期限の設定もしておきます。

「WP Fastest Cache の設定」で「キャッシュの有効期限」タブに切り替えて「Add New Rule」をクリック。

If REQUEST_URI：全て
Then Once Every 3 Daysという設定にしてみました。

これで3日に1回キャッシュがクリアされます。

さらに別のプラグインとの併用で表示速度改善ができますのでこちらもどうぞ。

⇒WordPressキャッシュプラグイン【WP Fastest Cache】の設定方法。「Autoptimize」との併用で高速化

もし他のプラグインとの相性が悪いとが、キャッシュ系プラグインは別のものを使っているという場合には以下で紹介する直接.htaccessに記述する方法でやっていきます。

「.htaccess」の編集でブラウザキャッシュの設定をする方法

プラグインを使いたくない、、もしくはプラグインで不具合が発生する場合は直接.htaccessの編集で対応が可能です。

下記サイトが非常に参考になりました。

WordPressサイト用の.htaccess例 | dogmap.jp

上記サイトで紹介されてたコードのキャッシュの期間を一部7日(604800秒)に変更して使わせて頂きます。7日以上というのが「PageSpeed Insights」で指摘された対策だったため。

「.htaccess」の編集

今回はロリポップでの解説になりますが、基本的な部分は別のサーバーでも一緒です。

ロリポップユーザー専用ページに移動できたら「サーバーの管理・設定」から「ロリポップFTP」をクリック。

それで自分のWordPressのフォルダを開きます。

すると「.htaccess」というファイルがあるのでそれを開きます。

「.htaccess」に次の部分を追加します。記述する場所はよく分からなかったのですが、結局「.htaccess」の先頭に追加してみました。

AddType image/x-icon .ico
 
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
 
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>
 
FileETag none
 
<FilesMatch "^(wp-config.php|wp-mail.php|install.php|.ht)">
order allow,deny
deny from all
</FilesMatch>