「reCAPTCHA」の設定で、表示速度が遅くなってしまった場合の対処法

「reCAPTCHA」の設定で、表示速度が遅くなってしまった場合の対処法

2022年2月17日

「reCAPTCHA」を設定したら、
 サイトの表示速度が遅くなってしまった、、
どうすればいいんだろう?

こんなお悩みを解決する記事です。


問合せフォームからのスパム防止の為、
「reCAPTCHA」
を設定した後、サイトのペー表示が極端に遅くなってしまいます。

原因としては、
「reCAPTCHA」のスクリプト

 全ページで読み込まれてしまう
ことに起因しています。

ですので、対処法としては、
 対象となるページのみに、「reCAPTCHA」のスクリプトを読みこませる
という方法になります。

問合せページのみに「reCAPTCHA」のスクリプトを読みこませる処理をすればよいでしょう。

設定内容は、下記サイトから引用しています。

https://himpotan.net/2021/08/12/cf7_recaptha_javascript/
「reCAPTCHA」のJavaScriptでページの表示速度が遅くなっている場合の解決方法。
nowaki.work
スポンサーリンク

設定内容

設定の際には、
 phpファイル
にスクリプトを追記します。

phpファイルをさわる場合、間違えると、画面が真っ白になるなどのリスクがありますので、必ず、
 データのバックアップ
をとるとともに、
 自己責任
で対応しましょう。

phpファイルに記載する内容は、下記となります。
※スクリプトは、上記サイトから引用しています。

問合せフォームのURLが、
 サイトのドメイン/contact
の場合、下記内容で記載します。

//reCAPTCHA JS読み込みをコンタクトページに限定
function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );

問合せページのURLは、状況に応じて、修正します。

スクリプト内の
 ( ! is_page( ‘contact‘ ) )

contact
の箇所を修正します。

また、複数ページの場合は、下記スクリプトとなります。

//reCAPTCHA JS読み込みを指定したページだけにする
function load_recaptcha_js() { 
if ( ! is_page( array('スラッグ01','スラッグ02','スラッグ03') ) ) {//フォーム設置ページのスラッグ 
wp_deregister_script( 'google-recaptcha' ); 
} 
} 
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );

phpファイルを編集する場所

phpファイルは、
 管理メニュー > 外観 > テーマエディターファイル

の画面から、
 phpファイル
を選択して、編集します。

【補足】マークの位置を調整する

「reCAPTCHA」マークを消すのではなく、
 位置を調整する
場合は、追加CSSで、下記スクリプトを設定します。

.grecaptcha-badge {
  bottom: 80px !important;
}

スクリプトは、下記サイトから引用しています。

「Contact Form 7」を使ってサイトに問い合わせフォームを表示しているんですが、最新バージョンにアップデートして設定を済ませたら何やらサイトの右下にロ…
fantastech.net

以上、「「reCAPTCHA」の設定で、表示速度が遅くなってしまった場合の対処法」についての説明でした。