PR

「invisible recaptcha」の不要なjavascriptの削減

WordPressに認証機能を導入できるプラグインとしてInvisible reCaptchaを導入していますが、「お問い合わせ」(contact form7)ページだけでなく、全ページにrecaptchaの「JavaScript」が読み込まれています。必要のない他のページにも読み込まれていると、サイトの速度低下にも繋がります。そこで「お問い合わせ」ページだけに「reCAPTCHA」を設置し、他のページには「JavaScript」を読み込ませないようします。

pagespeedinsightの改善できる項目

recaptcha__ja.jsが消えて通信量は5.57sだったものが、1.25sと激減しました。

スポンサーリンク

現象

GoogleSearchConsoleの「ウェブに関する主な指標」(モバイル)で、「改善が必要」と指摘されました。(CLSに関する問題:0.1超モバイル)

ウェブに関する主な指標(searchconsole)
スポンサーリンク

原因

pagespeedinsightで確認すると、原因の1つとして、「使用していないJavascriptの削減」が指摘されています。(「お問い合わせ」(contact form7)画面だけでなく、全ページにrecaptchaの「JavaScript」が読み込まれています。)

改善できる項目(pagespeedinsight)

対処

「お問い合わせ」ページにだけ「reCAPTCHA」を設置し、使用していない他のページには「JavaScript」を読み込ませないようにします。

  • 「Invisible reCaptcha」の無効化(停止)
  • 「reCaptcha」と「ContactForm7」の再連携
  • 「functions.php」の編集(コードを追加)

「Invisible reCaptcha」の無効化

初めに、「Invisible reCaptcha」のプラグインを無効化(停止)します。

プラグインの無効化(WordPress)

無効化のまえに、サイトキーと秘密キーを控えておきます。

サイト鍵、秘密鍵(invisiblerecaptcha)

「reCaptcha」と「Contact Form7」の再連携

「お問い合わせ」から「インテグレーション」を選択して、reCAPTCHAの「インテグレーションのセットアップ」をクリックします。

recaptcha(v3)のセットアップ(WordPress)

functions.phpの編集

追記するコードは以下のとおりで、
こちらの記事(Google reCAPTCHA V3 を任意ページのみに表示する方法)を参考にさせて頂きました。

子テーマのfunctions.phpに次のように記載します。

function load_recaptcha_js() {
 if ( ! is_page ( 'contct' ) ) {
  wp_deregister_script ( 'google-recpatcha' );
 }
}
add_action ( 'wp_enqueue_scripts' , 'load_recaptcha_js' , 100 );

フックの優先度を「100」にします。初期値(10)のままだと機能しない様です。
※私は固定ページのスラッグをバンチミスでcontactのところをcontctと入力しています。

子テーマのfunctions.phpの編集

後でわかったこと

reCAPTCHA のバッチを問い合わせページ以外で消すのは、Invisible reCaptchaが有名でしたが、このプラグインはあくまでバッジを見えなくする(インビジブル)だけで、JavaScript を有効にしたり無効としたりする制御を行うことはできませんでした。さらに、長い間更新されておらずPHP8.x にも対応してなかった為、次のようなエラーも発生していました。

現象

Invisible reCaptchaの設定を行う際にタブの全てが「設定」になってしまい、設定項目が正しく表示されない不具合に遭遇しました。

Invisible reCaptchaの設定

原因

Invisible reCaptchaに今回の不具合が発生する条件は、WordPressが動作しているサーバのPHPバージョンが8.0以上の場合です。PHP8.0の1つ前のバージョンPHP7.4に戻せば、発生しなくなります。が、PHP7.4はセキュリティサポートが2022年11月28日に終了しています。Invisible reCaptchaの代わりのプラグイン (reCaptcha by bestWebSoft)を見つけましたが、タイミングが悪く、公開停止となっていました。

reCaptcha by bestWebSoftの検索結果

対処

結果、invisible recaptchaを削除して、「reCaptcha」と「Contact Form7」の再連携後、functions.phpを編集してjavascriptを制御する方法で対処することが出来ました。