「使用していないjavascriptの削減」(invisible recaptcha)

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

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

現象
原因
対処
後でわかったこと

現象

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

原因

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

対処

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

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

「Invisible reCaptcha」の無効化

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

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

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

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

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と入力しています。

後でわかったこと

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

現象

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

原因

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