reCAPTCHAを導入してから、PageSpeed Insightsのスコアが急に下がった。そんな経験はありませんか。
原因はreCAPTCHA v3の設計にあります。v3はフォームだけでなくサイト全体でユーザーの行動を観察し、人間かボットかを判定する仕組みです。そのため、すべてのページにJavaScriptが読み込まれます。
reCAPTCHAの読み込みをフォームページだけに限定するだけで、モバイルスコアが20ポイント以上改善するケースもあります。この記事では、Contact Form 7を例に、速度低下を解消する3つの方法を紹介します。
reCAPTCHAが重い原因は「全ページでの行動観察」
reCAPTCHA v3は、従来のチェックボックス式（v2）とは設計思想が異なります。ページ上でのマウスの動き、スクロール、クリックといったユーザー行動を継続的に観察し、そのパターンからボットかどうかをスコアリングします。精度を高めるために、フォームページだけでなくサイト内の全ページでスクリプトが動作する設計です。
具体的には、Googleの外部サーバー（google.comやgstatic.com）へ複数のリクエストが発生します。これらがブラウザのメインスレッドを占有し、PageSpeed Insightsでは「サードパーティコードの影響を抑えてください」の項目でスコアを下げます。
スマートフォンはPCよりJavaScriptの処理能力が低いため、モバイルスコアへの影響がとくに大きくなります。モバイルスコアが20〜30ポイント低下したという報告もWordPressコミュニティで複数見られます。
自分のサイトへの影響を確認するには、PageSpeed Insightsの診断結果で「サードパーティコードの影響を抑えてください」の項目を探してください。「診断」セクションの中にあります。項目を展開して、recaptcha関連のリクエストが表示されていれば、それが速度低下の原因です。
対策1 お問い合わせページだけにreCAPTCHAを限定する
お問い合わせページ以外でreCAPTCHAの読み込みを止める方法です。サイト全体の速度に直接効くので、最初に試してください。
Contact Form 7はreCAPTCHA v3の仕様に沿って全ページにスクリプトを出力する設計です。バグではなく仕様なので、読み込みページを絞るには自分で制御する必要があります。方法は2つあります。
functions.phpで限定する
子テーマのfunctions.phpに以下を追加します。
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}, 100 );
'contact' はお問い合わせページのスラッグに置き換えてください。スラッグは管理画面の「固定ページ」→ 該当ページの「編集」→ パーマリンク設定欄で確認できます。
スラッグが日本語のままになっている場合は、英数字に変更しておくとコードがシンプルになります。複数ページに適用したい場合は is_page( array( 'contact', 'entry' ) ) のように配列で指定します。
プラグインで限定する
PHPの編集に不安がある場合は、プラグイン「Invisible reCaptcha for WordPress」で同じことができます。
設定手順は以下のとおりです。
- 「プラグイン」→「新規追加」で「Invisible reCaptcha」と検索し、インストール・有効化する
- Contact Form 7側のreCAPTCHA統合を解除する（「お問い合わせ」→「インテグレーション」→ reCAPTCHAの「インテグレーションのセットアップを解除」をクリック）
- 「設定」→「Invisible reCaptcha」を開き、Google reCAPTCHAのサイトキーとシークレットキーを入力する
- 「WordPress」タブで、ログインフォームなど保護したい項目にチェックを入れる
- 「Contact Forms」タブで「Enable Protection for Contact Form 7」にチェックを入れる
- 保存する
この方法なら、reCAPTCHAはフォームが設置されたページだけで動作します。
手順2のContact Form 7側の解除を忘れると、reCAPTCHAが二重に動作して競合エラーが起きます。必ず先に解除してください。
また、Invisible reCaptcha for WordPressは更新頻度が高くありません。インストール前に、WordPress公式プラグインディレクトリの「最終更新日」と「検証済み最新バージョン」を確認してください。自分のWordPressバージョンと互換性がなければ、functions.phpでの対応を選びましょう。
設定後の動作確認
確認するポイントは2つです。
- お問い合わせページでフォーム送信が正常にできること
- それ以外のページでreCAPTCHAが読み込まれていないこと
ブラウザの開発者ツール（F12キー）で「Network」タブを開き、「recaptcha」でフィルタリングすれば、リクエストの有無がひと目でわかります。
お問い合わせページだけに限定できたら、次はそのページ自体の速度も改善しましょう。
対策2 reCAPTCHAを遅延読み込みする
対策1でお問い合わせページに限定しても、そのページではreCAPTCHAのスクリプトが初期表示時に読み込まれています。フォームページの速度も改善したいなら、遅延読み込みを追加してください。
Flying Scriptsプラグインでの設定手順
おすすめはFlying Scriptsです。
- 「プラグイン」→「新規追加」でFlying Scriptsをインストール・有効化
- 「設定」→「Flying Scripts」を開く
- 「Include Keywords」に
recaptchaと入力 - 「Timeout」を5秒に設定
- 保存
この設定で、reCAPTCHAのJavaScriptはページ表示直後ではなく、ユーザーがスクロールやクリックなどの操作を始めたタイミングで読み込まれます。PageSpeed Insightsは初期表示の速度を評価するので、スコアが改善します。
Include Keywordsには recaptcha だけを入力してください。他のキーワードを追加すると、意図しないスクリプトまで遅延して表示が崩れる原因になります。
対策1と組み合わせれば、サイト全体の速度改善とフォームページの速度向上を両立できます。reCAPTCHAの速度影響を完全にゼロにしたい場合は、次の対策3を検討してください。
対策3 reCAPTCHA以外のスパム対策に切り替える
reCAPTCHAによる速度低下を完全になくしたいなら、別のスパム対策に切り替える方法があります。reCAPTCHA v2への変更も含め、主な選択肢を比較します。
| 方法 | 速度への影響 | スパム検出精度 | 費用 | 備考 |
|---|---|---|---|---|
| Akismet | なし（サーバーサイド処理） | 高い | 商用サイトは有料 | WordPress標準バンドル |
| Honeypot for CF7 | なし（隠しフィールド） | 中程度 | 無料 | 高度なボットには突破される |
| reCAPTCHA v2 | フォームページのみ | 高い | 無料 | ユーザーに操作を求める |
Akismetは、WordPress標準のスパム対策プラグインです。スパム判定をサーバーサイドで行うため、JavaScriptの読み込みが発生しません。検出精度も高く、速度と機能を両立できます。ただし商用サイトでは有料プランが必要です。
Honeypot for Contact Form 7は、人間には見えない隠しフィールドを設置し、そこに入力があればボットと判定する仕組みです。JavaScriptを使わないので速度への影響はゼロ。ただし、隠しフィールドを無視できる高度なボットには突破されます。
reCAPTCHA v2は、フォームが設置されたページだけで動作するので、v3のような全ページ読み込みは起きません。ただしチェックボックスや画像認証の操作をユーザーに求めるため、フォームの離脱率がわずかに上がる可能性があります。Contact Form 7でv2を使うには「reCaptcha v2 for Contact Form 7」などの別プラグインが必要です。
どれを選ぶべきか。スパムが週に数件程度の個人サイトなら、ハニーポットだけで十分です。日常的にスパムが届く商用サイトなら、Akismetとハニーポットの併用が堅実でしょう。
まとめ
reCAPTCHA v3が重いのは、全ページでユーザー行動を観察する設計が原因です。
- まずはお問い合わせページだけへの限定で、サイト全体の速度を改善する
- 遅延読み込みを追加して、フォームページの表示も速くする
- 速度への影響をゼロにしたいなら、Akismetやハニーポットに切り替える
最初の一歩は対策1です。functions.phpへの数行の追加で、PageSpeedスコアの改善を実感できるはずです。
