Invisible reCaptcha効果抜群!でもPagespeed Insights対策は必要!

Invisible reCaptchaの効果

 

Masayoshi6スパムメール対策として、【Invisible reCaptcha】を採用しています。

ところが最近、【Pagespeed Insights】にて「使用していないJavaScriptの削除」の項目に出てきてしまい、モバイルのLCPやモバイルスコアに影響が出ていることがわかりました。

そもそも、スパムメールってくるの?という疑念もあり、【Invisible reCaptcha】の効果と【Pagespeed Insights】の読込み速度対策を紹介します。

◆この記事でわかること

  • 【Invisible reCaptcha】の効果
  • 【Invisible reCaptcha】採用時の【Pagespeed Insights】対策方法
スポンサーリンク

Invisible reCaptchaの効果

プラグイン

 

Masayoshi
Masayoshi
【Invisible reCaptcha】は、サイトセキュリティーの為に採用しました。
お問い合わせは、【Contact Form 7】を使っています。

本サイトのテーマ【THE THOR】には、標準で【お問い合わせ】機能もありますが、スパムメール対策として【Invisible reCaptcha】とリンクできない為、【Contact Form 7】を使っています。

元々、サイトアクセスが少ないので、スパムメールなどは無縁でした。

Masayoshiたじたじ
Masayoshi
というか、問い合わせ自体も無縁でした(汗)。

 

そうはいっても、Wordpressでサイトを立ち上げる為には、サイトセキュリティーは大切です。

なので、早い時期から【Invisible reCaptcha】を導入していました。

一方で、【Pagespeed Insights】でモバイルスコアの伸びず、悩んでいました。

実際、スパムメールなどは、言うほど来ないのでは?という疑念もあり、一度【無効化】してみることにしました。

Invisible reCaptchaを【無効化】にしてみる

Masayoshiがーん
Masayoshi
あらら・・・迷惑メールが増えていく・・・

【Invisible reCaptcha】を【無効化】にすると、その日から、英語の勧誘メールが3~4通届くようになりました。

Gメールの場合、自動で迷惑メールに振り分けられるのですが、毎日確実に3~4通たまります。

このメールを【Invisible reCaptcha】が止めていたんだ・・・と、この時効果を確認しました。

Pagespeed Insightsの結果は?

Masayoshiポイント2
Masayoshi
10ポイント程度UP!

【Invisible reCaptcha】を【無効化】にすると、【Pagespeed Insights】のスコアは10ポイント程度あがりました!

10ポイント程度アップ

読込み速度を邪魔していることは、確かですね。

あとは、この迷惑メールを我慢できるか?ですが・・・

数日で止まるかな?という淡い期待もむなしく、確実にたまっていきます。

この状態だと、正規にお問い合わせをいただいた方からのメールと区別が難しくなってきました。

やはり、読込み速度は犠牲にしても、【Invisible reCaptcha】を戻すことに。

 

Invisible reCaptchaを再度【有効化】した結果は?

Masayoshiポイント2
Masayoshi
迷惑メールシャットアウト効果は絶大!

【Invisible reCaptcha】を再度【有効化】すると、その日から、迷惑メールがゼロになりました。

素晴らしい!

効果抜群です。

【Pagespeed Insights】のスコアも・・・悪化状態に戻りました(涙)。

やはり読込み速度対策をなんとかしたい・・・

Invisible reCaptcha採用時のPagespeed Insights対策方法

Masayoshi
Masayoshi
色々調べて試した結果、効果があった方法の紹介です。

【Pagespeed Insights】では、【使用していない JavaScript の削除】の項目に出てきます。

Pagespeed insightsの指摘事項

【Invisible reCaptcha】は、【Contact Form 7】だけで使っているのですが、全ページでJava Scriptが読み込まれている為に出る内容です。

なので、【Contact Form 7】意外では読み込まない設定をします。

【Contact Form 7】意外ではJSを読み込まない設定

Masayoshiポイント2
Masayoshi
以下は、参考になった設定の引用です。

以下の内容を、子テーマの【functions.php】にコピペします。

2行目【if( ! is_page(57))】の【57】は、【Contact Form 7】で使っている固定ページ【お問い合わせ】のIDです。

function dc_dq_style_script() {
if( ! is_page(57)){
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_script( 'google-invisible-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'dc_dq_style_script' );

固定ページ【お問い合わせ】のIDの調べ方【THE THOR】の場合

WordPressの編集画面の左側、【固定ページ】をクリック。

【お問い合わせ】のページの【ID】欄の数値になります。

固定ページのID確認場所

【ID】が表示されていない方は、右上の【表示タブ】をクリックし、【ID】にチェックを入れて下さい。

ID表示方法

【THE THOR】の【functions.php】の場所は?

WordPressの編集画面左側、【外観】⇒【テーマエディター】

子テーマが選択されていることを確認して、【テーマの為の関数】をクリック。

すでに何か記載があるかもしれませんが、その下に適当に行を空けて、上記文を貼り付けます。

【ファイルを更新】で完了です。

functions.php画面

※更新時にエラーが出る場合は、こちら↓の記事をチェックしてみてください。

関連記事

  THE THORで【追加CSS】や、【functions. php】などを更新する時、エラーが出る現象がありました。 エラーは「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」です。 […]

更新エラーの対策

 

最後の確認

Masayoshiポイント2
Masayoshi
最後の確認をします。

【お問い合わせ】のページに【Invisible reCaptcha】のアイコンがあることを確認しましょう。

お問い合わせページの確認

他のページに表示の不具合が無いことも確認して下さい。

問題なければ、【Pagespeed Insights】で計測してみましょう。

きっと上がっていると思います。

また、【使用していない JavaScript の削除】の欄に、【Invisible reCaptcha】の項目が無いことも確認しましょう。

 

まとめ

Masayoshi6まとめです。

  • 【Invisible reCaptcha】の効果は確実にあり、迷惑メールをシャットアウトしてくれる。
  • 【functions.php】に【お問い合わせ】以外のページでJavaScriptを読み込まない設定をすると、【Pagespeed Insights】のスコアを上げられる。

【Pagespeed Insights】の読込み速度対応は、環境やテーマ、プラグインなどにより効果が変わるので、色々試すしかない感じです。

【Pagespeed Insights】はGoogleさん自身のソフトが不具合項目として上がってくることが、しばしばあります。

アドセンスなどもそうですね。

Googleさんの技術力をもってすれば、なんとか出来そうな気がしますね。

この対応だけで、2週間くらい悩みました。

なんとかして欲しいものです。(ちょっと愚痴でした)

最後まで御覧いただき、ありがとうございました。