ワードプレス

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のネットワーク通信量
reCAPTCHAのネットワーク通信量

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

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

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

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

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

reCAPTCHAがあるページ
reCAPTCHAがあるページ
reCAPTCHAがないページ
reCAPTCHAがないページ

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

Contact Form 7の読み込み制限

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

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

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

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

reCAPTCHAの制限コード

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

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

reCAPTCHA読み込み制限
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とスマホ

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

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

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

reCAPTCHAバッチの位置調整

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

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

reCAPTCHAバッチ位置
reCAPTCHAバッチ位置

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

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

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

.grecaptcha-badge {
    z-index: 1;
    left: 15px !important;
}
reCAPTCHAバッチ左配置
reCAPTCHAバッチ左配置

reCAPTCHAバッチを非表示

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

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

.grecaptcha-badge {
    visibility: hidden;
}

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール