Cocoon & grayish の LiteSpeedCache プラグイン設定の最適化

Cocoon テーマ & grayish スキン

このブログは WordPress の Cocoon テーマと grayish スキンを使用しています。立ち上げ直後の記事はこちら。

「古きを知り新しきを学ぶ」ブログの構成

「古きを知り新しきを学ぶ」ブログをどのように立ち上げたか、どのような構成になっているかについて記載しました。ロリポップ！レンタルサーバーのドメイン2個目無料を利用してムームードメインでドメインを取得、WordPress + Cocoon + LiteSpeed Cache で構成しています。

lftp-dsn.space

2024.02.06

grayish スキンのグレーが基調の柔らかい雰囲気が気に入っています。それに合わせて、フロントページからアイキャッチ画像まで白猫で揃えて、これから先も同様のアイキャッチ画像を生成して使用していこうと考えています。

私の使用しているロリポップ！レンタルサーバーでは、WordPress をインストール直後から LiteSpeed Cache プラグイン (以下、LSCache と省略) を使用できるようになっています。以前から、その初期設定がどのようになっているか、興味を持っていました。

今回の記事は、「新しきを学ぶ」事の1つめの記事として、

• LSCache プラグイン最適化の際の PageSpeed Insights (以下 PSI と省略) のスコアの推移
• Cocoon テーマ & grayish スキンの LSCache プラグインの最適化方法
• ロリポップ！レンタルサーバーの LSCache プラグインの初期設定

の三つについて紹介します。なお、

• LSCache プラグインのバージョンは Ver.6.1 です
• PSI のスコアや表示乱れの確認は、Chrome のシークレットモードで実施しています

ロリポップ！レンタルサーバーの LSCache の初期設定については、最後に補足として一覧で載せています。

PSI のスコアの推移

はじめに、Cocoon テーマ & grayish スキンの組み合わせで LSCache を調整していく各段階で、PageSpeed Insights のスコアの変化をグラフにしてみました。

PC については、特に設定をしなくても 90 以上を維持できています。

Mobile は初期段階では 46 でしたが、最適化を進めた事で、現在では 99 ～ 100 に達して、これを維持できています。

Mobile の白抜き部分は、画面表示の乱れが発生している箇所です。これを防止しながら、PSI のスコアを向上させる方法について、順を追って説明します。

LSCache 最適化

LSCache プラグインの初期状態では、Mobile 46 PC 96 でした。ロリポップ！レンタルサーバーの初期設定の状態から、少しずつ最適化を進めていきます。

各項の先頭の数字は、上記グラフの横軸の数字に対応します。

(0) 初期状態

WordPress 本体や Cocoon テーマ & grayish スキン、各種プラグインを最新に更新、Google Analytics と Google Search Console を Site Kit by Google プラグインに連携、等を行った段階で、PSI のスコアは Mobile 46 PC 96 でした。

LSCache もアップデートしたのみで設定は何も変更していない状態です。

(1) Cocoon テーマによる最適化

初めに、LSCache の設定は初期状態のままで、Cocoon テーマによる最適化を ON にしました。

Cocoonおすすめのサイト高速化設定

Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適...

wp-cocoon.com

こちらを参考に

• ブラウザキャッシュの有効化
• CSS を縮小化する
• JavaScript を縮小化する

の項目を全て ON にしてみました。

キャッシュを一度クリアして、再読み込みを幾度か繰り返しましたが、PSI のスコアは Mobile 48 PC 93 と、ほぼ変わらないか若干下がる結果でした。

アドセンス、Analytics、Facebook、Twitter等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。

https://wp-cocoon.com/site-speed-up/

Google AdSense は未だ使用していませんが、Google Analytics や A8.net、楽天アフィリエイト、バリューコマース等を使用していますので、特に Mobile のスコア向上は見込めないと判断し、Cocoon テーマによる最適化は全て OFF とし、LSCache プラグインの最適化を進める事にしました。

(2) ドメインキー取得、画像の最適化

LSCache プラグインの最適化の一つ目は、ドメインキーの取得です。これを行わないと各種最適化が進まないので、最初に取得します。

「一般」 -> 「一般設定」の中にある「ドメインキー」の欄の右側の「ドメインキーの要求」ボタンを押します。

ドメインキーが取得できれば、次のような表示に変わります。

これで画像の最適化を行えますので、自動要求 Cron 含めて必要な項目を ON にします。

これで PNG画像の tiny化、WebP 化が自動で行われるようになります。

画像の最適化が済んだ状態で PSI のスコアは Mobile 45 PC 91 と少し悪化しました。

(3) HTML の最適化、キャッシュ設定の変更

HTML の圧縮化は比較的悪影響が出にくい項目ですので ON に変更します。DNS プリフェッチは Cocoon テーマの設定と被る部分もありますが、私は両方とも ON にしています。

合わせて、キャッシュの設定を見直しました。ログインしているユーザーのキャッシュは不要だと思いますので OFF にしています。

HTML の最適化とキャッシュの設定を変更した後で、PSI のスコアは Mobile 48 PC 92 でした。

JavaScript、CSS リストの取得

HTML やキャッシュの項目の設定変更では大幅な PSI スコアの改善は見込めません。そこで、JavaScript と CSS の最適化を進めます。

LSCache プラグインの最適化手順については、以下のページで説明されています (英語)。

CSS/JS Issues | Troubleshooting | LSCache for WordPress | LiteSpeed Documentation

Troubleshooting JavaScript, CSS, and other page optimization issues in the LiteSpeed Cache for WordP...

docs.litespeedtech.com

基本的な手順としては、

• JavaScript と CSS の最適化を OFF にする
• 使用されている JavaScript と CSS の一覧を取得する (Chrome デベロッパーツール使用)
• 最適化を一つずつ ON にして画面表示の不具合が発生した場合には、除外欄に追加する

となります。

私のサイトの JavaScript と CSS の一覧を以下に示します。不要なドメイン名は除外しました。

jquery.min.js
jquery-migrate.min.js
/plugins/contact-form-7/includes/swv/js/index.js
/plugins/contact-form-7/includes/js/index.js
/themes/cocoon-master/plugins/stickyfill/dist/stickyfill.min.js
/themes/cocoon-master/javascript.js
/themes/cocoon-master/skins/skin-grayish-topfull/javascript.js
/themes/cocoon-child-master/javascript.js
/recaptcha/api.js
/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js
/wp-includes/js/dist/vendor/regenerator-runtime.min.js
/wp-includes/js/dist/vendor/wp-polyfill.min.js
/plugins/contact-form-7/modules/recaptcha/index.js
/gtag/js
recaptcha__ja.js
https://www.google.com/js/bg/

/wp-includes/css/dist/block-library/style.min.css
/plugins/contact-form-7/includes/css/styles.css
https://fonts.googleapis.com/css
/themes/cocoon-master/style.css
/themes/cocoon-master/keyframes.css
/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
/themes/cocoon-master/css/fontawesome5.css
/themes/cocoon-master/webfonts/icomoon/style.css
/themes/cocoon-master/skins/skin-grayish-topfull/style.css
/themes/cocoon-child-master/style.css
/themes/cocoon-child-master/keyframes.css
styles__ltr.css

この一覧を元に、JavaScript と CSS を最適化します。

(4)～(6) JS の最適化　その1

先ずは除外項目等は追加せずに、JS (JavaScript) の最適化を一つずつ ON にしてみます。

• (4) JS 圧縮化　ON
• (5) JS 結合　ON
• (6) JS は外部とインラインを組み合わせる　ON

この3項目を ON にしても、画面表示の乱れは発生しませんでした。不具合とまでは言えませんが、次の現象が生じました。

• Google reCAPTCHA で読み込まれる JavaScript が 'recaptcha__ja.js' から 'recaptcha__en.js' に変更
• reCAPTCHA バッジ (ロゴ画像) を表示していると、日本語から英語表示に変わる

PSI のスコアは Mobile 44 -> 47 -> 51、PC 92 -> 93 -> 95 と、少しずつですが向上しました。

(7) JS を遅延読み込み ... 画面表示乱れ発生

JS 設定の残りの項目、JS を遅延読み込みの設定を変更してみました。

先ずは "遅延" に設定した所、次のような画面表示の乱れが発生しました。

• モバイルのフロントページは、通常は "ホーム" のみが左上に表示されているものが、"ホーム"・"ブログタイトル"・"検索" の全てが表示されるようになりました。

この現象は読み込み直後のみ発生し、PC であればマウスの移動、Mobile であれば画面スクロールで解消します。

画面の乱れはありますが、この状態で PSI のスコアは Mobile 84 PC 99 と大きく向上しました。PSI のスコアの推移、一つ目の白○です。

(8) reCAPTCHA の JS 読み込み修正

Google reCAPTCHA の英語版が表示される件を対処しました。リストアップした JavaScript のうち、Google reCAPTCHA に関連する JavaScript を最適化から除外します。

初期状態からの変更箇所を表にまとめます。"JS 除外" と "JS Deferred / Delayed 除く" の項目は一旦削除し、"JS 除外" に追記しました。

これで、Google reCAPTCHA バッジ (アイコン) は日本語表記となり、JavaScript も 'recaptcha__ja.js' が読み込まれるようになりました。

画面表示の乱れは相変わらず発生していますが、PSI のスコアは Mobile 85 PC 99 と少し向上しました。PSI スコア推移、二つ目の白丸です。

(9) JS を遅延読み込み　遅延 -> Deferred に変更

JS の除外項目を色々と調整しても、画面表示の乱れは解決できませんでした。

そこで、"JS を遅延読み込み" の項目を、"遅延"から "Deferred" に変更した所、画面表示の乱れは解消しました。

その代わり、PSI のスコアは Mobile 51 PC 95 と、特に Mobile が大きく悪化しました。

(10) JS を遅延読み込み　遅延に戻す

JS の遅延読み込みを "遅延" から "Deferred" に変更した影響は大きく、PSI の Mobile のスコアが極端に低下してしまいました。

他の解決方法を探すために、"JS を遅延読み込み" を再び "遅延" に戻しました。

PSI のスコアは Mobile 88 PC 99 と向上した代わりに、画面表示の乱れは再び発生しました。マウス操作、又はスクロールで解消しますが、画面表示の乱れを直す方法を模索しました。

(11) [8] チューニングの調整

"JS を遅延読み込み" を "Deferred" で使う場合にも、[8] チューニングの "JS 遅延が含まれるもの" に JavaScript を追加すると遅延読み込みされます。

その際に、"JS 結合" と "JS は外部とインラインを組み合わせる" が ON では上手く遅延できなかったので、OFF に変更しました。

先に示した JavaScript のリストを参考にして、JS 設定と [8] チューニングの項目を調整しました。

試行錯誤した結果、上の表の内容に落ち着きました。画面表示の不具合はありません。その結果、PSI のスコアは、JS が Deferred でも Mobile 84 PC 99 と回復しました。

(最終的には、この設定は使用しない事にしました)

(12), (13), (14) CSS の最適化　その1 (CCSS使用)

JavaScript の画面表示不具合が解決できましたので、次は CSS の最適化を行います。

(12) CSS 圧縮化 ON、(13) CSS 結合 ON、(14) CSS を非同期読み込み ON 、と一つずつ順番に ON にしました。CSS を非同期読み込みは、Critical CSS (CCSS) を生成するオプションです。

CSS 除外には、Cocoon-Child テーマの sytle.css を追加しました。この追加は必須です。子テーマの JavaScript や PHP は LSCache プラグインで最適化されても反映されますが、子テーマの CSS に追加した内容は、CSS 除外に追加しておかないと反映されません。

PSI スコアは以下の表の様に徐々に向上しましたが、頭打ちとなりました。複数回測定すると、Mobile のスコアが 90前後で推移していました。特に LCP は CCSS を使う場合にはこれ以上向上が見込めません。

(15)、(16) CSS の最適化　その2　(UCSS使用)

方針を変更して、CCSS ではなく Unique CSS (UCSS) を使用する事にしました。また、ゲストモードとゲスト最適化を使用するようにしました。ゲストモード、ゲスト最適化を使用する場合には、JS の項目も修正が必要でしたので手直ししました。("JS 遅延が含まれるもの" の殆どを削除しました)

"CSS の外部とインラインを組み合わせる" の項目は OFF としました。ON にすると以下のような画面表示の乱れが生じた為です。

• フロントページの上部メニューの "ホーム" アイコンが中央寄せになる
• サイドスライドメニューの中身が表示されない

また、この設定では UCSS を生成する設定としていますが、QUIC.cloud から生成された UCSS が送り返されません。その為、Chrome のデベロッパーツールで見ると、UCSS が反映されていない状態となっていました。

それでも、PSI のスコアは Mobile 99 PC 100 へと向上しました。

SI が改善されているのに対して FCP、LCP がそれほど改善されていないのは、UCSS が生成されていない為です。

(17) 表示乱れへの対策 : 子テーマ CSS に追記 (20240426追記あり)

UCSS が生成されない原因は "CSS の外部とインラインを組み合わせる" が OFF である為です。こちらを ON にすると UCSS は生成されますが、画面表示が乱れます。

この対策については、Chrome デベロッパーツールで、表示が正常な時と乱れている時を比較して、正常に表示する為に必要な CSS を特定し、子テーマの CSS に反映させる事で対処しました。

子テーマの style.css に追加した内容を以下に示します。

/* 20240223 LSCache + grayish 表示不具合修正 ここから */
/* スライドサイドバーの中身を表示させる */
.no-mobile-sidebar .sidebar {
    display: block;
}
/* トップページのホームボタンが中央に寄るのを防止する */
/* 20240426 Cocoon Ver.2.7.3.1, grayish Ver.1.0.12 で解消した為コメント */
/* .has-logo-button .menu-button {
    width: 70px;
} */
/* この二つの対策で LiteSpeed Cache プラグインの UCSS 生成できる */
/* 20240223 LSCache + grayish 表示不具合修正 ここまで */

20240426 追記 : 二つ目の対策は Cocoon Ver.2.7.3.1, grayish Ver.1.0.12 から不要になりました。フロントページのキャッシュと UCSS を消去して、UCSS を再生成すれば OK です。

この対策を追加する事により、"CSS の外部とインラインを組み合わせる" を ON にする事ができ、UCSS も生成されるようになりました。

SI に加えて、中々改善できなかった FCP、LCP についても改善されました。

その後も様子を見ていますが、Mobile 99～100、PC 100 で安定しています。読み込むタイミングにより、偶に FCP が Yellow Range になる事はありますが、極端に悪化する事はありません。

スクロールテーブルの表示乱れへの対策 (20240313追加)

改めて Chrome シークレットモードで確認していたら、スクロールするテーブルのアイコン表示が消えて、テーブルの左下に文字だけ表示されている状態でした。(見逃していました…)

とりあえず回避方法を確立できましたので紹介します。

まず、CSS 除外に scroll-hint.css を追加します。

/cocoon-master/plugins/scroll-hint-master/css/scroll-hint.css

他のスキンでは上記だけで直りましたが、grayish スキンの場合には下記を子テーマの style.css に追記する必要がありました。grayish スキンの style.css からの転記です。

/* 20240313 スクロールヒントを表示する ここから */
/* /cocoon-master/plugins/scroll-hint-master/css/scroll-hint.css を
 *  CSS 除外するのに加えて、grayish スキンでは下記も必要 */
/* スクロールヒント  for table */
.skin-grayish .scroll-hint-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--skin-grayish-cat-back);
  width: 80px;
  border-radius: 99%;
  top: calc(50% - 30px);
  left: unset;
  right: 20px;
}

.skin-grayish .scroll-hint-icon:before,
.skin-grayish .scroll-hint-icon:after {
  display: none;
}

.skin-grayish .scroll-hint-text {
  color: var(--white);
  margin-top: 0;
}
/* 20240313 スクロールヒントを表示する ここまで */

この変更による PSI への影響はなさそうです。

SNS シェアアイコンが表示されない不具合への対策 (20240326追記)

PC 画面で幅広で表示した際に、左端に SNS シェアアイコンが表示されていませんでした。(Cocoon のアップデートで気付きました)

grayish スキンの style.css から、以下の内容を子テーマの style.css に追記する事で表示されるようになりました。また、Bluesky のシェアアイコンが表示されませんでしたので、UCSS を再生成しました。

/* 20240326 PC 表示時の左側に sns-share 表示 ここから */
/* mainが見える間 表示 */
.skin-grayish .article-header .sns-share[data-scroldisp=on] {
  opacity: 1;
  visibility: visible;
}

/* mainが見えない時 非表示 */
.skin-grayish .article-header .sns-share[data-scroldisp=off] {
  opacity: 0;
  visibility: hidden;
}
/* 20240326 PC 表示時の左側に sns-share 表示 ここまで */

JavaScript、CSS の最終的な設定一覧

LSCache プラグインの JavaScript と CSS の最終的な設定の一覧を以下に示します。子テーマの style.css に表示乱れ対策を記載した事で、除外項目が少なくて済み、JS も Deferred で読み込んでも (遅延で読み込ませなくても) PSI のスコアを高く維持できています。

結び

今回の記事では、「新しきを学ぶ」事の一つ目として、Cocoon テーマ & grayish スキンで LSCache プラグインを最適化する方法について記載しました。

ロリポップ！レンタルサーバーの WordPress 簡単インストールで一緒にインストールした LSCache プラグインの初期状態から、

• ドメインキーを取得して各最適化が行われるように変更しました
• 画像の最適化では Cron を有効にして、PNG の tiny 化と WebP 化が行われるように変更しました
• JavaScript の最適化では、"遅延" では画面表示が乱れます。"Deferred" にする必要があります。
• CSS の最適化では、CCSS では PSI のスコア向上には限界があります。UCSS 必須です。
• CSS の最適化による画面表示の乱れ対策を子テーマの style.css に追加する事で、UCSS が生成されるようになり、Mobile / PC 共に PSI のスコアは 99 ～ 100 を維持できるようになりました。

最後の項目の原因を掴むまでに時間を要しました。JavaScript も絡みますので CSS は難しいです。

Cocoon テーマ & grayish スキンで LSCache を使う方の参考になれば幸いです。

【補足】ロリポップ！の LSCache プラグイン初期設定

補足として、ロリポップ！レンタルサーバーの LSCache プラグインの初期設定を紹介します。

ロリポップ！レンタルサーバーでは、WordPress 簡単インストールの時に LSCache プラグインのインストールを済ませる事が出来ます。以前からインストール直後の LSCache プラグインの初期条件がどのようになっているか興味がありましたので、最適化を進める前に記録しておきました。以下に一覧で示します。

初期設定は「キャッシュのみを有効」という状態です。最適化は実施されていません。

主要な項目毎にお勧めの設定を記載します。

一般

• 自動アップグレードは OFF を推奨します。WordPress にアップデートのサインが出ますので、バックアップを実行した後でアップグレードした方が良いでしょう。
• ドメインキーは取得して下さい。LiteSpeed Cache プラグインによるサイトの最適化には、ドメインキーの取得が必須です。QUIC.cloud CDN で負荷分散を使わないとしても、ドメインキーを取得すれば、画像の最適化や JavaScript、CSS の最適化が行われますので、取得をお勧めします。
• ゲストモード及びゲストの最適化は、PSI のスコアを追求するのであれば ON です。ただし、JavaScript と CSS の最適化による表示乱れ等の対処が済んでいない場合には、OFF です。

キャッシュ

キャッシュは一通り有効になっていました。個人的には、ログインしているユーザーのキャッシュは不要だと考えますので、

• "ログインしたユーザーをキャッシュ" は OFF
• "ログインページをキャッシュ" は OFF

の方が好みです。

• モバイルのキャッシュは初期状態では OFF ですが、レスポンシブなテーマ・スキンだとしても ON の方が Mobile の PSI のスコアが向上します。(その代わり、キャッシュの量が多くなり、クローラーの実行数が増加します)

[2] TTL、[3] パージ、[4] 除外、[5] ESI、[6] オブジェクト、[8] 高度な設定については、この先も変更していません。

ただ、継続して使用していると偶に PageSpeed Insights の結果が落ち込む事がありますので、定期的なパージは必要かもしれません。

CDN

[3] 管理には設定項目はありません。

• QUIC.cloud CDN は、私は使用していますが、DNS の設定が必要で手順が煩雑になりますので、OFF でも良いと思います。
• Cloudflare は、私は使用した事がありませんので OFF のままです。

画像の最適化

[1] 画像最適化の概要には設定項目はありません。[2] 画像最適化設定の初期値です。

自動要求 Cron や WebP 画像への変換には、QUIC.cloud のドメインキーの取得が必要です。初期状態では画像の最適化は自動では行われません。

ドメインキーを取得して、自動要求 Cron を ON にすれば、自動で png の最小化を含む最適化が行われます。WebP 画像への変換も ON にすれば、WebP 画像にも自動で変換されます。

ページの最適化

表示乱れ等のトラブルが出やすい項目です。初期値は殆どの項目で OFF となっています。この記事の前半で説明した手順で最適化を図る必要があります。そのまま ON にしても、表示の乱れが発生した場合に対処できずに、OFF にもどすしかありません。

([6] 除外するメディアと [7] ローカリゼーションを入れ替えました)

データベース

[1] 管理には設定項目はありません。

クローラー

[1] 概要、[2] マップ、[3] ブロックリストには設定項目はありません。

クローラーは、定期的にキャッシュを作成したり、必要な UCSS を生成するアクションを発生させてくれますので、個人的には ON にしています。

ツールボックス

[1] パージ、[2] インポート / エクスポート、[3] .htaccess、[7] ログ表示には設定項目はありません。

[5] レポートは初期設定のまま変更しませんでした。

ハートビート制御は、このサイトでは有効にしてみました。負荷が高い場合には OFF に戻そうと考えていますが、今の所は大丈夫そうです。