SCROLL
HOME BLOG WordPress 【プラグイン不要】.htaccessを編集してWordPressでブラウザキャッシュを設定しサイトを高速化する方法

【プラグイン不要】.htaccessを編集してWordPressでブラウザキャッシュを設定しサイトを高速化する方法

ウェブサイトのUX(ユーザー体験)を改善する上で、

「サイトコンテンツの表示速度」は重要な要因です。

素晴らしいコンテンツを提供していても、

  • Webページのローディング時間が長い
  • 画像や動画などがなかなか読み込まれない

といった問題があると、サイト全体の利便性が下がり、ユーザーの離脱に繋がってしまいます。

特に、読み込むデータ量が大きいWebページは、サーバとのやり取りが多くなり、表示速度が遅くなる傾向にあります。

そこで、ページ速度低下による読者の離脱を防ぐには、

「サイトの表示速度を定期的にメンテナンスし、読者にコンテンツを迅速に届けること」

が大事になってきます。

WordPressサイトの表示速度を上げる方法は、

  • 専用のWordPressプラグインを利用する
  • PHPを最新のバージョンにする
  • 余計なファイルを削除する
  • 画像を圧縮する

などが挙げられますが、オススメは「ブラウザキャッシュを設定すること」というやり方です。

サイト上のファイルや画像などを、ブラウザキャッシュとしてデバイスに一時的に保存させることで、次回アクセスした際に、ページの表示速度を上げることができます。

また、「.htaccess」というファイルを編集する方法であれば、難しい設定が必要ないので、初心者の方でも問題ありません。

そこで今回の記事では、「.htaccess」ファイルを編集して、WordPressサイトのブラウザキャッシュを有効にする方法をご紹介します。

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

冒頭でも軽く触れましたが、ブラウザキャッシュとは、

「ユーザーが閲覧したページ情報(キャッシュファイル)を、ブラウザが一時的に保存してくれる機能」

のことを指します。

ブラウザのキャッシュファイルには、

  • HTML/CSSファイル
  • JavaScriptファイル
  • 画像データ

などが含まれます。

上のイラストで解説していますが、あるWebページに初めてアクセスすると、画像やHTMLファイルといった情報(キャッシュ)がデバイスに一時的に保存されます。

そして、次に同じページを訪問したとき、ブラウザを通して保存されたキャッシュから情報を読み込むことで、ページの表示時間を短くすることが可能です。

ブラウザに保存できるキャッシュファイルの上限は、ブラウザごとに決められていて、それぞれのブラウザ設定から変更できます。

また、保存したキャッシュファイルの容量が設定した上限値を超えると、古いファイルから順に削除されていきます。

「.htaccess」経由でブラウザキャッシュを設定するメリット

「.htaccess」ファイル経由でブラウザキャッシュを設定することで、

  • プラグインをインストール必要がない
  • FTPソフト経由でいつでも設定を変更できる

といったメリットがあります。

『WP Fastest Cache』というWPプラグインを利用すれば、同様にWordPressサイトをページキャッシュで高速化できますが、

  • プラグインを導入する手間がかかる
  • プラグインを入れた結果、サイトが重くなる可能性がある
  • バージョンアップやバグが発生したときに、使えなくなることがある

などのデメリットがあります。その点、「.htaccess」ファイルを編集する方法は、サーバーに負荷もかからず、いつでも簡単に設定できるのでオススメです。

参考：「WP Fastest Cache」公式サイト

「.htaccess」ファイルを編集してサイトを高速化する方法

それでは、「.htaccess」ファイルを編集してブラウザキャッシュを設定する方法を解説していきます、

手順としては、

  1. FTPソフトを使ってWordPressのサーバー上の「.htaccess」ファイルをダウンロード
  2. 「.htaccess」ファイルの設定用のコードを追加する

の２ステップとなります。

FTPソフトを使ってWordPressのサーバー上の「.htaccess」ファイルをダウンロード

お好きなFTPソフトを使って、WordPressサイトのサーバーにアクセスし、「.htaccess」ファイルをパソコンにダウンロードしてください。

「.htaccess」ファイルをわざわざダウンロードするのが面倒な場合は、FTPソフトからファイルをテキストエディターで直接開いて編集していただいても大丈夫です。

※ 万一の場合に備えて、必ずファイルを複製してバックアップを取るようにしてください。

※ 以下の記事で、FTPソフト「Cyberduck」とテキストエディタ「VSCode」を使って、サーバー上のWordPressファイルを編集する方法をご紹介しているので、気になる方は、ご参考ださい。(Mac向け)

CyberduckとVSCodeでサーバー上のワードプレスのファイルを編集する方法【Mac編】

「.htaccess」ファイルに設定用のコードを追加する

ダウンロードが完了したら、VSCodeなどのテキストエディタを使って「.htaccess」ファイルを開き、以下のブラウザキャッシュ設定用コードを追記してください。

※ 万一の場合に備えて、必ずファイルをバックアップをしてから、「.htaccess」ファイルを編集するようにしてください。

<ifmodule mod_expires.c="">
ExpiresActive On
ExpiresByType text/html "access plus 3 days"
ExpiresByType text/css "access plus 3 days"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/jpg "access plus 2 weeks"
ExpiresByType image/jpeg "access plus 2 weeks"
ExpiresByType image/png "access plus 2 weeks"
ExpiresByType image/gif "access plus 2 weeks"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/svg+xml "access plus 2 weeks"
</ifmodule>

「.htaccess」ファイルの編集が完了したら、FTPソフト経由でサーバー上にアップロードします。

※ FTPソフトから直接テキストエディタで「.htaccess」ファイルを編集した方は、保存するだけで設定が適用されます。

また、上の設定コードの中の、

  • hours：時間
  • days：日
  • weeks：週
  • month：月
  • years：年

などのキャッシュファイルの保存期間の値は、ご自由に変更していただいて問題ありません。

保持期間を決めるときは、

  • 頻繁に変更するデータ(例：サイトデザイン)の保持期間は短くする
  • それ以外の変更頻度の低いデータ(例：テキストや画像)の保持期間は長くする

といった基準で設定するのがオススメです。

「変更頻度の高いデータ」の保持期間を長くしてしまうと、ブラウザに古いキャッシュが残ったままで変更が行われるので、変更点が反映されない可能性があります。

まとめ

この記事では、

  • WordPressでブラウザキャッシュを設定してサイトを高速化する方法

をご紹介しました。

今回ご紹介した方法では、FTPソフトとテキストエディタを使うのに慣れる必要がありますが、

  • バージョンアップやバグに左右されにくい
  • 好きなように設定できる
  • プラグインを入れる手間がかからない

など、メリットがたくさんあります。

ぜひこの方法を活用して、ウェブサイトの表示速度をアップさせてみてください。