• このエントリーをはてなブックマークに追加

2020年04月06日(Mon)

PageSpeed Insights 24

PageSpeed Insights 満点チャレンジ:初回は24点。。。

PageSpeed Insights(ページスピードインサイト)とは、Webページの表示速度を計測するGoogle公式提供の無料SEOツールのようです。

たまたま見つけてしまったのですが、暇つぶしにコツコツ対策して100点満点を狙おうと思います。
とりあえず、初回は24点!まぁ、最近はサボって何もしてなかったので…しょうがない…

途中で気づいたのですが、モバイル版とパソコン版があるみたいで左上にあるタブで切り替え可能でした。パソコン版は87点と思いのほか高得点だったので、今回はこのままモバイルを中心に対策していきます。

対策1.オフスクリーン画像の遅延読み込み(+6点up)

画面に映っていない画像は映る位置までスクロールされたら読み込めということなので、Lazy Loader をインストールして対応し6点アップ!

結果:モバイル30点(6点up) / パソコン87点

対策2.レンダリングを妨げるリソースの除外

Autoptimize を使用してCSSやJSなどのリソースを軽量・最適化を試みる。

  • JavaScript コードの最適化
  • Aggregate JS-files?
  • CSS コードを最適化
  • Aggregate CSS-files?
  • インラインの CSS を連結
  • HTML コードを最適化
  • 連結されたスクリプト / CSS を静的ファイルとして保存
  • Minify excluded CSS and JS files?

上記の項目をチェックして更新

結果:モバイル32点(2点up) / パソコン94点(7点up)

対策3.オフスクリーン画像の遅延読み込み

EWWW Image Optimizer をインストールして対策を試みる
全ての画像をWebP形式に変換

※サーバーによってexec関数が使えない場合は設定変更が必要

結果:モバイル32点 / パソコン94点
ほぼ変化なし…

対策4.第三者コードの影響を抑えてください

読み込みで最も影響を与えているGoogle/Doubleclick AdsことGoogleAdSenseの対策を試みる

  • GoogleAdSenseのスクリプトタグをhtmlから削除する
  • GoogleAdSenseの読込みを遅延させるコードを記述する

結果:モバイル82点(50点up) / パソコン98点(4点up)

【参考Webサイト】

コメント(0件)

PageSpeed Insights 満点チャレンジ:初回は24点。。。に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

【ソーシャルボタン】


TOP