Lighthouse テスト実行ガイド

frontmatterあり = 公開対象の記事 → テスト対象
frontmatterなし = 非公開の記事 → テスト対象外

contentディレクトリ内にあっても、frontmatterがないファイルは本番環境で503エラーを返す。これは仕様。

2. Cloudflareのレート制限

短時間に多数のリクエストを送ると、Cloudflareのレート制限に達して503エラーが返される。

対策:

一度に大量のページをテストしない
テストを分割して実行する
レート制限に達したら数分〜1時間待つ

テスト実行手順

Step 1: テスト対象URLを生成

cd apps/web
node scripts/generate-lighthouse-urls.mjs

このスクリプトは:

contentディレクトリ内のMarkdownファイルをスキャン
frontmatterが有効なファイルのみを抽出
Vue pagesと合わせてURL一覧を出力

Step 2: lighthouserc.cjs を更新

スクリプトの出力を lighthouserc.cjs のurl配列にコピー。

Step 3: Lighthouseテストを実行

方法1: 一括実行（レート制限に注意）

pnpm lighthouse

方法2: 遅延付きバッチ実行（推奨）

# 全URLを遅延付きでテスト（レート制限回避）
pnpm lighthouse:batch

# オプション指定
pnpm lighthouse:batch -- --delay=5000 --batch=5

# 途中から再開（例: 50番目から）
pnpm lighthouse:batch -- --start=50

# 一部のみテスト（例: 最初の20件）
pnpm lighthouse:batch -- --limit=20

バッチ実行オプション:

--delay=N: 各リクエスト間の遅延（ms）。デフォルト: 3000
--batch=N: バッチサイズ。N件ごとに長めの休憩。デフォルト: 10
--start=N: 開始インデックス。デフォルト: 0
--limit=N: テストするURL数の上限

Step 4: 結果を確認

pnpm lighthouse:summary

詳細なHTMLレポートは .lighthouseci/reports/ に保存される。

現在の問題点（2025-12-04時点）

Markdownコンテンツが503エラーを返す

frontmatterが有効なコンテンツ（117件）も503エラーを返している。

原因:

コンテンツが本番環境にデプロイされていない
または、Cloudflareのレート制限に達した

対処方法:

# 最新コンテンツをデプロイ
pnpm deploy:cloudflare

# デプロイ後、再度テスト
pnpm lighthouse

frontmatterの有無について

frontmatterあり = 公開対象の記事（テスト対象）
frontmatterなし = 非公開の記事（テスト対象外）

pnpm lighthouse:urls でfrontmatterが有効なURLのみを生成できる。

確認済みの動作するコンテンツ（10件）:

/2025-10-04/nuxt-content-sqlite-field-mapping
/2025-10-07/real-estate-terms
/2025-10-18/excel-functions-let-xmatch-index-guide
/2025-10-19/google-claims-fact-check
/2025-10-20/design-philosophy-qa
/2025-11-29/home-ownership-vs-rental-fp-guide
/2025-12-02/mansion-vs-house-advice
/2025-12-03/mockup-development-log
/2025-12-04/lighthouse-performance-improvement
/features/table-of-contents

Vue pages のテスト結果（25件）

すべて正常にテスト完了。平均スコア:

Performance: 95
Accessibility: 95
Best Practices: 100
SEO: 91

ファイル	説明
`lighthouserc.cjs`	Lighthouse CI 設定ファイル
`scripts/generate-lighthouse-urls.mjs`	テスト対象URL生成スクリプト
`scripts/lighthouse-summary.mjs`	結果サマリー表示スクリプト
`scripts/check-content-urls.mjs`	本番URLの存在確認スクリプト
`scripts/lighthouse-with-delay.mjs`	遅延付きバッチテストスクリプト