スパムメール対策として、【Invisible reCaptcha】を採用しています。
ところが最近、【Pagespeed Insights】にて「使用していないJavaScriptの削除」の項目に出てきてしまい、モバイルのLCPやモバイルスコアに影響が出ていることがわかりました。
そもそも、スパムメールってくるの?という疑念もあり、【Invisible reCaptcha】の効果と【Pagespeed Insights】の読込み速度対策を紹介します。
◆この記事でわかること
- 【Invisible reCaptcha】の効果
- 【Invisible reCaptcha】採用時の【Pagespeed Insights】対策方法
Invisible reCaptchaの効果
![Masayoshi](https://satopi72.com/wp-content/uploads/2020/09/p433.png)
お問い合わせは、【Contact Form 7】を使っています。
本サイトのテーマ【THE THOR】には、標準で【お問い合わせ】機能もありますが、スパムメール対策として【Invisible reCaptcha】とリンクできない為、【Contact Form 7】を使っています。
元々、サイトアクセスが少ないので、スパムメールなどは無縁でした。
![Masayoshiたじたじ](https://satopi72.com/wp-content/uploads/2020/08/p403.png)
そうはいっても、Wordpressでサイトを立ち上げる為には、サイトセキュリティーは大切です。
なので、早い時期から【Invisible reCaptcha】を導入していました。
一方で、【Pagespeed Insights】でモバイルスコアの伸びず、悩んでいました。
実際、スパムメールなどは、言うほど来ないのでは?という疑念もあり、一度【無効化】してみることにしました。
Invisible reCaptchaを【無効化】にしてみる
![Masayoshiがーん](https://satopi72.com/wp-content/uploads/2020/09/p434.png)
【Invisible reCaptcha】を【無効化】にすると、その日から、英語の勧誘メールが3~4通届くようになりました。
Gメールの場合、自動で迷惑メールに振り分けられるのですが、毎日確実に3~4通たまります。
このメールを【Invisible reCaptcha】が止めていたんだ・・・と、この時効果を確認しました。
Pagespeed Insightsの結果は?
![Masayoshiポイント2](https://satopi72.com/wp-content/uploads/2021/01/p503.png)
【Invisible reCaptcha】を【無効化】にすると、【Pagespeed Insights】のスコアは10ポイント程度あがりました!
読込み速度を邪魔していることは、確かですね。
あとは、この迷惑メールを我慢できるか?ですが・・・
数日で止まるかな?という淡い期待もむなしく、確実にたまっていきます。
この状態だと、正規にお問い合わせをいただいた方からのメールと区別が難しくなってきました。
やはり、読込み速度は犠牲にしても、【Invisible reCaptcha】を戻すことに。
Invisible reCaptchaを再度【有効化】した結果は?
![Masayoshiポイント2](https://satopi72.com/wp-content/uploads/2021/01/p503.png)
【Invisible reCaptcha】を再度【有効化】すると、その日から、迷惑メールがゼロになりました。
素晴らしい!
効果抜群です。
【Pagespeed Insights】のスコアも・・・悪化状態に戻りました(涙)。
やはり読込み速度対策をなんとかしたい・・・
Invisible reCaptcha採用時のPagespeed Insights対策方法
![Masayoshi](https://satopi72.com/wp-content/uploads/2021/02/p526.png)
【Pagespeed Insights】では、【使用していない JavaScript の削除】の項目に出てきます。
【Invisible reCaptcha】は、【Contact Form 7】だけで使っているのですが、全ページでJava Scriptが読み込まれている為に出る内容です。
なので、【Contact Form 7】意外では読み込まない設定をします。
【Contact Form 7】意外ではJSを読み込まない設定
![Masayoshiポイント2](https://satopi72.com/wp-content/uploads/2021/01/p503.png)
以下の内容を、子テーマの【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】にチェックを入れて下さい。
【THE THOR】の【functions.php】の場所は?
WordPressの編集画面左側、【外観】⇒【テーマエディター】
子テーマが選択されていることを確認して、【テーマの為の関数】をクリック。
すでに何か記載があるかもしれませんが、その下に適当に行を空けて、上記文を貼り付けます。
【ファイルを更新】で完了です。
※更新時にエラーが出る場合は、こちら↓の記事をチェックしてみてください。
THE THORで【追加CSS】や、【functions. php】などを更新する時、エラーが出る現象がありました。 エラーは「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」です。 […]
最後の確認
![Masayoshiポイント2](https://satopi72.com/wp-content/uploads/2021/01/p503.png)
【お問い合わせ】のページに【Invisible reCaptcha】のアイコンがあることを確認しましょう。
他のページに表示の不具合が無いことも確認して下さい。
問題なければ、【Pagespeed Insights】で計測してみましょう。
きっと上がっていると思います。
また、【使用していない JavaScript の削除】の欄に、【Invisible reCaptcha】の項目が無いことも確認しましょう。
まとめ
まとめです。
- 【Invisible reCaptcha】の効果は確実にあり、迷惑メールをシャットアウトしてくれる。
- 【functions.php】に【お問い合わせ】以外のページでJavaScriptを読み込まない設定をすると、【Pagespeed Insights】のスコアを上げられる。
【Pagespeed Insights】の読込み速度対応は、環境やテーマ、プラグインなどにより効果が変わるので、色々試すしかない感じです。
【Pagespeed Insights】はGoogleさん自身のソフトが不具合項目として上がってくることが、しばしばあります。
アドセンスなどもそうですね。
Googleさんの技術力をもってすれば、なんとか出来そうな気がしますね。
この対応だけで、2週間くらい悩みました。
なんとかして欲しいものです。(ちょっと愚痴でした)
最後まで御覧いただき、ありがとうございました。