WordPress

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

WordPress

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

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

ブラウザキャッシュ

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

ブラウザキャッシュ

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

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

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

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

PageSpeed Insights

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

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

.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」の箇所を次の単位で変更することができます。

  • 秒 = 「seconds」
  • 分 = 「minutes」
  • 時 = 「hours」
  • 日 = 「days」
  • 週 = 「weeks」
  • 月 = 「months」
  • 年 = 「years」

Googleが推奨する期間は、少なくとも1週間以上なので、更新頻度が高いファイルは期間を短くして、更新頻度が低いファイルは長めに設定しておいてもよいでしょう。

.htaccessファイルの編集

コードの追記が終わったら、編集した「.htaccess」ファイルをアップロードしてください。

ブラウザキャッシュが設定されているのか確認する

ブラウザキャッシュの確認

Chromeでの確認方法をご紹介します。
右上のメニューから「その他のツール > デベロッパーツール」を選択します。

ブラウザキャッシュの確認

デベロッパーツールが開いたら、メニューから「Network」を選択して、ページを再読み込みします。

ブラウザキャッシュの確認

読み込んでいるファイルが一覧で表示されるようになります。

ブラウザキャッシュの確認

それでは、CSSファイルにブラウザキャッシュが設定されているのか確認してみましょう。

  1. 上部タブから「CSS」を選択します。
  2. Nameから確認するファイルを選択します。
  3. Headersを選択します。
  4. Response Headersを選択します。
  5. cache-control: max-age=604800 ← これがキャッシュの有効期限です。

「604800」というのは秒数です。日数に変換すると「7日」なので、このCSSファイルのキャッシュの有効期限は「7日」ということになります。

以上がブラウザキャッシュの設定方法になります。
実際に表示速度が改善されたのかを確認するには、Googleが提供している「PageSpeed Insights」で確認をお願い致します。

あなたにおすすめの記事