WordPress の Contact Form 7 のスパム対策に reCAPCHA を導入したところ、Google PageSpeed Insights の「改善できる項目」に 「使用していない JavaScript の削減」として「recaptcha__en.js」が表示されて困っていませんか？
これでは、無駄な JavaScript によって、ページの読み込み速度が遅くなって仕舞います。
今回は recaptcha__en.jsの対処方法をご紹介します。
recaptcha__en.js とは
「recaptcha__en.js」とは、Google reCAPTHA を有効にすると追加される、 reCAPCHA に必要な JavaScript です。
ただ、Contact Form 7 のインテグレーションで reCAPTCHA導入してしまうと、この JavaScript が全ページに表示され、問い合わせページではないページでも読み込まれるようになります。
recaptcha__en.js 問題とは
そのため、問合せページでないトップページなどの読み込みスピードを、Google PageSpeed Insights で計測すると、「recaptcha__en.js」が、使用していない JavaScript なので、削除するとページスピードの改善が見込めるという診断がでます。
それもそのはず、問い合わせフォームがあるページ以外では、「recaptcha__en.js」は必要のない JavaScript なのです。
無料プラグインでは解決できない
reCAPTCHA のバッジを問い合わせフォームのあるページ以外で消すのは、Invisible reCaptcha for WordPress というプラグインが有名でしたが、このプラグインはあくまでバッジを見えなくする（インビジブル）だけで、JavaScript を有効にしたり無効にしたりはできませんでした。また、長い間更新されておらず、PHP8.x にも対応してないので使うのも危険なプラグインです。
CAPTCHA 4WP や、Advanced Google reCAPTCHA などプラグインもありますが、無料で JavaScript の制御まで行うものはありません。
プラグインなしで行う
では、プラグイン無しで、お問い合わせフォームのあるページにのみ reCAPTCHA の JavaScript が有効になるようにしましょう。
Google reCAPTCHA の設定
・Google reCAPTCH に登録してサイトキー、シークレットキーを入手する。
・Contact Form 7 のお問い合わせ → インテグレーション → reCAPTCHA を選択し、サイトキー、シークレットキーを入力します。
・バックアップをしっかり取った上で、 functions.php に以下の内容を追記します。
// reCAPTCHAを問い合わせページのみ有効
function load_recaptcha_js() {
if ( ! is_page( 'XXXXX' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );
「XXXXX」の部分は、問い合わせページの URL の最後の部分を入力します。
「https://gift-by-gifted.com/inquiry/」が URL なら、「XXXXX」は「inquiry」になります。
まとめ
これで、サイトの各ページを確認してみましょう。
問い合わせページのみ reCAPTCHA バッジが表示されていると思います。
続いて、Google PageSpeed Insights でも問い合わせ以外のページを確認してみましょう、「使用していない JavaScript の削減」に「recaptcha__en.js」が表示されなくなったと思います。
これで、必要のない JavaScript が削除され、ページの読み込み速度が上がりました。
Contact Form 7 で reCAPCHA をご使用の方は、それほど手間ではないので設定をおすすめします。
