PageSpeed Insightsでサイトの改善に取り組んでみた話
投稿日: 2025-09-20
こんにちは、Webディレクターの渡邉です。今回は、 PageSpeed Insights（PSI）で指摘された問題を改善した経験談 を書きたいと思います。なかなか数字が上がらず苦労しました。。「なぜ必要だったのか」「どう改善したのか」を時系列で書いて記録していきたいと思います。 参考にしていただけたら嬉しいです。
1. 改善前の状況
PSIでサイトを診断したところ、以下の問題が見つかりました。
- CLS（レイアウトシフト）が大きい：合計1.0以上
- 画像が重く、LCP（最大コンテンツ描画）が遅い
- ページ表示時にFOUC（文字のチラつき）が発生
- Font Awesomeが遅れて読み込まれ、アイコンが消える瞬間がある
- ロゴの表示が遅く、ファーストビューに影響
- 記事数が増えると記事一覧の読み込みが遅くなる懸念
2. 改善の流れ（時系列）
① レイアウトシフト（CLS）の改善
画像タグに
width
と
height
を明示。これにより読み込み前からスペースが確保され、CLSが「1.0 → 0.01」に改善しました。
② 画像の最適化
jpg/pngをWebPに変換し、大きすぎる画像は用途に応じて縮小。結果、モバイルスコアが約15点改善しました。
③ FOUC（フォウク）の改善
CSSを同期読み込みに変更し、ページ表示時の文字チラつきを解消。安定感が増しました。
④ Font Awesome の高速化
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
を追加し、CDNへの接続を事前確立。アイコンの表示遅延がなくなりました。
⑤ ロゴ画像の優先読み込み
<link rel="preload" as="image" href="images/logo.webp" />
を設定。ロゴの表示が早くなり、LCPの数値が改善。
⑥ 記事一覧をJSON化
Node.jsを使い、記事一覧はHTMLからの読み込みを止め、JSON読み込みに変更。記事数が増えても表示速度が落ちにくく、保守性も向上しました。
3. 改善後の成果
- PSIスコア：SP 60 → 75～90、PC 80 → 90～100
- CLSやFOUCが解消され、読みやすさ向上
- 将来の拡張にも耐えられる構成に改善
4. 学んだこと
- CLS（Cumulative Layout Shift）の改善は、単にスコアを上げるためではなく、 ユーザー体験に直結することを改めて実感しました。
- 画像やフォントの読み込み方ひとつで表示の安定性が変わるため、細かい調整が大切だと学びました。
- LCP（Largest Contentful Paint）の改善では「画像サイズの最適化」や「読み込み順序の工夫」が特に効果的でした。
5. まとめ
今回の改善を通して、知らなかったことや見落としていた点に気づく場面が多くありました。 スコアを上げる作業は単なる数字を上げるだけではなく、ひとつひとつが自分の理解を深める良い機会になります。 これからも「試す → 気づく → 改善する」という流れを続けることで、さらに実践的な知識が身についていくはずです。 この経験が、同じようにサイト改善に取り組む方の参考になれば嬉しいです。