Lighthouseパフォーマンス改善記録

本番環境（https://log.eurekapu.com/）のLighthouse測定結果に基づくパフォーマンス改善の記録。

測定日時

• 初回測定: 2025-12-04

改善前の状態

全体スコア

/blog ページのパフォーマンスが特に低い。

/blog ページの詳細分析

Core Web Vitals

問題点（DIAGNOSTICS）

1. Reduce initial server response time
   • サーバー応答時間: 1,960ms（約2秒）
   • 原因: サーバーサイドでの記事一覧取得・レンダリング処理
2. Largest Contentful Paint element
   • LCP要素の表示に10,390ms
   • 原因: サーバー応答遅延の影響
3. Eliminate render-blocking resources
   • 削減可能: 750ms
   • 原因: CSS/JSのレンダーブロッキング
4. Reduce unused JavaScript
   • 削減可能: 24 KiB
   • 原因: 未使用のJSコードがバンドルに含まれている
5. Avoid long main-thread tasks
   • 5個の長いタスクを検出
   • 原因: JavaScriptの実行時間が長い
6. Serve static assets with efficient cache policy
   • 1リソースでキャッシュ設定不足

その他の問題

• SEO (91点): robots.txt is not valid - robots.txtにエラーあり
• Accessibility (95点): コントラスト比が不十分な箇所あり

改善計画

優先度: 高

優先度: 中

優先度: 低

実装内容

1. サーバー応答時間の改善

実施日: 2025-12-04

原因分析:

/blog ページでは queryCollection('pages').all() を使用して、130件以上のコンテンツを全フィールド取得していた。

// 改善前: 全フィールドを取得
const { data: contentArticles } = await useAsyncData('blog-content-articles', () =>
  queryCollection('pages').all()
)

問題点：

• 全130ファイルの全フィールド（本文含む）を取得
• クライアント側でソート処理を実行
• 不要なデータ転送によるレスポンス遅延

実装:

1. 必要なフィールドのみ選択（select()）
2. DB側でソート（order()）

// 改善後: 必要なフィールドのみ、DB側でソート
const { data: contentArticles } = await useAsyncData('blog-content-articles', () =>
  queryCollection('pages')
    .select('title', 'description', 'path', 'tags', 'publishedAt')
    .order('publishedAt', 'DESC')
    .all()
)

コード変更:

• apps/web/app/pages/blog/index.vue:12-18

2. robots.txtのエラー修正

実施日: 2025-12-04

原因分析:

実装:

改善結果

改善後のスコア

全体平均

改善の効果

/blog ページのパフォーマンスが 43 → 96 に大幅改善（+53ポイント）。

主な要因：

• サーバー応答時間の短縮（クエリ最適化による）
• データ転送量の削減（必要なフィールドのみ取得）

学んだこと

1. クエリの最適化が重要: queryCollection().all() は全フィールドを取得するため、大量のコンテンツがある場合は select() で必要なフィールドのみ取得する
2. DB側でのソートが効率的: クライアント側でソートするより、order() でDB側でソートした方が効率的
3. 開発サーバー vs 本番の差: 開発サーバーでのスコアは本番より大幅に低くなる。正確な測定には本番環境を使用すべき
4. Lighthouse CIの活用: ローカルで簡単に本番環境のパフォーマンスを測定できる。デプロイ前後の比較に有用

参考リンク

• Lighthouse Performance Scoring
• Core Web Vitals
• Optimize LCP