PageSpeed Insightsでスコア改善箇所を見つける方法

画像の軽量化や遅延読み込みなど基本的なことをクリアしてもスコアが上がらない場合に、素早く改善点を絞り込むためのシンプルな方法。

それはページの表示要素を削ったり戻したりして分析を繰り返すこと。

検証サイトを作成して分析を実施

さすがに本番サイトでそれをやるわけにはいかないので、本番と同様のデータを持ち同様の表示になる検証サイトを作って行う。

好きにいじれる検証サイトができたら

• 検証サイトのページの表示要素を削る
• PageSpeed Insights分析を実行
• 削った表示要素を戻して別の表示要素を削る
• PageSpeed Insights分析を実行

と繰り返して、大きくスコアが上がるところがあればそこが要改善点。

最初はヘッダー、フッター、サイドバー、メイン領域など大きな単位で削除して影響を測り、影響の大きかったブロックの中でまた表示要素を削ったり戻したりしながら範囲を絞っていくとよい。

完全保存したウェブページで簡易的な検証サイトを作る

本格的な検証サイトを作るのが難しい場合はブラウザ上で名前を付けて保存したHTML（画像やJS、CSSを含んだ完全保存）を適当なレンタルサーバーにでも上げてチェックするのでもOK。

サーバーレスポンスの遅さなどは再現できないが、HTMLやJavaScriptの問題でレイアウトシフトが起きていたりするのは見つけることができる。