WordPress設定

Hyper Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方

Hyper Cache ページ表示速度高速化キャッシュプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)のブログサイトのページ表示速度の高速化に役立つプラグインHyper Cacheを解説します。

この記事を見ることで得られるメリット
  • Hyper Cacheの使い方と詳細な設定方法がわかります

Hyper Cacheで実現できること

ブログサイトのページデータを、利用者側からの要求アクセスがある度にWebサーバから生成して出力していると無駄が多くサーバーのリソースを消費することになるので表示速度が遅くなります。

キャッシュ用プラグインであるHyper Cacheはページの生成データをキャッシュ化して予め蓄えて置き、同じページへの表示要求があった場合はキャッシュデータから出力することで、ページ表示速度の高速化に貢献してくれます。

  • ページ表示速度向上の設定が簡単にできます
  • 初期設定のままで性能を発揮します

Hyper Cacheのインストール方法

Hyper CacheプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Hyper Cache”と入力すると下に検索結果が表示されます
  4. ”Hyper Cache”の「今すぐインストール」ボタンをクリックします
“Hyper Cache”のインストール完了画面“Hyper Cache”のインストール完了画面

↑Hyper Cacheのインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Hyper Cache"を有効化すると表示される画面“Hyper Cache”を有効化すると表示される画面

これでHyper Cacheのインストールと有効化は完了です。

Hyper Cacheの設定と使い方

Hyper Cacheの設定画面はダッシュボード(管理画面)の「設定」内にある「Hyper Cache」です。

WordPressのダッシュボード(管理画面)WordPressのダッシュボード(管理画面)

↑Hyper Cacheの設定画面はWoredPressのダッシュボード(管理者画面)の「設定」内の「Hyper Cache」をクリックします。

Hyper Cacheの設定

Hyper Cacheの設定画面は5つの項目タブがあります。

  • General (全般的)
  • Bypasses (バイパス)
  • Mobile (モバイル)
  • Advanced (高度)
  • CDN

すべて初期設定のままでOKです。
とくに変更する必要な個所はありませんが、設定項目の全内容を記載します。

全般設定(General)

Hyper Cacheの全般設定(General)画面Hyper Cacheの全般設定(General)画面

キャッシュをクリアする時間を指定できますが。

とくに設定を変更する箇所はありません。

バイパス(Bypasses)

Hyper Cacheのバイパス(Bypasses)画面Hyper Cacheのバイパス(Bypasses)画面

キャッシュを生成したくないページや項目を指定することができます。

基本的にはどの項目も有効にする必要はありません。

モバイル(Mobile)

Hyper Cacheのモバイル(Mobile)画面Hyper Cacheのモバイル(Mobile)画面

利用しているWordPressのテーマやプラグインよっては変更したほうが良い場合もありますが、変更する必要はありません。

高度(Advanced)

Hyper Cacheの高度(Advanced)画面Hyper Cacheの高度(Advanced)画面

直接圧縮を有効にしたりできます。
有効にしたり変更する必要はありません。

CDN

Hyper CacheのCDN画面Hyper CacheのCDN画面

CDN(外部キャッシュサービス)を利用している場合は有効にすることができます。

Hyper Cacheのキャッシュを手動で削除する方法

Hyper Cacheのキャッシュを手動でクリアするのは簡単です。

Hyper Cacheの設定画面上部に表示されるキャッシュクリアボタンHyper Cacheの設定画面上部に表示されるキャッシュクリアボタン

Hyper Cacheの設定画面に表示されている Clean the whole cache ボタンが表示されるので、それを押すだけでキャッシュを削除できます。

キャッシュをクリアすると設定画面の上部に The cache folder has been cleaned.(キャッシュフォルダがクリーンアップされました。)と表示されます

エラーが表示された場合の対処方法

Hyper Cacheを有効化して使おうとすると発生する可能性があるエラーの解決方法を解説します。

define(“WP_CACHE”, true);の記述が無い場合

Hyper Cacheの設定画面に下記のエラーが表示された場合の対処方法を解説します。

Hyper Cacheの設定画面に表示されるエラーメッセージHyper Cacheの設定画面に表示されるエラーメッセージ

You must add to the file wp-config.php (after the <?php first line) the line of code:define(“WP_CACHE”, true);

”ファイルwp-config.php(<?phpの最初の行の後)にcode:define(“WP_CACHE”, true);の行を追加する必要があります。”と書かれています。

wp-config.phpファイルにdefine(“WP_CACHE”, true);を記述する

解説方法は /home/ドメイン名/public_html のディレクトリにある wp-config.php ファイルを編集してdefine(“WP_CACHE”, true);を記述するだけです。

wp-config.phpファイルの保存場所wp-config.phpファイルの保存場所
wp-config.php ファイルの編集画面wp-config.php ファイルの編集画面

wp-config.php ファイルの先頭にある<?phpの直下にdefine(“WP_CACHE”, true);を入力します。最後に更新ボタンを押して保存します。

wp-config.php ファイルの編集はWordPressのテーマーファイルエディターを利用する方法と、レンタルサーバーのファイル管理機能を利用する方法の2つありますが、どちらの方法でも大丈夫です。

他のキャッシュ用プラグインと速度を比較

他のキャッシュ用プラグインとHyper Cacheプラグインの速度の違いを表示速度検証サイト「PageSpeed Insights」を使って比較してみました。

結果はHyper Cacheがモバイルのパフォーマンススコアが最も高い結果になりました。

スマホ環境の表示速度の結果

キャッシュ用プラグインをそれぞれ「PageSpeed Insights」で各50回計測した結果は下記の通りです。

どちらも同じ条件、同じ投稿ページで検証しています。

  • WP Super Cache:平均値:84.06、最小値:75、最大値:87
  • Cache Enabler:平均値:83.57、最小値:64、最大値:89
  • Comet Cache:平均値:79.8657、最小値:54、最大値:88
  • Hyper Cache:平均値:84.63、最小値:53、最大値:90

モバイル速度計測で利用した環境は下記のとおりです。

  • レンタルサーバーはエックスサーバーのスタンダードプラン(共有サーバ)
  • WebサーバーはApache
  • PHP7.4.25
  • WordPressテーマは「JIN」

※使用しているレンタルサーバーやWordPressテーマ、プラグインなどの環境の違いによって結果は異なります。

まとめ

Hyper Cacheはインストールして有効化するだけで設定を変更しなくても初期設定のままで効果を発揮するので、とても簡単に利用できることが最大のメリットです。

しかも有名で人気のあるキャッシュ用プラグイン「WP Super Cache」よりもブログサイトの表示スピードが向上しました。

いっぽう、Hyper Cacheのデメリットを強いて挙げるとすると、使っているWordPressテーマによってはwp-config.phpファイルに設定を追記する必要があることです。

WordPressのテーマファイルであるwp-config.phpを編集するのは初心者にとっては敷居が高いかもしれませんが、ファイルの場所さえ分れば簡単です。当記事を参考にすれば誰でも設定できます。

なお、当記事のキャシュ用プラグインの測定にはコード最適化プラグインの「Autoptimize」を利用しています。

「Autoptimize」の詳細な情報と設定方法はこちらの記事を参考にしてください↓
Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方