reCAPTCHA v3の理解を深め特定のページだけ有効にする方法

WordPressサイトにContact Form 7のプラグイン経由でGoogleの「reCAPTCHA v3」を使用するとページの読み込み速度が大幅に遅くなることがあります。この影響と対策ついて詳しく説明します。

reCAPTCHA v3の仕組みと影響

JavaScriptの読み込み
reCAPTCHA v3は、ユーザーの行動を分析してスコアを計算するために、Googleのサーバーと通信するJavaScriptライブラリを必要とします。このスクリプトは外部から読み込まれるため、ページの読み込み時間に直接影響を与えます。特に、スクリプトが遅延なくロードされる必要がある場合、ページ全体のレンダリングが遅れることがあります。
外部リソースへの依存
reCAPTCHA v3の機能はGoogleのサーバーに依存しています。そのため、Googleのサーバーにアクセスするためのリクエストとレスポンスの時間がかかります。ネットワークの遅延やGoogleのサーバー側の応答時間が長い場合、これがページ全体の読み込み速度に悪影響を及ぼすことがあります。
複数リクエストの発生
reCAPTCHA v3は、ユーザーの行動を監視し、リアルタイムでスコアを計算するために複数のリクエストを発生させます。これにより、ネットワークの負荷が増加し、結果的にページの読み込み時間が長くなる可能性があります。
ブロッキングの問題
reCAPTCHA v3のスクリプトは、ページの読み込みプロセスにおいてブロッキングされることがあります。これは、スクリプトの読み込みが完了するまで他のリソースの読み込みが停止するためです。特に、他の重要なリソース（CSSや主要なJavaScriptファイル）よりも先に読み込まれる場合、ページ全体の表示が遅れることになります。

具体的な影響例

例えば、WordPressサイトにreCAPTCHA v3を実装した際、次のような影響が考えられます。

ページの初期表示が遅くなる
ユーザーがサイトにアクセスした際、reCAPTCHA v3のスクリプトが読み込まれるまでページの主要なコンテンツが表示されないことがあります。これにより、ユーザー体験が損なわれ、特に初回訪問者にとっては離脱率が高まる可能性があります。
フォーム送信の遅延
reCAPTCHA v3が導入されたコンタクトフォームやコメントフォームでは、ユーザーが入力を完了して送信ボタンを押した際に、スコアの計算と検証が行われます。このプロセスが遅延することで、フォーム送信が遅れることがあります。
モバイルデバイスでのパフォーマンス低下
モバイルデバイスでは、ネットワーク速度が遅い場合やデバイスの処理能力が低い場合、reCAPTCHA v3の読み込みと動作がさらに遅く感じられることがあります。これにより、モバイルユーザーのエクスペリエンスが特に悪化する可能性があります。

reCAPTCHA v3は、ユーザーの行動を分析し、スコアを計算することで、ボット対策として効果的ですが、その導入によるページ読み込み速度の低下は無視できない問題です。これを最小限に抑えるためには、非同期読み込みや遅延読み込みの技術を活用する、他の軽量なボット対策ツールを検討するなどの対策が必要です。

次にこの対策として特定のページのみreCAPTCHA v3を使用します。

対策方法

テーマファイルのfunctions.phpに次のコードを追加します。

add_action('wp_enqueue_scripts', function(){
    if ( ! is_page( '＜スラッグ名を指定＞' ) ) {
        wp_deregister_script( 'google-recaptcha' );
    }
}, 100);

上記のコード追加で該当するスラッグ名のページのみreCAPTCHA v3が有効となり、以外のぺージはreCAPTCHA v3が発動しない為、ページの読み込み速度への影響を大きく減らす事ができます。