JavaScriptの実行を遅延させるプラグインFlying Scripts by WP Speed Mattersを使ってみたらPageSpeed Insightsの点数が99点に!

Flying Scripts by WP Speed MattersプラグインでAnalyticsとreCAPTCHAの実行を遅延させてみたらPageSpeed Insightsの点数が99点に

2022年4月17日

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

Flying Scripts by WP Speed MattersプラグインでAnalyticsとreCAPTCHAの実行を遅延させてみたらPageSpeed Insightsの点数が99点に


Flying Scripts by WP Speed Mattersとは

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

PageSpeed Insightsでいつも指摘されるのがJavaScript

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

 

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

Flying Scripts by WP Speed Mattersプラグインのインストール

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の使い方

Flying Scripts by WP Speed Mattersプラグインのインストール

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

Flying Scripts by WP Speed MattersプラグインでAnalyticsとreCAPTCHAの実行を遅延させてみた

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

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

 

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

Flying Scripts by WP Speed Mattersプラグインの導入でJavaScriptの警告が消えました


✅Flying Scripts by WP Speed Matters有効化前:
Flying Scripts by WP Speed Mattersプラグイン導入前の点数(PageSpeed Insights)


✅Flying Scripts by WP Speed Matters有効化後:
Flying Scripts by WP Speed Mattersプラグイン導入後の点数(PageSpeed Insights)

 

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

Flying Scripts by WP Speed Mattersプラグイン導入後

 

まとめ

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

 

アクセス解析の計測漏れなども特に発生していようですので問題ないと思います。

 

追記:twitterの遅延は出来ました

ツイッターを埋め込んだページも速度低下が起こりますが、Flying Scripts by WP Speed Mattersの設定画面のInclude Keywordsの部分にtwitterの文字を入れたところ、速度改善することが出来ました😃

Flying Scripts by WP Speed Mattersに設定画面(ツイッターの遅延も成功)

 

✅Flying Scripts by WP Speed Mattersの設定前:

ツイッターを埋め込んだページもFlying Scripts by WP Speed Mattersで速度改善に成功です(前)

 

✅Flying Scripts by WP Speed Mattersの設定後:

ツイッターを埋め込んだページもFlying Scripts by WP Speed Mattersで速度改善に成功です(後)

 

Flying Scripts by WP Speed Mattersプラグインはめっちゃ使えますね👍

Flying Scriptsを使うとContact Form 7からメールが送れない?

ということに偶然気づきました。。。。😱

Flying Scriptsを使うとContact Form 7からメールが送れない?①

なんでも、Flying Scriptsにrecaptchaを指定すると、Contact Form 7からメールが送れなくなるらしく、当サイトでもやはりそうでした。

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

Flying Scriptsを使うとContact Form 7からメールが送れない?に関する対応策

しかし、メール送信は出来ても、各ページに設置してあるディスカッション(コメント欄)への書き込みも出来なくなるようです。

Flying Scriptsにrecaptchaを指定するとコメント投稿も不安定になります

少なくとも私のサイトでは、かなり不安定で、書き込み出来るときもあるようですが、ほぼNG!という感じでした。

 

Flying Scriptsからrecaptchaを外すことで、メール及びコメント欄への書き込みは問題く出来るようになりますが、recaptchaを外してしまうと大して速度は上がらないので、結局Flying Scriptsは停止することにしました(コメント欄を使用していない方にはおすすめです)。

 

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

 

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

Flying Scriptsを使うとContact Form 7からメールが送れない?②

プラグイン無しでreCAPTCHAをメールフォームのみ有効にする方法

せっかく高速が売りのテーマ Luxeritas を入れているのに、遅いのは納得いかない。。。。と調べてみたところ、functions.phpにコードを記述すると速度が改善することが分かりました。

以下の方法は、Google reCAPTCHAをメールフォームのみに有効にする方法で、ディスカッション(コメント欄)では無効になるので、別途対策が必要になります。

※当サイトではSiteGuard WP Pluginの画像認証を使います(reCAPTCHA使用前は、SiteGuard WP Pluginの画像認証を使っていましたが、スパムはありませんでした)。

①SiteGuard WP Pluginのコメント欄の画像認証を有効にします。

SiteGuard WP Pluginの画像認証を有効にします①

SiteGuard WP Pluginの画像認証を有効にします②

これでディスカッション(コメント欄)に画像認証が有効になりました。

②reCAPTCHAを無効にします(メールフォームのインテグレーションはそのまま)。

Google reCAPTCHAを無効にします(メールフォームのインテグレーションはそのまま)
Luxeritasの場合

③functions.phpに以下を記述します。

// reCAPTCHAを問い合わせページのみで有効にする
add_action( 'wp_enqueue_scripts', function() {
if(is_page('<span style="color: #ff0000;">contact</span>')) return;
wp_deregister_script( 'google-recaptcha' );
}, 100);

上記の”contact”部分が、お問い合わせページURLになりますので適宜書き換えて下さい。

例:https://t-blog.tgr-guitar.com/contact

※Luxeritasの設定で無効化するだけでは効果がありませんでしたので記述が必要でした。

参考:
【Contact Form 7】エラーで送信できない

高速化に成功

作業後、PageSpeed Insightsで速度テストを行ったところ、投稿ページ及び固定ページの高速化を確認!!

functions.php記述前
作業前
functions.php記述後
作業後

メールフォームのページにはreCAPTCHAが効いているので「JavaScript の実行にかかる時間の低減 」部分にreCAPTCHAの文字がありますが、その他のページにはなく、高速化を確認できました。

PageSpeed Insightsの結果①

PageSpeed Insightsの結果②

もちろん、メールフォームからのメール送信も可能でした。

まとめのまとめ

セキュリティを高めるためにはGoogle reCAPTCHAは必要ですが、速度低下がネックでした。

しかし、functions.phpに一文を追加することで高速化が可能になります。

※コメント欄にはreCAPTCHAが効かなくなりますので、別途セキュリティー系のプラグイン(SiteGuard WP Pluginなど)を入れるなどの対策が別途必要になります(コメント欄を表示していない方はそのままでもOKです)。

※スパムに荒らされないように、コメントは承認制にしておくと良いでしょう(管理画面→設定→ディスカッション)。

ブログのコメント表示は承認制にしておくと良いでしょう。

※ただしreCAPTCHAを入れておいたほうが安全なのは言うまでもありません。

 

ブログ運営WordPress

Posted by Tsune