SEOに影響するウェブサイトの表示速度。「LiteSpeed Cache」の導入で表示速度が大幅にアップしました。また「Contact Form 7」の不具合も解決できましたので情報を共有します。
目次
AFFINGER6（ACTION）のLiteSpeed Cache導入前、導入後
2022年5月12日、ロリポップから「ウェブサイトの速度が2倍になる「LiteSpeed Cache」が利用できるようになりました！」とのお知らせがありましたので、「LiteSpeed Cache」を導入してみました。
-
ウェブサイトのさらなる爆速化を実現する「LiteSpeed Cache」が利用できるようになりました！ - ロリポップ！レンタルサーバー
ロリポップ！レンタルサーバー 2022年05月12日 新着情報「ウェブサイトのさらなる爆速化を実現する「LiteSpeed Cache」が利用できるようになりました！」についてのページです。
lolipop.jp
| サイト環境 | LiteSpeed Cache導入前 | LiteSpeed Cache導入後 |
| レンタルサーバー | ロリポップハイスピードプラン | 同左 2022年5月12日LiteSpeed Cacheに対応 |
| WordPressテーマ | AFFINGER6 | 同左 |
| AFFINGER6の設定 | ・キャッシュ機能なし ・遅延読込（LazyLoad）使用しない ・Googleフォント使用しない | 同左 |
| スピードアッププラグイン | ・WP Fastest Cache（キャッシュ） ・Autoptimize（ページ最適化） ・EWWW Image Optimizer（画像圧縮） ・Imsanity（画像サイズ修正） | LiteSpeed Cache（キャッシュ、画像最適化、ページ最適化、データベース最適化） |
| reCaptcha設定プラグイン | Invisible reCaptcha for WordPress | reCaptcha by BestWebSoft |
| PageSpeed Insightsスコア | モバイル５０～６０点台 パソコン９０点台 | モバイル８０～９０点台 パソコン９０～１００点 |
AFFINGER6の設定（参考）
- 遅延読込（LazyLoad）を使用しない設定（WordPressに同機能があるので）
- 「AFFINGER管理」「その他」「遅延読込」「WordPress本体のLazyLoadを有効にする」ON
- Googleフォントを使用しない設定（読み込みが遅くなるので）
- 「AFFINGER管理」「全体設定」「Aフォントの種類」「全体」「デフォルト」ON（初期設定のままでGoogleフォントを使用しない設定）
- 「AFFINGER管理」「全体設定」「Aフォントの種類」「記事タイトル・見出し…」「使用しない」ON（初期設定では「Noto Sans」ONでGoogleフォントを使用する設定）
- 上記設定でAFFINGER標準の通常フォント「メイリオ」になる
- 「AFFINGER管理」の設定変更注意点
- 事前にロリポップのWAF設定を「無効にする」にしておかないと「AFFINGER管理」の設定変更はできません（設定変更後、WAF設定を「有効」に戻す）
「LiteSpeed Cache」導入前もそこそこのスピードアップ対策は行ってましたが、モバイルのPageSpeed Insightsスコアはせいぜいいっても６０点台といったところでした。
それが「LiteSpeed Cache」導入後はモバイルでも８０～９０点台、時に１００点を打ち出すまでに表示速度が大幅にアップしました。
AdSense広告を貼ってるこのページの表示速度。↓（良い時で）
表示速度を大幅アップできる「ロリポップハイスピードプラン」と「AFFINGER6」について詳しくはこちら。↓
広告
LightningのLiteSpeed Cache導入前、導入後
WordPressテーマ「Lightning」で作った下記ホームページにも「LiteSpeed Cache」を導入しましたので、こちらも参考に載せておきます。
-
齋藤富智恵税理士事務所【玉村町・伊勢崎市・前橋市・高崎市】
玉村町の女性税理士
fujiekaikei.com
| サイト環境 | LiteSpeed Cache導入前 | LiteSpeed Cache導入後 |
| レンタルサーバー | ロリポップハイスピードプラン | 同左 2022年5月12日LiteSpeed Cacheに対応 |
| WordPressテーマ | Lightning | 同左 |
| スピードアッププラグイン | EWWW Image Optimizer（画像圧縮） | LiteSpeed Cache（キャッシュ、画像最適化、ページ最適化、データベース最適化） |
| reCaptcha設定プラグイン | Invisible reCaptcha for WordPress | reCaptcha by BestWebSoft |
| PageSpeed Insightsスコア | モバイル７０点台 パソコン９０点台 | モバイル１００点 パソコン１００点 |
もともとWordPressテーマ「Lightning」は名前の通り軽いので「LiteSpeed Cache」導入前からそこそこの表示速度を打ち出していましたが、「LiteSpeed Cache」導入後はなんとモバイル、パソコンともにPageSpeed Insightsスコア１００点をたたき出しました。（恐るべし）
トップページの表示速度。↓（安定して）
LiteSpeed Cacheの設定方法
LiteSpeed Cacheの設定は以下の記事を参考にさせて頂きました。（こちらの記事のおかげで無事に設定することができました。本当にありがとうございます。）
-
LiteSpeed Cacheの不具合の少ない設定方法と使い方【SWELL・Cocoon対応】 | マニュオン
この記事では、WordPressプラグイン「LiteSpeed Cache」で不具合の少ないおすすめの初期設定の方法と使い方を、画像を用いてわかりやすくご紹介します。 「LiteSpeed Cache ...
manuon.com
- 記事に記載されている通りに設定しましたが、デザイン崩れもなく表示速度が大幅アップしました。（この後書きますが「Contact Form 7」の不具合は別のプラグインが原因でした）
- キャッシュの除外の「URIs をキャッシュしない」は何も設定してませんが、私のお問い合わせフォームでは問題ありませんでした。（この後書きます「Contact Form 7」の不具合とも関係ありませんでした）
- ページの最適化のHTMLの設定の「DNSプリフェッチ」はWordPressテーマ「AFFINGER6」がどうなっているのか分かりませんでしたが、記載通り「//www.google-analytics.com」と「//www.googletagmanager.com」の２つを設定しました。（WordPressテーマ「Lightning」はPageSpeed Insightsスコアが１００点なのでこちらは設定していません）
- クローラーをオンにできるかはサーバーによると記載されていたので、ロリポップのサポートに確認したところ、ロリポップでは「LiteSpeed Cache」の利用に制限は設けていないのでオンにできるとの事でしたので、こちらはオンにしてます。
- 「LiteSpeed Cache」導入後に「Contact Form 7」で以下のメッセージが表示されない不具合を発見しましたが、原因は「LiteSpeed Cache」ではなく「Invisible reCaptcha for WordPress」でした。以下に解決方法を記載します。
- 必須項目が未入力の時に出るメッセージ
「入力内容に問題があります。確認して再度お試しください。」（黄色枠） - 送信が完了した時に出るメッセージ
「ありがとうございます。メッセージは送信されました。」（緑枠）
Contact Form 7の不具合を解決する方法
「Contact Form 7」でメッセージが表示されない不具合の解決方法は以下の記事を参考にさせて頂きました。（こちらの記事がなければ永久に未解決状態でした。本当にありがとうございます。）
-
Contact Form 7 でメッセージが表示されない | ITO・BPO Outsourcing | 質の高いアウトソーシングを当たり前に
WordPressの国産プラグインであるContactForm7で、突然メッセージが表示されなくなったら試してほしいこと
boogaloo.jp
- 「reCaptcha by BestWebSoft」を導入すると「Contact Form 7」の不具合が解決します。
- 「LiteSpeed Cache」の影響か分かりませんが、「reCaptcha by BestWebSoft」の初期設定でWordPressのログインにreCaptchaを適用するとWordPressのログイン時にreCaptchaにはじかれてログインできなくなります。（「Chrome」でログイン画面を開いていましたが、かなり焦りました。試しに「Edge」でログイン画面を開いたらログインできたので、あわててWordPressのログインからreCaptchaをはずしました。）
Contact Form 7の不具合を解決できなかった方法
参考までに私が試して解決できなかった方法も載せておきます。最初から「reCaptcha by BestWebSoft」が入っていれば不具合はなかったのですが、私の場合「Invisible reCaptcha for WordPress」だったので解決方法が分かるまでかなり手こずりました。
原因が「Invisible reCaptcha for WordPress」と気づく前
上記解決方法の記事にたどり着く前は、「LiteSpeed Cache」導入後に不具合に気づいたので「LiteSpeed Cache」が原因だと思い込んで以下の方法を試しましたが解決できませんでした。
- LiteSpeed Cacheの設定の参考にさせて頂いた記事に記載のあったキャッシュの除外「URIs をキャッシュしない」に「^contact$」を設定してみる。
- LiteSpeed Cacheの設定を他のサイトで紹介されている設定に変更してみる。
- キャッシュ（サーバー、プラグイン、ブラウザ）を削除して、パーマリンクを更新してみる。
原因が「Invisible reCaptcha for WordPress」と気づいた後
上記解決方法の記事にたどり着いた後もその記事通りに「reCaptcha by BestWebSoft」を入れずに以下の方法を試したので解決できず、解決までに遠回りしてしまいました。
原因が「Invisible reCaptcha for WordPress」だと分かったので「Invisible reCaptcha for WordPress」を停止（「Contact Form 7」が正常に戻る）して以下の方法を試しました。
- 「Google reCAPTCHA V3」のキーをオーソドックスに「Contact Form 7」に直接設定してみる。
⇒この方法だと「メッセージの送信に失敗しました。後でまたお試しください。」（オレンジ枠）のメッセージが出て送信自体ができませんでした。（なぜか「Edge」だと送信できます） - 上記送信失敗のメッセージがオレンジ枠の場合、reCaptchaにスパム判定されているので「Google reCAPTCHA V3」のキーを再取得して「Contact Form 7」に再設定すると直ることがあると書かれた記事があったので試してみました。
⇒この方法だと一時的に「Contact Form 7」が正常に戻りますが、翌日には上記と同じ症状が出て送信できなくなっていました。（気づかぬうちに元通りは怖いです）
まとめ
最終的には「LiteSpeed Cache」で表示速度がアップ（SEOに有利）して「Contact Form 7」の不具合も直せたので良かったですが、かなり手こずりました。「LiteSpeed Cache」の導入を検討している方や「Contact Form 7」の不具合で困っている方のお役に立てればうれしいです。