アプリ・インターネット・エンタメの情報サイト

nakamahalog

WordPress ブログ運営

WP Fastest Cacheの設定方法と使い方 - WordPress キャッシュプラグイン

更新日:

PageSpeed Insightsを使ってWebサイト(ページ)の表示速度を測ってみると、パソコン版のスコアが59、モバイル版のスコアが64、とあまり良くない数字。サイトの表示速度が遅いと、訪問した方の離脱率が上がってしまうので早速いくつか対策をすることにしました。

PageSpeed Insightsの提案の中ででも効果の高そうな、キャッシュの活用画像の最適化はプラグインで解決できそうなので、キャッシュに関しては『WP Fastest Cache』、画像の最適化については『EWWW Image Optimizer』のプラグインを使用します。

今回の記事ではキャッシュの活用に関するプラグイン『WP Fastest Cache』の設定方法と使い方について、次回の記事では画像の最適化の『EWWW Image Optimizer』を紹介します

1. 設定前後のサイトの表示速度の比較

PageSpeed Insights を使って WP Fastest Cache の設定前後の表示速度数値を比較してみました。

表示速度を計測するWebサイトはこちら PageSpeed Insights- Google Developers

モバイル

設定前(64 / 100)

 

設定後(84 / 100)

パソコン

設定前(59 / 100)

設定後(71 / 100)

表示速度を比較した結果

結果はモバイルは 20ポイント上昇(64→84)パソコンは 12ポイント上昇(59→71)。 パソコンもモバイルも大幅に改善され、「WP Fastest Cache」による表示速度の改善効果は明らかでした

このサイトは「WP Fastest Cache」と相性が良かったので速度が上がったけど、すべてのサイトで必ず良い結果が出るわけではありません。ただ、結果を見る限り導入してなければ試してみる価値はありそうですね!

2. WP Fastest Cacheの特徴

「WP Fastest Cache」はキャッシュの設定をして、Webサイトの表示速度を改善するプラグインです。

設定の前に「WP Fastest Cache」の特徴を簡単に説明すると「設定と使い方が簡単」これに尽きると思います!

「WP Faster Cache」の以前には「W3 Total Cache」を使おうとしていたのですが、自分のサイトと相性が悪いのかエラーがでてしまいスムーズに起動しませんでした。「W3 Total Cache」は多様な機能が使えるのは魅力的ですが、今のところはシンプルに使える「WP Fastest Cache」を選びました。 他にもキャッシュプラグインは様々な種類があるので、ご自身のサイトの特徴に合わせて選んでみてください

3. 設定をする

設定のおおまかな手順は以下のようになります

WP Fastest Cacheの設定の手順

  1. 「WP Fastest Cache」をインストールする
  2. 言語を日本語にする
  3. 基本的な項目を設定する
  4. キャッシュの有効期限を決める

多機能なプレミアム版もありますが、今回は無料版を使います。

インストールをする

プラグインを追加から[WP Fastest Cache]を検索して[今すぐインストール]を選択。その後、有効化してください

こちらのサイトからファイルをダウンロードしてアップロードすることもできます

WP Fastest Cache

設定できる項目

インストールが完了したら、「WP Fastest Cache」の設定項目を確認してみます

設定項目

  • 設定
  • キャッシュの削除
  • キャッシュの有効期限
  • 画像の最適化
  • プレミアム
  • 除外する
  • CDN
  • DB

[画像の最適化]や[DB]はプレミア版のみの機能で、その他も一部はプレミアム版のみの機能になります。

基本設定

それでは、項目の一番左側の[設定]から見ていきます。基本的にチェックを入れられるところは入れてしまいましょう。個人的にHTMLファイルは書き換えたくない箇所があるので[HTMLの圧縮] はチェックを外しています。

一番下にある項目の[言語(Language)]を日本語に変更すると分かりやすくなるので、先に変更しましょう

ここからは、無料版で使える各機能を簡単に解説します

[設定]の項目
キャッシュ[有効にする]

キャッシュの有効化なので、使用するにはチェックを入れましょう

Preload[Create the cache of all the site automatically]

Preload(プレロード)とは「先読み」という意味で、ここでは訪問者がサイトを訪れる前に予めキャッシュを作成しておくことです。選択すると、[Homepage][Posts][Categories][Pages]と4つの項目を選択でき、チェックした項目は1分ごとにキャッシュが作成されます。

ログインユーザー[ログインユーザーに対してキャッシュを表示しない]

ログインユーザーは作成者のことです。ページの修正をしてWebページをチェクする際に、キャッシュが残っていたら修正後のページが表示されません。

モバイル[モバイルユーザーに対してキャッシュを表示しない]

新しい投稿を公開した際にキャッシュを削除します。キャッシュが残っていれば、最新の記事がうまく表示されない可能性があります

Update Post[Clear cache files when a post or page is updated]

投稿を更新した際にキャッシュを削除します。キャッシュが残っていれば、最新の記事がうまく表示されない可能性があります

HTML の圧縮[HTML を圧縮してページサイズを小さくする]

HTMLファイルの余分な部分を削除して圧縮してくれます。

CSS の圧縮[CSS ファイルを圧縮する]

CSSファイルの余分な部分を削除して圧縮してくれます。

CSS の結合[CSS ファイルを結合してHTTPリクエスト数を減らす]

Webサーバーにサイトのデータを下さいと要求する回数を減らします。リクエスト数が少ないと時間が短縮できるのでサイトの表示速度の改善につながります。

JS の結合[JavaScript ファイルを結合してHTTPリクエスト数を減らす (header)]

Webサーバーにサイトのデータを下さいと要求する回数を減らします。リクエスト数が少ないと時間が短縮できるのでサイトの表示速度の改善につながります

Gzip 圧縮[サーバーから送信されるファイルをGzip圧縮する]

ファイルを圧縮し、サーバーとサイト間を小さなデータでやり取りして表示速度をあげることができる こちらのSyncerさんのサイトに詳しく書かれているので、知りたい方は参考にしてください。

gzip圧縮でCSSやJSなどの転送量を減らす方法|Syncer

ブラウザキャッシュ[ブラウザキャッシュを利用してロード時間を短縮する]

ブラウザにキャッシュを保存し、サーバーからデータを読み込む過程省略できます。これによってサイトの表示速度を短縮できます

チェックをしたら画面下の [変更を保存] を選択してください

キャッシュの有効期限

キャッシュの有効期限の設定です。

普通であれば [全て] を選択して有効期限の時間を設定してください

画像では1日に1回を選択していますが、かなり細かい時間指定ができます。自身のサイトに合わせて時間を指定してください

その他の設定

無料版でも[除外する]や[CDN]の設定はできます。ただ、基本的な機能は上記の手順で既に使えるので、ここでの説明は省きます

CDNについて知りたい方は、こちらのサイトが詳しく説明をしているので参照してください

第1回 CDN の 仕組み (CDNはどんな技術で何が出来るのか)|キャッシュ屋blog

4. キャッシュを削除する

キャッシュの削除

ここではキャッシュを手動で削除でき、圧縮されたCSS/JS ファイルも削除するか選択できます

管理画面の上部のWPFCのヒョウのアイコンにも同じコマンドがあるので、こちらのほうが便利かもしれません

5. まとめ

以上のキャッシュの活用で当サイトの表示速度は改善できました。 表示速度の改善はユーザビリティの向上につながりSEOにも良い影響を及ぼします。表示速度の改善に関しては他の対策もしていくので、その都度良い方法があれば紹介していきます

-WordPress, ブログ運営
-

Copyright© nakamahalog , 2019 All Rights Reserved.