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