WordPress プラグイン・WP Fastest Cache Premium（有料版）の設定方法（導入 顛末記）

最近になりモバイルでの表示が大幅に遅いと感じるようになり「PageSpeed Insights」でスコアーを確認するとモバイルで15前後、PCで50前後となっていました。（以前はモバイルで３０前後、PCで８０前後でした）　

そこで、モバイルのページ表示速度を上げるべく、「モバイルテーマのキャッシュを作成する」ことが出来るWP Fastest Cache Premium（WFCPに略す）を4.99ドル（Paypal）で購入してみました。　

WFCPをインストール後、WFCPを理解せぬままに適当に設定したら、モバイル画面にPC画面が混在する等の表示上のトラブルが発生するなど設定に手こずりました。　一応使いこなしができる様になりましたので、WFCPの設定について紹介します。　

更に、WFCPを導入後、体感上の表示速度の改善は得られたものの「PageSpeed Insights」のスコアー改善には至らず、合わせてコアー改善に向けた顛末も紹介します。

なお、WFCPを導入に際しては、Wordpressのバックアップしておくことを強くオススメします。

• レンタルサーバー：ロリポップ（ライトプラン）のPHP7.4（モジュール版）
• WordPress（5.6）：テーマは、Affinger5（20210111 ）
• EWWW Image Optimizer プラグインによる画像のWebP 化

 

WFCPについて

このWFPCプラグインについて、WordPressサイトによれば、

ブラウザのページリクエストを受けて、WordPress は動的にHTMLを生成しますが、以上の要約からWFCPはキャッシュによって予め保存された静的なHTMLページにアクセスできる様になりブラウザの表示が高速化します。　無料版（WFC）と比較して有料プレミアム版（WFCP）は、下表のようにキャッシュに関連する機能が大幅に拡大されています。（特にモバイルキャッシュが使える様になります）

 

WFCP（プレミアム版）の要注意・設定項目

WFCP（プレミアム版）を有効にした後、３項目でページ表示が崩れるなどのトラブルに遭遇しました。　この３項目の設定を説明します。　

• Widget Cache（ウィジェットキャシュ）

  

  当ブログで使用しているAffinger5テーマには、条件表示（分岐）できるショートコードがあります。　スマホの場合は【nopc】〜【/nopc】、PCの場合は【pc】〜【/pc】でコンテンツ表示を分けることが出来ます。

  ウィジェット内に条件表示ショートコードがある場合Widget Cache（ウィジェットキャシュ）にレ点を入れるとウィジェット内に条件表示（分岐）があっても、条件表示（分岐）の全てがキャッシュされるので、例えばモバイル表示にPCの表示が混在してしまうという不具合が発生します。　

  解決策・ポイント

  「Widget Cache」にレ点を入れると、各ウィジェットには以下の「Don't cache this widget」が現れるので、必要に応じて、このウィジェットをキャシュするか否かを決めることができます。

  

  ウィジェット内に条件表示ショートコードがある場合「Don't cache this widget」にレ点を入れること！




• Render Blocking Js

  「Render Blocking Js」にレ点を入れて、「変更を保存」すると、Amazonアソシエイトのサーチウィジェット広告がページの一番下のフッター部分に移動してしまう不具合が発生しました。

  解決策・ポイント

  解決策は、「Amazonアソシエイトのサーチウィジェット広告」コードに以下の様に<script data-wpfc-render = "false” を追記します。（下記参照）

   html js
  <script data-wpfc-render = "false” src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP"></script>
  

  当ブログでは、「Amazonアソシエイトのサーチウィジェット広告」を複数ページに配置していますので、Search Regexプラグインで、全てのページを置換して対策しました。




• Lazy Load

  「Lazy Load」にレ点を入れて、「変更を保存」すると、「いいねボタン」の表示不良、「インラインフレーム」に関する表示不良やVIDEO設置部分が白く表示するなどの表示不良が発生しました。

  解決策・ポイント

  解決策は、「Lazy Load」にレ点を入れるとFig１が表示されNextを押すとFig2の「キーワードの追加」フィールドが表示されます。　「キーワードの追加」フィールドに、ws-na.amazon-adsystem.com、iframe 、wpulike、VIDEO .mp4（動画の拡張子）を追加しFINISH を押します。

  

  Fig１

  

  Fig ２

以上から、全てのアイテムにレ点を入れることが出来ました。

WFCP導入後のページ速度について

さて、モバイルでの表示がどうなったか？と言いますと、体感上の表示速度は大幅に改善した様に感じました。　しかし、「PageSpeed Insights」でのスコアーはモバイルで15前後、PCで50前後となっていて、スコアー改善は見られませんでした。　そこで、「PageSpeed Insights」スコアーの改善についてトライしてみました。

 

PageSpeed Insights スコアー改善に向けて

赤丸点滅で示しますアイテムが、最もスコアーがUPしたアイテムです。

• Autoptimize の設定

  少々気になっていたいたのが、Autoptimize プラグインとの競合でしたので設定を以下の様に見直しました。

  Autoptimize設定・ポイント

  • JS,CSS&HTMLタグ：
    CSSコードの最適化とCSS のインライン化と遅延 にレ点を入れて、それ以外の項目のレ点を全て外しました。
  • 画像タグ：全てのレ点を外しました。



• 不要プラグインの削除 etc

  • 停止中のプラグインの削除
  • ネットで調べると、「WordPress Popular Posts」プラグインに問題がありそうでしたので、削除してみましたが、スコアーの改善は見られず、再インストールして元に戻しました。



• アドセンスの遅延読み込み

  以下の記事を参考にしてアドセンスの遅延読み込みを行ったところ、大幅にスコアーが改善しました。

  遅延読み込みの方法

  全ての非同期スクリプト（以下）コードを削除
  

   
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  

  自動広告のアドセンスコードも全て削除します。　手動広告があれば自動広告は表示されます。

  AdSenseヘルプによれば、「広告ユニットコードの機能向上」でどの広告コードでも、自動広告が機能するようになりました。サイトで自動広告を有効にしている場合は、標準の広告ユニットしかないページにも、自動広告が表示されるようになります。

  </body>の直前に以下のコードを貼り付ける。
  （Affinger5の場合、AFFINGER5 管理 ＞ その他 ＞ 上級者向けにある </body> 直前に出力するコード..... 記述下の枠内に貼り付けます）

  HTML

  <script> //<![CDATA[ //lazy load ads var lazyloadads = false; window.addEventListener("scroll", function() { if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) { (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyloadads = true; } }, true) //]]> </script>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  <script> //<![CDATA[ //lazy load ads var lazyloadads = false; window.addEventListener("scroll", function() {     if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {           (function() {             var ad = document.createElement('script');             ad.type = 'text/javascript';             ad.async = true;             ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';             var sc = document.getElementsByTagName('script')[0];             sc.parentNode.insertBefore(ad, sc);         })();           lazyloadads = true;     } }, true) //]]> </script>

  PageSpeed Insights スコアー
  モバイルで３５前後
  PCで８５前後にUPしました

WFCP（プレミアム版）の導入（所感・マトメ）

残念ながら、WFCP（プレミアム版）を導入後、以下の２つの課題を積み残しています。

 

以上、WP Fastest Cache Premium（有料版）の設定方法（導入 顛末記）でした。