お疲れ様です。ひよこです。
先日、会社の上司にGoogleのPageSpeed Insightsについて教えていただきましたので、早速やってみました。
前回はこちら。
【Blogを作る#7】Google Analyticsでアクセス状況を分析できるようにする
PageSpeed Insightsとは
Googleが提供しているツールの一つです。
サイトのURLを入力すると、表示スピードを点数で表示してくれます。
表示速度を改善するための情報も提供してくれます。携帯電話、デスクトップとそれぞれ計測項目が異なるようです。
実際に計測してみた
URLを入力するだけなので、早速やってみました。
※デスクトップは95点くらいだったので、省略します。
before
51点。意外と低いですね。パフォーマンス悪い。
改善できる項目
こんな感じで「これらを改善するといいですよ。」と表示されます。
今回は「使用していない JavaScript の削減」をやってみます。
使用していない JavaScript の削減
上の「使用していない JavaScript の削減」を選択すると表示項目が展開されます。こやつらがページを表示する際に読み込まれるから表示が遅いと言うことらしいので、アドバイス通りに読み込むタイミングを遅らせましょう。
JavaScriptの読み込みを遅らせる
なんか色々なプラグインがあるようですが、とりあえず有名っぽいFlying Scriptsを導入してみました。
有効化して、Settings画面を表示します。
①遅延させるJavaScriptを「Include Keywords」に指定します。
②遅延時間を「Timeout」に設定します。適宜調整します。
③「Save Changes」で変更を保存します。
さて、再度計測してみましょう。
after
51→77点になりました！
だいぶ点数が上がりましたね。
実際に表示してみる
実際にスマホでチェックしてみると、表示が早い！！
気をつける点
今回、適当にjsを読み込むタイミングを遅らせていますが、これらのjsはページ読み込みタイミングに必要なプログラムである可能性もあります。
必要なプログラムである場合、ページ表示が崩れてしまったり、何かしらの操作ができなくなってしまったり、不具合が発生する可能性があります。
その場合、Flying Scriptsに設定したjsを一旦全て削除して、1つずつ設定→保存、そして表示してみて問題なければ次のjsを追加で設定→保存→表示を確認を繰り返しましょう。
繰り返すうちに不具合が発生するjsが判別すると思いますので、そのjsは除外するようにしましょう。
また、ページごとにFlying Scriptsを無効にすることもできるようなので、このページはjsを読み込む必要があるとわかっている場合はFlying Scriptsの設定画面で「Disable on pages」に登録するようにしましょう。
今日はこんな感じです。
また書きます。