JavaScriptの実行を遅延させるプラグインFlying Scripts by WP Speed Mattersを使ってみたらPageSpeed Insightsの点数が99点に!
Flying Scripts by WP Speed Mattersプラグインを入れたことで、PageSpeed InsightsでGoogle先生にいつも指摘されていたGoogle AnalyticsとreCAPTCHAの重さが解消されました。
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ではうまく遅延してくれないようです。
まとめ
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を使うとContact Form 7からメールが送れない?
ということに偶然気づきました。。。。😱
なんでも、Flying Scriptsにrecaptchaを指定すると、Contact Form 7からメールが送れなくなるらしく、当サイトでもやはりそうでした。
対策として、Flying Scriptsの設定画面の「Disable on pages」の箇所にContact Form 7を埋め込んであるアドレスの末尾を指定することで、メール送信が可能になります。
しかし、メール送信は出来ても、各ページに設置してあるディスカッション(コメント欄)への書き込みも出来なくなるようです。
少なくとも私のサイトでは、かなり不安定で、書き込み出来るときもあるようですが、ほぼNG!という感じでした。
Flying Scriptsからrecaptchaを外すことで、メール及びコメント欄への書き込みは問題く出来るようになりますが、recaptchaを外してしまうと大して速度は上がらないので、結局Flying Scriptsは停止することにしました(コメント欄を使用していない方にはおすすめです)。
てか、ずっとメール送れなかったのかよ_| ̄|○
recaptchaを入れている方は注意して下さいね。
プラグイン無しでreCAPTCHAをメールフォームのみ有効にする方法
せっかく高速が売りのテーマ Luxeritas を入れているのに、遅いのは納得いかない。。。。と調べてみたところ、functions.phpにコードを記述すると速度が改善することが分かりました。
以下の方法は、Google reCAPTCHAをメールフォームのみに有効にする方法で、ディスカッション(コメント欄)では無効になるので、別途対策が必要になります。
※当サイトではSiteGuard WP Pluginの画像認証を使います(reCAPTCHA使用前は、SiteGuard WP Pluginの画像認証を使っていましたが、スパムはありませんでした)。
①SiteGuard WP Pluginのコメント欄の画像認証を有効にします。
これでディスカッション(コメント欄)に画像認証が有効になりました。
②reCAPTCHAを無効にします(メールフォームのインテグレーションはそのまま)。
③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で速度テストを行ったところ、投稿ページ及び固定ページの高速化を確認!!
メールフォームのページにはreCAPTCHAが効いているので「JavaScript の実行にかかる時間の低減 」部分にreCAPTCHAの文字がありますが、その他のページにはなく、高速化を確認できました。
もちろん、メールフォームからのメール送信も可能でした。
まとめのまとめ
セキュリティを高めるためにはGoogle reCAPTCHAは必要ですが、速度低下がネックでした。
しかし、functions.phpに一文を追加することで高速化が可能になります。
※コメント欄にはreCAPTCHAが効かなくなりますので、別途セキュリティー系のプラグイン(SiteGuard WP Pluginなど)を入れるなどの対策が別途必要になります(コメント欄を表示していない方はそのままでもOKです)。
※スパムに荒らされないように、コメントは承認制にしておくと良いでしょう(管理画面→設定→ディスカッション)。
※ただしreCAPTCHAを入れておいたほうが安全なのは言うまでもありません。
ディスカッション
コメント一覧
まだ、コメントがありません