第14回 【WordPress】 プラグイン WP Fastest Cache

WordPress GCP

【PR】
Google Workspace(旧 G Suite)アカウントを作成するならこちら【10%割引クーポン】【プロモーションコード】を自動返信メールにより取得できます。初年度100人まで1つのコードで利用可能です。

1. 第14回 【WordPress】 プラグイン WP Fastest Cache

環境:Debian 9 php 7.0 Apache 2.4.25 MySQL 5.7 Cocoon

目的:「Webサーバー側」と「ユーザー端末側」のキャッシュをコントロール

キャッシュには2種類あります。

  • 「Webサーバー側」キャッシュ
  • 「ユーザー端末側」キャッシュ

「Webサーバー側」キャッシュ

「WordPress」を運用している側の「Webサーバー側」キャッシュです。

Webサーバー側にキャッシュが保存されます。

私の解釈だと、「居酒屋入って、2秒で出てくるアレ、お通し。」お店入ってすぐに表示されるように予め、「Webサーバー側」保存されています。でも居酒屋と一緒で、「その日のお客さんの人数の予想通りの数が丁度いいわけです。

お客さんの人数以上のお通しを用意しておくと過剰在庫で廃棄したりして、お店側に負担がかかる。また、お通しは通常メニューを作る際に余った食材であっても、物凄く美味いものが出てきたりします。しかも速攻で。

だから、「Webサーバー側」に負担を大きくかけずに、「ユーザー側」にもメリットがある、需要と供給のバランス調整が重要ということだと思います。

「ユーザー端末側」のキャッシュ

パソコンやモバイルでWebサイトを見ると、自分の端末にキャッシュとしてデータが保存され、2回目にアクセスした時に早く表示されます。また、データ通信量にも負荷がかからずありがたいです。

ですが、このページを見る人の多くが「WordPress」を運営している側だと思います。「さっき、WordPressで編集したのに、モバイルで確認すると変更されていない。」これが、「ユーザー端末側」のキャッシュ」です。

自分で更新確認したい時は「キャッシュを削除」して確認したほうが良いです。

テーマ側で用意されている重複機能

私が利用させてもらっている「Cocoon」は重複機能が多くあります。その点についてはテーマ側で設定しています。自分で利用しているテーマと照らし合わせて設定することが一番良いと思います。

手順の流れ
  • WordPress
    WP Fastest Cache

  • WordPress
    設定タブ

  • WordPress
    キャッシュの削除タブ

1.1 WP Fastest Cache

「プラグイン新規追加画面」「WP Fastest Cache」で検索します。

「今すぐインストール」をクリックして次へ進みます。

1.2 有効化

「有効化」をクリックして、次へ進みます。

1.3 設定画面へ遷移

「WordPress管理画面ダッシュボード」「WP Fastest Cache」の順番でクリックして、次へ進みます。

1.4 設定タブ

特にネット上で話題になっているのは、

「モバイル:モバイルユーザーにデスクトップ版のキャッシュを表示しない」

ここに✔を入れるかどうか。

まずは「English」を「日本語」に変更して「Submit」をクリックして日本語で設定できるようにします。

私は✔を入れない

  1. ログインユーザーに対してキャッシュを表示しない
  2. モバイルユーザーにデスクトップ版のキャッシュを表示しない

1:
ログインユーザーに対しては自分でログインして編集しているわけなので、キャッシュを表示しないようにしています。

2:
日本語の解釈によって違いが出てくる表現だと思います。
ですから「デスクトップ版の」という言葉をはずして、

「モバイルユーザーにキャッシュを表示しない」という質問に変えて解釈してみます。こうすると、モバイルユーザーにキャッシュを表示させたいわけだから、✔を入れない。

でも、「デスクトップ版の」というのは?というのが多くの人の疑問点だと思います。だからこそ、ネット上で話題になる部分だし、人によって解釈が異なるのかと。

改めて考えると、私が利用させてもらっている「Cocoon」というテーマはレスポンシブデザインです。パソコンでもモバイルでも同一のコードです。それなら「デスクトップ版」というものが存在しないので、

「モバイルユーザーにキャッシュを表示しない」という質問に変えて解釈したのと同様に✔を入れません。

もし仮に✔を入れる時があるとしたら

  • 「デスクトップ版」(パソコン版)
  • 「モバイル版」

それぞれのコードが異なっていて、レスポンシブデザインにはなっていない場合に限って、「モバイルユーザーにデスクトップ版のキャッシュを表示しない」に✔を入れることになると思います。

1.5 赤枠

  • キャッシュ:有効化に✔して、次へ進みます。

1.6 先読み

  • 先読み:✔を入れると「先読み」ダイアログが出てきます。
  • デフォルトが下記画面ですが、変更する必要ないと思います。「OK」をクリックして、次へ進みます。

1.7 ログインユーザー、新規投稿

  • ログインユーザーに✔を入れます。
  • 新規投稿に✔を入れると「新規投稿」ダイアログが出てきます。

    「Clear All Cache」のまま「OK」で良いと思います。

新規で記事を投稿した時には「Webサーバー側内部」を一度スッキリさせて、最新の情報を配信できる環境にしたほうが良いと、私は解釈しています。

居酒屋だと、営業時間前にきれいにテーブルを掃除するという感じですかね。

1.8 Update Post

  • Update Postに✔を入れると「Update Post」ダイアログが出てきます。

    「Clear All Cache」ではなく「下のラジオボタン」を私は選択しています。

新規投稿ではなく「ちょっとした編集」や「追記」などした際に、全部キャッシュを削除する必要はないと思うからです。

居酒屋だと、お客さんメニューを提供する時に、テーブルを一部拭くけど隅々まで掃除する必要ないという感じですかね。

1.9 Disable Emoji.js

  • emoji inline css
  • wp-emoji-release.min.js

この2つ削除するかどうかです。私は✔を入れ削除しています。

最後に変更を保存して、次へ進みます。

1.10 キャッシュの削除タブ

注意点

テーマ「Cocoon」を利用しているがために、キャッシュの削除については特筆すべき注意点があります。

下記画面の「キャッシュ削除」では削除できない部分があります。

下記画面「キャッシュの削除タブ」青い2つのボタン

  • キャッシュの削除:
    「 /var/www/html/wp-content/cache/all/」ディレクトリに保存されたキャッシュを手動で削除するかどうか
  • キャッシュと圧縮された CSS/JS ファイルを削除:
    「 /var/www/html/wp-content/cache/all/」ディレクトリは存在します。
    「 /var/www/html/wp-content/cache/wpfc-minified」ディレクトリは存在しません。

というのも、「CSS/JS」などの圧縮はテーマ「Cocoon」で設定しているからかも知れません。「WP Fastest Cache」で設定している人は、私には存在しないディレクトリが存在するかも知れません。

それゆえ、

「CSS/JS」などの圧縮はテーマ「Cocoon」で設定している人は注意が必要だと思います。「WP Fastest Cache」でキャッシュを削除したからといってすべてが削除されるわけではないと解釈しています。この部分は、後述してます。

次に、「Add New Rule」というボタンがあります。

クリックすると「ダイアログ」が表示されます。

  • 頻繁に更新をする人は「1日に1度」
  • そんなに更新しないのであれば「1週間に1度」

    その程度で設定するのがちょうど良いと思います。下記画面には「リセット時間」が選択できるようになっていますが、2020年6月28日時点では「リセット時間」の設定はなくなっています。

    今後、表示される時に注意するポイントとしては、時間です。日本時間で表示されていませんでしたので、時差を考慮してリセット時間を決めたほうが良いです。

1.11 運用上の注意点

「Cocoon」側でのキャッシュの削除

  • 「WordPress管理画面ダッシュボード」「Cocoon設定」「キャッシュの削除」の順番でクリックして、「キャッシュの削除」ページを表示します。
  • 赤枠の「全てのキャッシュの削除」をクリックしないと「Cocoon」側で設定した圧縮ファイルの削除は行われないと思います。
  • 理由について、「1.12 以降」で詳しく説明させてもらっています。

1.12 プラグインのキャッシュの削除タブ

  • ①は右側の
    「 /var/www/html/wp-content/chache/all」の中のファイルを削除。
  • ②は右側の
    「 /var/www/html/wp-content/chache/all」の中のファイルを削除。
    「 /var/www/html/wp-content/chache/all/wpfc-minified」の中のファイルを削除。

minified」は「縮小された」という意味ですから「Cocoon」側で設定した圧縮ファイルなどの削除は行われないと思います。

1.13 共通機能のボタン①

  • ①「WordPress管理画面」「アドミンバー」「Delete Cache」

「WordPress管理画面」「左袖」の「プラグイン設定」を開かなくても同一の機能が簡単に利用できるようになっています。

1.14 共通機能のボタン②

  • ②「WordPress管理画面」「アドミンバー」「Delete Cache and Minified CSS/JS」

1.15 ディレクトリの検証

①②の両方がどのように動作しているのか確認していきます。

1.16 WinSCPで中身を確認

  • 「WinSCP起動」して、ログインします。

1.17 キャッシュフォルダの確認

  • ①の「 /var/www/html/wp-content/chache/all」
  • ②の「 /var/www/html/wp-content/chache/all/wpfc-minified」
    「Cocoon」の重複機能なので存在していません。

1.18 キャッシュフォルダの中身

  • ①の「 /var/www/html/wp-content/chache/all」

「WordPress」の「投稿ページ」毎に「キャッシュフォルダ」がたくさん並んでいます。

1.19 「WinSCP」で機能確認

  • 「WordPress管理画面」で、①の「 /var/www/html/wp-content/chache/all」のキャッシュを削除してみます。

1.20 「WinSCP」で即確認

  • 「上記画面でキャッシュを削除した直後」、「WinSCP」で更新すると、さっきまでたくさんあった「キャッシュフォルダ」がすべて削除されています。

1.21 数分後

「WinSCP」で数分後に更新して確認すると、「1.6 先読み」で設定した1分間に4ページ作成する設定が動作しているのが確認できます。

1.22 さいごに

書いていない項目がいくつかあります。それは、テーマ「Cocoon」と機能が重複している圧縮系です。「Cocoon」を利用している、あるいは、これから利用される人にとっては結構しっかりと書いたつもりでいます。

特にキャッシュの削除のディレクトリの部分とか。これは恐らくほとんどの方が注目してみないところだと思います。

もし気になった方は、「CSS/JS」ファイルなどどちらの機能で圧縮しているのか、また、重複して設定していないか、設定は合っているけどキャッシュの削除方法が間違っていたなど、もう一度確認することをお勧めします。

「FTP接続」「SFTP接続」などで、ディレクトリが存在しているのか、ということは確認できます。

「WP Fastest Cache」プラグインの設定説明のブログは数あれど、テーマ側での「キャッシュの削除」とセットで説明されている方がいませんでした。※私調べですが、、、

きちんと設定する意味が分かって、「PageSpeed Insights」で計測すると結果が目に見えて変わると思います。特に「改善できる項目」が少なくなります。

PageSpeed Insights

なお、「GCP」の「ロードバランサー」を利用する人はあまりいないと思いますが、

  • 「WP Fastest Cache」プラグイン:JavaScript ファイルを結合
  • テーマ「Cocoon」:JavaScript縮小化

この項目部分には、絶対に✔を入れることはなりませぬ。

WordPressが壊滅するでござる。それが原因だと判明するまでに2週間ほど要したでござる。それだけのためにプロジェクトごと、20個ほど壊したでござる。エンジニアって大変なんだろーなぁ、きっと。


次は、第15回です。


【コメント】 ※「メールアドレス不要」

WordPress GCP
投票2020