読込阻止!!　reCAPTCHAとContact Form7　黄金コンビをシャッタァウト

なんかブログの読み込みが遅い。
使っていないJavaScriptを削減しろと言われる。
reCAPTCHAが原因っぽいのは把握した。
recaptcha__en.jsが消えねぇ、、、

なんかブログがもっさりしてんなーと思って色々調べた結果のまとめです。

当ブログはWordPressを使用しているので、その話になります。

やったことは次の通り。

PageSpeed Insightsで現状把握と結果確認
Contact Form 7とreCAPTCHAを必要なページ以外で読み込ませない

結果はこんな感じ。

参考にさせていただいたサイトは次の3つです。

Back 2 Nature 様： Contact Form 7のページ以外でJavaScriptとCSSを止める方法

株式会社RETVAL 様： Contact Form 7のreCAPTCHAを問い合わせページ以外で読み込ませないようにする方法

Ezoic Inc 様：How to improve site speed while using ReCaptcha

それでは、サクッとやり方からいきます。

導入とかガン無視です。

表示速度アップの為にやったこと

まずはしっかりバックアップを取りました。

これでミスっても安心です。

今回やWordPressに限らず、何事も変更を加える際はバックアップを取りましょう。ミスった時のダメージの差が天と地です。

バックアップを取ったら、次のコードをfunctions.phpに追加しました。

add_action( 'wp_enqueue_scripts', function() {
        if( !is_page('111111') ){
		wp_dequeue_style( 'contact-form-7' );
		wp_deregister_script( 'contact-form-7' );
		wp_deregister_script( 'google-recaptcha' );
		wp_deregister_script( 'google-invisible-recaptcha' );
	}
}, 100, 0);

Contact Form 7を使っているページのスラッグを”111111”の部分に記載します。

当ブログで言うと"contact"の部分。

https://take-big-step.com/contact/

実際に入れると、こんな感じ。

add_action( 'wp_enqueue_scripts', function() {
        if( !is_page('contact') ){
		wp_dequeue_style( 'contact-form-7' );
		wp_deregister_script( 'contact-form-7' );
		wp_deregister_script( 'google-recaptcha' );
		wp_deregister_script( 'google-invisible-recaptcha' );
	}
}, 100, 0);

やったことはこれだけです。

Contact Form 7を複数のページで使っている場合は、”111111','222222','333333"の部分に各スラッグを追加していきます。

add_action( 'wp_enqueue_scripts', function() {
	if( !is_page( array( '111111','222222','333333' ) ) ){
		wp_dequeue_style( 'contact-form-7' );
		wp_deregister_script( 'contact-form-7' );
		wp_deregister_script( 'google-recaptcha' );
		wp_deregister_script( 'google-invisible-recaptcha' );
	}
}, 100, 0);

ここからは、なんでこうなったのかを順番に回顧していきます。