PageSpeed Insights(ページスピードインサイト)とは、Webページの表示速度を計測するGoogle公式提供の無料SEOツールのようです。
たまたま見つけてしまったのですが、暇つぶしにコツコツ対策して１００点満点を狙おうと思います。
とりあえず、初回は２４点！まぁ、最近はサボって何もしてなかったので…しょうがない…
途中で気づいたのですが、モバイル版とパソコン版があるみたいで左上にあるタブで切り替え可能でした。パソコン版は87点と思いのほか高得点だったので、今回はこのままモバイルを中心に対策していきます。
対策１．オフスクリーン画像の遅延読み込み(+6点up)
画面に映っていない画像は映る位置までスクロールされたら読み込めということなので、Lazy Loader をインストールして対応し６点アップ！
結果：モバイル３０点(６点up) / パソコン８７点
対策２．レンダリングを妨げるリソースの除外
Autoptimize を使用してCSSやJSなどのリソースを軽量・最適化を試みる。
- JavaScript コードの最適化
- Aggregate JS-files?
- CSS コードを最適化
- Aggregate CSS-files?
- インラインの CSS を連結
- HTML コードを最適化
- 連結されたスクリプト / CSS を静的ファイルとして保存
- Minify excluded CSS and JS files?
上記の項目をチェックして更新
結果：モバイル３２点(２点up) / パソコン９４点(７点up)
対策３．オフスクリーン画像の遅延読み込み
EWWW Image Optimizer をインストールして対策を試みる
全ての画像をWebP形式に変換
※サーバーによってexec関数が使えない場合は設定変更が必要
結果：モバイル３２点 / パソコン９４点
ほぼ変化なし…
対策４．第三者コードの影響を抑えてください
読み込みで最も影響を与えているGoogle/Doubleclick AdsことGoogleAdSenseの対策を試みる
- GoogleAdSenseのスクリプトタグをhtmlから削除する
- GoogleAdSenseの読込みを遅延させるコードを記述する
結果：モバイル８２点(５０点up) / パソコン９８点(４点up)