JavaScriptの実行を遅延させるプラグインFlying Scripts by WP Speed Mattersを使ってみた

Flying Scripts by WP Speed Mattersプラグインを入れたことで、PageSpeed InsightsでGoogle先生にいつも指摘されていたGoogle AnalyticsとreCAPTCHAの重さが解消されました。しかし思わぬ弊害も。。。

Flying Scripts by WP Speed Mattersとは
Flying Scripts by WP Speed Mattersの使い方
まとめ
- 追記：Flying Scriptsを使うとContact Form 7からメールが送れない？
- functions.phpにコードを追記すれば完璧！！
Cocoonの設定
この記事を読んでいるあなたにおすすめ

Flying Scripts by WP Speed Mattersとは

PageSpeed Insightsで運営サイトのページの速度を計測すると、いつも引っかかるのがサイトに埋め込んでいるアナリティクス（Analytics）とreCAPTCHAのタグ（使用していないJavaScriptの削減）。

アナリティクス（Analytics）とは、Google提供のアクセス解析ツールで、reCAPTCHAは同じくGoogle提供の、メールフォームやブログのコメント欄で動作するスパム判定ツールです。

ともに必須とも言える優秀なツールなので外すことは考えていないのですが、この重さだけは何とかならないものかと思っていたら、Flying Scripts by WP Speed MattersというWordPress用のプラグインを使えば良いということがわかりました。

Flying Scripts by WP Speed Mattersというのは、JavaScriptのプログラム実行を遅延させることでページの読み込みを速くしましょうというツールです。

Flying Scripts by WP Speed Mattersを入れないと、PageSpeed InsightsでこのようにAnalyticsやreCAPTCHAが遅いから何とかしなさい！とGoogle先生にいつも指摘されます😭。

Flying Scripts by WP Speed Mattersの使い方

Flying Scripts by WP Speed Mattersをインストールし、有効化した後に、設定画面のInclude Keywordsの部分にPageSpeed Insightsで指摘されたJavaScriptのキーワードを入力します。

多くのサイトでは.jsまで書いていますが、私の環境では.jsまで入れるとうまく遅延処理しれくれなかったので、.jsを除外したキーワードのみを記述したところ、ちゃんと動作してくれるようになりました。

reCAPTCHAは文字通りGoogle reCAPTCHAで、gtagはGoogleAnalyticsのタグです。

設定後、再度PageSpeed Insightsを実行してみると、JavaScriptの項目が消え、携帯電話の点数も、66点から99点まで上昇😃

✅Flying Scripts by WP Speed Matters有効化前：

✅Flying Scripts by WP Speed Matters有効化後：

その他ページを重くする要因として、同じくYoutube動画の埋め込みがあるのですが、Youtubeに関してはFlying Scripts by WP Speed Mattersではうまく遅延してくれないようです。

埋め込んだYoutube動画を軽くするプラグイン「WP YouTube Lyte」を入れてみた！効果は？

まとめ

PageSpeed InsightsでJavaScriptの警告が出るという方はFlying Scripts by WP Speed Mattersの導入を検討してみてはいかがでしょう。

アクセス解析の計測漏れなども特に発生していようですので問題ないと思います。Flying Scripts by WP Speed Mattersプラグインはめっちゃ使えますね👍

追記：Flying Scriptsを使うとContact Form 7からメールが送れない？

と思ったのですが、Flying Scriptsを使うとContact Form 7からメールが送れないということに偶然気づきました。。。。😱

対策としては、Flying Scriptsの設定画面の「Disable on pages」の箇所にContact Form 7を埋め込んであるアドレスのURLを指定することで、メール送信が可能になります。

しかし、メール送信は出来ても、各ページに設置してあるディスカッション（コメント欄）への書き込みも出来なくなるようで、少なくとも私のサイトでは、かなり不安定で、書き込み出来るときもあるようですが、ほぼNG！という感じでした。

※コメント欄を閉じている方は問題ありません。

【備忘録】メールフォームにリファラー（遷移元URL）情報を添付する方法！

ブログのコメント欄は、キャッシュプラグインとの相性が悪く、結局、閉じることにしました。しかし、それだけでは寂しいので、メールフォーム（Contact Form 7）を活用して、どのページからメールが送られたのかを把握できるようにしてみました...

てか、ずっとメール送れなかったのかよ＿|￣|○

Flying ScriptsからreCAPTCHAを外せば、メール及びコメント欄への書き込みは問題く出来るようになりますが、reCAPTCHAを外してしまうと速度が上がらず意味がなくなるので、結局Flying Scriptsは停止し、Google reCAPTCHAはメールフォームのみで使うことにしました。

コメント欄のスパム対策は「SiteGuard WP Plugin」の画像認証で可能なので。

recaptchaを入れている方は注意して下さいね。

functions.phpにコードを追記すれば完璧！！

ただし、コメント欄で reCAPTCHAを無効にしても、メールフォームで reCAPTCHA有効にしていると、若干の速度低下が起こります。その場合「functions.php」に以下のコードを追記すればOKです。

// reCAPTCHAを問い合わせページのみで有効にする
add_action('wp_enqueue_scripts', function () {
if (!is_page('contact')) {
if (wp_script_is('wpcf7-recaptcha', 'enqueued')) {
wp_dequeue_script('wpcf7-recaptcha');
}
if (wp_script_is('google-recaptcha', 'enqueued')) {
wp_dequeue_script('google-recaptcha');
}
}
}, 100);

※このコードはChatGPTに書いてもらったものですが、正常に動作しています。functions.php を書き間違えると、WordPress そのものが動作しなくなるためご注意ください。

参考：
解決済み！functions.phpをいじったらサイトの画面が真っ白になりアクセス不能に