LiteSpeed Cache導入とreCaptchaのContact Form 7不具合解決

SEOに影響するウェブサイトの表示速度。「LiteSpeed Cache」の導入で爆速（ロリポップ）にできたのと、あわせて「Contact Form 7」の不具合も解決することができましたので情報を共有します。

AFFINGER6のLiteSpeed Cache導入前、導入後

2022年5月12日、ロリポップから「ウェブサイトの速度が2倍になる「LiteSpeed Cache」が利用できるようになりました！」とのお知らせがありましたので、「LiteSpeed Cache」を導入してみました。

「LiteSpeed Cache」導入前もそこそこのスピードアップ対策は行ってましたが、モバイルのPageSpeed Insightsスコアはせいぜいいっても６０点台といったところでした。

それが「LiteSpeed Cache」導入後はモバイルでも８０～９０点台、時には１００点を打ち出すまでに表示速度が大幅にアップしました。

LightningのLiteSpeed Cache導入前、導入後

WordPressテーマ「Lightning」で作った下記ホームページにも「LiteSpeed Cache」を導入しましたので、こちらも参考に載せておきます。

もともとWordPressテーマ「Lightning」は名前の通り軽いので「LiteSpeed Cache」導入前からそこそこの表示速度を打ち出していましたが、「LiteSpeed Cache」導入後はなんとモバイル、パソコンともにPageSpeed Insightsスコア１００点をたたき出しました。（恐るべし）

LiteSpeed Cacheの設定方法

LiteSpeed Cacheの設定は以下の記事を参考にさせて頂きました。（こちらの記事のおかげで無事に設定することができました。本当にありがとうございます。）

• 記事に記載されている通りに設定しましたが、デザイン崩れもなく表示速度が大幅アップしました。（この後書きますが「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」でメッセージが表示されない不具合の解決方法は以下の記事を参考にさせて頂きました。（こちらの記事がなければ永久に未解決状態でした。本当にありがとうございます。）

• 「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」の不具合で困っている方のお役に立てればうれしいです。