reCAPTCHAをContact Form 7（お問い合わせフォーム）のみに読み込み制限をかける

会社のWebサイトやBlogを運営していく中で問い合わせ窓口が必要となってきます。会社のWebサイトであれば電話での問い合わせができますが個人のBlogなどでは、メールでのやり取りがメインになると思います。

WordPressのサイトであればプラグインContact Form 7でお問い合わせページを設置し簡単にお問い合わせフォームを作成可能。

しかし、お問い合わせフォームはスパムの標的になりやすく、大量のスパムメールが届くことがあるため、Contact Form 7と認証システムreCAPTCHAを導入している方が多いと思います。

問題となるのが、reCAPTCHA導入によってサイト全体が重くなってしまう。

reCAPTCHAのJS転送サイズは141.2KiBと他のJSに比べて読み込みに負荷がかかっている事がわかります。

▪PageSpeed Insights （パフォーマンス計測サイト）
https://pagespeed.web.dev/

reCAPTCHAは、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能で必須になります。

そこで、reCAPTCHAはサイト全体に適応するのではなく、お問い合わせフォームがあるページのみreCAPTCHAのJSを読み込ませるやり方について解説します。

Contact Form 7もお問い合わせページ以外でも読み込みまれているので、読み込みをお問い合わせページのみに制限する方法も追記しています。

サイトパフォーマンスの違い

「reCAPTCHAがある時のパフォーマンス」と「reCAPTCHAがない時のパフォーマンス」の違いになります。

サイトのパフォーマンスの数値が30と大きく違うことが確認できます。reCAPTCHAのJSがいかに重いかが実感できる数値ですね。

Contact Form 7の読み込み制限

Contact Form 7のCSSとJavaScriptの読み込みをお問い合わせページ（contact）のみに制限することで、サイトの高速化することができます。

子テーマのfunctions.phpに下記コードを入力します。

なお子テーマについてわからない方はこちらの記事をご確認ください。

子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。...

reCAPTCHAの制限コード

WordPress管理画面→外観→テーマファイルエディター→子テーマ（child）→functions.phpを選択。

「// コンタクトフォーム7の読み込みをcontactページのみ」の下にreCAPTCHA読み込み制限のコードを追記します。

functions.phpに下記コードをコピーペーストで設置。

// reCaptcha読み込み制限
function recaptcha_limitation() {
 if( ! is_page( 'contact' )){
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'recaptcha_limitation', 50 );

reCAPTCHAの方も同様にis_page( ‘contact’ )でスラッグがcontactになっているページのみにreCAPTCHAの読み込みをおこなう記述になります。

※お問い合わせフォームページのスラッグによって( ‘contact’ )を自身のパーマリンクに合わせて記述に変更してください。

2ページ以上の指定方法

2ページ以上指定したい場合は下記の通り指定することができます。

//コンタクトフォーム7の読み込みをcontactsページとrecruitページ
function load_recaptcha_js() {
	if ( ! is_page('contacts') && ! is_page('contact-confirm') && ! is_page('recruit') && ! is_page('recruit-confirm')) {
		wp_deregister_script( 'google-recaptcha' );
	}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

contactsページとrecruitページの別ページに指定したい場合は、下記の配列を追加します。

is_page(‘スラック名’)で指定できます。

読み込み制限の確認

reCAPTCHAが指定した問い合わせページのみに読み込まれているか確認します。

トップページはreCAPTCHAバッチは表示されていませんが、contactお問い合わせページには表示されているので、これで読み込み制限は完了です。

これでお問い合わせページの表示速度はそのままですが、それ以外のページ速度が改善されているはずです。

実際にPageSpeed Insights （パフォーマンス計測サイト）で計測をしてreCAPTCHAのJSが問い合わせページ以外で読み込みされていないか確認することをオススメします。

サイトの表示速度に関して、スマートフォンからWebサイトを閲覧することが圧倒的に増えてきており、このサイトも「デスクトップ 39%」に対して「モバイル 61%」となっています。

PCはスペックが高いため重いコードでもある程度高速でページ表示されますが、スマホはPCに比べてまだまだといったところで、高速化対応しないとページ読み込み速度が落ちてしまいます。

プラグインを使用した高速化は下記記事で詳しく解説していますので、合わせてご覧ください。

Webサイトの表示速度を改善するプラグイン【WEBページ高速化】Webサイトの動きプラグイン導入やデザインを追加する際に、どうしてもサイトが重くなりパフォーマンスが悪くなってしまい、Googleの評価とユーザーの離脱率が上がってしまいます。...

reCAPTCHAバッチの位置調整

reCAPTCHAバッチにCSSを適応させてない場合は所定の位置は右下に配置されます。

この位置だと「トップに戻るボタン」と被ってしまいます。

なので配置を左に配置するCSSを追加します。

配置は人それぞれだと思うので自身が配置したい場所でOKだと思います。

WordPress管理画面→外観→カスタマイズ→追加CSSに下記コードを入力。

.grecaptcha-badge {
    z-index: 1;
    left: 15px !important;
}

reCAPTCHAバッチを非表示

reCAPTCHAバッチの表示が不要な方は、非表示にすることも可能です。

非表示にする場合は、上の方で記述した制限記述で問題なく動作しているかの確認をおこなってから非表示にすることをオススメします。

.grecaptcha-badge {
    visibility: hidden;
}

reCAPTCHAをContact Form 7（お問い合わせフォーム）のみに読み込み制限の解説は以上になります。

Webページ読み込み速度は知識とテクニックが必要になってきますので、学び対応していくことです。