サイトの表示速度の改善!WP Super Cacheの設定手順を解説

※当サイトにはプロモーションが含まれています。

久し振りに「PageSpeed Insights」を使用して、このサイトのスコアを確認してみました。

改善前のPageSpeed Insightsのパフォーマンス

にゃのらいとにゃのらいと

49点は、点数が低すぎるにゃ!

サイトを作り始めた当初は、モバイルのパフォーマンスで70でしたが、Google Adsenceやバナー画像、追加したプラグインなどの影響もあって、だいぶスコアが落ちていました。

最近は、CSSやJavaScriptなどの変更する機会もなくなってきたので、キャッシュ系のプラグインを導入してみることにしました。

キャッシュとは?

ウェブページのデータを一時的に保存する仕組みで、次回同じページを訪れた際に素早く表示できるようにする技術です。
特に画像やCSS、JavaScriptファイルなど、変更の少ない要素をキャッシュすることで、ページの読み込み速度が大幅に改善されます。

今回導入したのは、ワードプレス(WordPress)のプラグイン「WP Super Cache」です。

備忘録も兼ねて、「WP Super Cache」の設定や、どれぐらいパフォーマンスが改善したのかなどをまとめてみました。

WP Super Cacheの設定手順

プラグイン「WP Super Cache」の設定手順です。

なお、プラグインのバージョンは、1.11.0を使用しています(2023年11月8日リリースの為、少し古いです)

①「WP Super Cache」のインストール

プラグインの新規追加画面で、「WP Super Cache」と検索してインストールします。

「WP Super Cache」のインストール

ダウンロードしたら、「有効化」して設定画面を表示します。

②簡単(タブ)の設定

簡単」のタブを選択します(デフォルトで設定されていると思いますが・・・)。

キャッシング利用 (推奨)を選択して「ステータスを更新」ボタンで更新します。

「WP Super Cache」の簡単(タブ)の設定

③高度な設定(その他)

高度な設定」タブに移動します。

「キャッシング」と「キャッシュ配信方法」は、初期設定のままでOK。

その他」の設定で、

  • ログイン中のユーザーに対してはキャッシュを無効化する。 (推奨)
  • GET パラメーター (URL 末尾の ?x=y など) のページをキャッシュしない。
  • キャッシュリビルド。新しいファイルの生成中にこのサイトの登録ユーザー以外のユーザーにキャッシュファイルを供給する。 (推奨)

にチェックをします。

「WP Super Cache」の高度な設定のその他

なお、「ページを圧縮し、訪問者により速くページを供給する。 (推奨)」は、ファイルを圧縮するとトラブルが起きやすいので、自分はチェックを入れていません。

また、「304 ブラウザーキャッシング」は、変更の少ない静的コンテンツには有効ですが、自分は変更することもあるかと思い、チェックを入れていません。

チェックを入れたら、「有効時間とガーベージコレクション」の上部にある「ステータスを更新」ボタンで更新をして下さい。

④高度な設定(高度な設定)

高度な設定」では、

  • 動的キャッシングを有効化

のみにチェックを入れました。

あと、頻繁にコメントが投稿されることがある人は、「コメントが投稿されたときに該当のページだけリフレッシュする」にチェックを入れるのもいいと思います。

「WP Super Cache」の高度な設定の高度な設定

なお、「モバイルデバイスサポート」は、モバイルデバイスに特化したテーマやプラグインがある場合は有効ですが、レスポンシブデザインに完全対応している場合は、有効にする必要はありません。

その為、SWELLやCocoon、賢威などのテーマは不要かと思います。

※モバイル用に特化した構成になっているかどうかは、各テーマのサポートにお問い合わせください。

⑤高度な設定(有効時間とガーベージコレクション)

有効時間とガーベージコレクション」では、キャッシュのタイムアウトを設定します。

なお、ガーベージコレクションとは、古いキャッシュファイルを削除する機能のことです。

  • キャッシュのタイムアウト: 86400秒(24時間)と入力
  • スケジューラー: タイマーの3600秒(1時間)と入力

設定をしたら、「有効時間を変更」ボタンを押して更新します。

「WP Super Cache」の高度な設定の有効時間とガーベージコレクション

※先読み(プリロード)をONにした場合は、ここでの設定は無効になります。

⑥受け付けるファイル名と除外するURI

キャッシュすることを除外したいページにチェックをします。

自分は、「固定ページ」と「投稿ページ」のみ、キャッシュをすれば充分なので、それ以外のものにチェックを入れました。

ご自身の状況にあわせて、チェックをして「設定を保存」ボタンで更新します。

「WP Super Cache」の高度な設定の受け付けるファイル名と除外するURI

⑦除外するURL文字列

「Contact Form 7」などで作成した「お問い合わせフォーム」をキャッシュするメリットがないので、そのページは除外します。

例えば、スラッグ名が「contact」であれば、

/contact/

を除外する文字列として保存します。

「WP Super Cache」の高度な設定の除外するURL文字列

※半角英数字です。

⑧コンテンツ

「コンテンツ」では、キャッシュされたデータの確認ができます。

また、このページで「キャッシュを削除」することが可能です。

修正データが反映されない時は、キャッシュを削除してみてください。

「WP Super Cache」のコンテンツ

なお、「WP-Cache」は、動的な要素が含まれるページでも利用可能なキャッシュで、「WP-Super-Cache」は、静的HTMLを生成したキャッシュです。

⑨先読み

先読み(プリロード)は、キャッシュを事前に準備できる機能です。

ただ、この機能を有効にすると、ガーベジコレクション(古いキャッシュファイルを削除する機能)の設定が無効化されてしまうので、自分はOFFにしています。

以上で、主要な設定は完了です。

補足:注意点

キャッシュを有効にすると、ワードプレス関数のwp_is_mobile()による条件分岐が動作しなくなります。

また、賢威の人気記事ランキングの集計表示もおかしくなります。

なお、賢威の人気記事ランキングに関しては、カスタマイズ方法を記事にしたので、ご参照ください。

このプラグインを利用したら、色々とサイトの見た目をチェックしておきましょう。

にゃのらいとにゃのらいと

「PageSpeed Insights」の測定結果はどうなったにゃ?

改善後のPageSpeed Insightsのパフォーマンス

波はあるものの、ひとまず、モバイルのパフォーマンスで、68点まで戻りました(19点の改善)。

一番の原因は、Google Adcenseの広告の影響なので、しばらくはこれで様子を見ようと思います。

ページ速度が測定できる「PageSpeed Insights」はこちら