こんにちは、ikuzo(いくぞう)です。
サイトスピードを計測できるGoogleのPageSpeed Insightsってありますよね。
以前、当サイトはパソコンに比べてモバイルのスコア（表示速度）がおもいっきり悪かったんです。
デスクトップのスコアが90前後なのに対し、モバイルのスコアはいつも40前後でした。
スコアが悪い一番の原因は「使用していないJavaScriptの削減」だったんですが、
この度あることをしたら、モバイルのスコアが難なく2倍以上になりました。
今回は私がやった「使用していないJavaScriptの削減」を改善する方法を紹介しますので、
同じ理由でモバイルのスコアが悪い方はぜひやってみてください。
「使用していないJavaScriptの削減」はプラグインで解決可能
「Googleが掲げる10の事実」をご存知でしょうか。
Googleの経営理念を示す10箇条ですが、その中の“遅いより速いほうがいい”というのは
「ユーザーを待たせることなく、なるべく早くコンテンツを表示させないさいね」ということです。
これまで当ブログのモバイルスコアは40前後だったものの、
表示されるのに2秒も3秒もかかるわけではないので、正直軽視していました。
しかし「使用していないJavaScriptの削減」は、簡単に解決できるプラグインがあったんです！
そのプラグインは“Flying Scripts”といいます。
Flying Scriptsは、JavaScriptを消去するのではなく、
JavaScriptの実行を遅らせることによって表示速度を改善、
すなわちPageSpeed Insightsのスコアが良くなります。
▲“Flying Scripts”と入力して検索してください
プラグイン「Flying Scripts」の設定方法
こちらがWordPressのプラグイン「Flying Scripts」の設定画面です。
Flying Scriptsの私が行った設定方法ですが、
PageSpeed Insightsで指摘された「使用していないJavaScriptの削減」の右側にある「」を押すと、
使用していないJavaScriptのURLが出てくるので、これをコピーしました。
このURLをメモ帳にすべて一旦貼り付けて
Flying Scriptsの「Include Keywords」に入力する文字を効くか効かないかを試しながらピックアップ、
その結果、私の場合は
Googleアナリティクスは“gtag”
Google reCAPTCHAは“recaptcha”
Googleアドセンスは「/」のあとから「.js」まで（2種類あり）
Twitterは“twitter”
の計5つを「Include Keywords」に入力すればいいということが分かりました。
このように上の5つを「Include Keywords」の欄へ改行しながら入力、
Timeout（JavaScriptの実行を遅らせる時間）は「5s」のままで、特に変更する必要はありません。
設定が終わったら“Save Changes”を押します。Flying Scriptsの設定はこれだけです。
「Flying Scripts」導入後、サイトの改善結果
Flying Scriptsを入れたあと、PageSpeed Insightsで改めて計測した結果が次の通りです。
モバイルのスコアは、プラグイン1つで爆上がり状態でした。
デスクトップも満点に近いスコアになりました。
プラグイン1つ入れるだけでこんなに高速化できるなら、もっと早くやるべきでした。
当然、PageSpeed Insightsの「改善できる項目」から「使用していないJavaScriptの削減」は消えています。
「Flying Scripts」を使う際の注意点
Flying Scriptsを使う際の注意点ですが、
Googleアナリティクスを遅延読み込みさせると、5s（5秒）以内にブラウザの「戻る」を押すか画面を閉じてしまった人はカウントされない可能性があります。
私のサイトでは、Flying Scriptsの導入後もアクセス数に特に変化は見られませんでしたが、
気になるようでしたら“gtag”だけは外すといいでしょう。
ページ読み込み速度を優先させるのか、正しいアクセス解析をとるのか、ここは二者択一で。
それとFlying Scriptsを使ったことによってページレイアウトが崩れてしまったら
Include Keywordsに入力した文字を一度全部消去して、ひとつずつ検証してみてください。
最後に
今回はプラグインひとつでモバイルのスコア（表示速度）が倍以上と大変良い結果になりました。
そういえば以前、PageSpeed Insightsで「次世代フォーマットでの画像の配信」を促されたこともありました。
そちらはプラグインの「EWWW Image Optimizer」で解決が可能です。
やり方はこちらの記事をご覧ください。
コメント