パフォーマンススコア100への道のり：Google Lighthouse完全制覇の技術詳解

by fujimura
技術Web開発パフォーマンス最適化
#Google Lighthouse#Next.js#ヘッドレスCMS#画像最適化#JAMstack#Vercel

私が運営するサイト（https://web.fujimura.com）は、Google Lighthouseでパフォーマンススコア100点満点を達成しました。この記事では、WordPressから現代的なヘッドレスCMSへの移行、CDN活用、そして決定的だった画像最適化までの完全な道のりを技術的に詳解します。

サイトアーキテクチャの転換

従来のWordPressサイトは、データベースクエリやサーバーサイド処理（PHP）が必要で、表示速度の低下が課題でした。そこで採用したのが、GitベースのヘッドレスCMSです。この仕組みではコンテンツをJSON形式でGitHubリポジトリに保存し、Next.jsで静的サイトを生成しています。

システムアーキテクチャ図

この方法では、GitHub Actionsを利用して自動的にコンテンツがビルドされ、生成された静的サイトがGitHub Pagesを通じてCDNエッジに配信されます。これにより、世界中どこからでも迅速にサイトにアクセスできるようになりました。

CDN活用による高速化

CDN（コンテンツデリバリーネットワーク）の利用は、Lighthouseスコア向上の大きな要因です。上図のように、編集者がAIエージェント（Claude Code CLI）と対話してJSONデータを更新すると、git pushトリガーでGitHub Actionsが起動し、Next.jsアプリケーションが静的ファイルをビルドします。生成されたコンテンツはGitHub Pagesを通じて世界各地のCDNエッジに配信され、ユーザーは地理的に最も近いサーバーからコンテンツを取得できます。

段階的改善の軌跡

第1段階：アーキテクチャ変更による基礎改善

移行前のLighthouse平均スコア74点から移行後は94点まで向上しました。特にCore Web Vitalsにおいて：

  • FCP (First Contentful Paint): 1291ms→854ms（34%改善）
  • LCP (Largest Contentful Paint): 2609ms→1432ms（45%改善）
  • SI (Speed Index): 1745ms→1507ms（14%改善）

第2段階：画像最適化による完全制覇

2025年8月7日の大幅な画像最適化により、99点から100点満点への最後のブレークスルーを達成しました。この最適化では以下の技術を実装：

  • 選択的画像最適化戦略: 重複画像の除去と不要ファイルのクリーンアップ
  • 画像ルーティング問題の解決: 文字エンコーディングの改善
  • 包括的画像最適化システム: Next.jsのImage最適化機能の完全活用

インフラによる性能差：GitHub Pages vs Vercel

本サイトは通常GitHub Pagesで運用しており、そこではパフォーマンススコア99が限界でした。しかし、性能測定のためVercel上でもデプロイしたところ、以下の完璧な数値を達成：

Vercel環境でのLighthouseスコア100点満点
  • パフォーマンス: 100点
  • ユーザー補助: 100点
  • おすすめの方法: 100点
  • SEO: 100点

特に注目すべき数値：

  • FCP (First Contentful Paint): 0.2秒
  • LCP (Largest Contentful Paint): 0.4秒
  • Total Blocking Time: 0ミリ秒
  • Speed Index: 0.9秒
  • Cumulative Layout Shift: 0

技術的学習と今後の展望

この完璧なスコア達成から得られた重要な学習は以下の通りです：

  1. 段階的最適化の重要性: 一気に100点を目指すのではなく、アーキテクチャ改善（74→94点）から画像最適化（99→100点）へと段階的にアプローチ
  2. 画像最適化の決定的インパクト: 最後の1点を取るための画像最適化が最も技術的に挑戦的
  3. インフラによる性能差の存在: GitHub Pages（99点）とVercel（100点）で異なる結果となり、ホスティング環境の性能も重要な要素

まとめ

WordPressから現代的なJAMstackアーキテクチャへの移行により、74点から最高100点満点を実現しました。特に2025年8月7日の画像最適化により、GitHub Pages環境では99点、性能測定のためのVercel環境では100点満点という優秀な結果を得ることができました。

この成功は、技術的な最適化だけでなく、ホスティングインフラの選択、そしてAIエージェント（Claude Code CLI）を活用した効率的な開発プロセスの確立にもつながっており、今後のウェブサイト運用モデルとして大きな価値を持っています。