【WordPress】.htaccessファイルにブラウザキャッシュを設定してWebサイトの表示速度を改善する

2020/07/23 2020/12/11

ブラウザキャッシュとは？

ブラウザはWebサイトが表示されるたびに、CSS、JavaScript、imgなどのファイルをサーバーに読み込みにいきます。サーバーを経由するたびに時間がかかってしまうので、それなりにWebサイトを表示するのに時間がかかってしまいます。

キャッシュを設定しておくことで、1度読み込んだファイルをブラウザ側で保持することができます。
サーバーを経由する必要がないので、すばやくWebサイトが表示されます。
この表示速度が改善されることで、SEOの検索順位にも一定の影響がありますし、ユーザーの離脱を回避することも考えられます。

Googleでもキャッシュを設定することを推奨している

Webサイトのパフォーマンス最適化を支援するために設計された「PageSpeed Insights」というツールがあります。このツールではWebサイトの表示速度を評価し、改善内容も提案してくれます。

キャッシュを設定していないWebサイトを分析してみました。
上記に書いてあるように、キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できるようです。
それではキャッシュの設定方法についてご紹介してきます。

WordPressの.htaccessファイルを編集する

WordPressがインストールされているディレクトリ直下から「.htaccess」ファイルをダウンロードします。テキストエディターでファイルを開いてみましょう。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

デフォルトの設定では、上記のように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>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpg "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"
ExpiresByType text/x-javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType text/js "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresByType application/x-font-woff "access plus 1 months"
</ifModule>

「ExpiresByType text/css “access plus 1 weeks”」という記述は、ファイルタイプと保持する期間を設定しています。「”access plus 1 weeks”」は、データ1週間保持するという意味です。
期間を任意で変更する場合は、「weeks」の箇所を次の単位で変更することができます。