ウェブ · COURSE
Web パフォーマンス監査と改善
Lighthouse スコアを“読む”だけで終わらせず、修正提案まで Claude で。
audience
Web エンジニア・フロントリード
duration
65分
lessons
5 章
reviewed
2026.05
先に読むとよい
達成目安
全 5 レッスンを読み、コース完了マークを付ける
未完了
クイズ 3 問に挑戦し、正答率 80% 以上
未挑戦
コース構成
このコースで学ぶこと
- 01
スコアを眺めても速くならない
Lighthouse / PageSpeed Insights のレポートは“現象一覧”であって“処方箋”ではない。Claude の出番は処方箋の作成。
- LCP / INP / CLS の意味と閾値を理解
- 原因と対策が 1:N の対応
- “最小の差分で最大の効果”を選ぶ目利き
- 02
監査ログを Claude に渡す
Lighthouse の JSON か CSV を Claude に読ませると、メトリクス間の依存関係まで含めて要約してくれる。
bashnpx lighthouse https://example.com \ --output=json --output-path=./reports/home.json \ --chrome-flags="--headless"手を動かす
0 / 3
- 03
改善案プロンプト
“何から手をつけるか”を Claude に勧めさせる。効果サイズと作業量の二軸で並べさせるのが鉄則。
text@reports/home.json を読み、改善案を 10 件： 各案は『内容 / 想定 LCP 改善 / 作業量（S/M/L）/ 触るファイル候補』。 “まず 3 つやるなら”の推薦も末尾に。出力イメージ改善案の出力（抜粋）| # | 内容 | 想定 LCP 改善 | 作業量 | 触るファイル | |---|------|---------------|--------|--------------| | 1 | ヒーロー画像を AVIF 化 + priority | −0.8s | S | app/page.tsx | | 2 | 未使用フォント weight を削除 | −0.3s | S | app/layout.tsx | | 3 | サードパーティ JS を遅延読込 | −0.5s | M | components/○○.tsx | **まず 3 つやるなら**: 1 → 2 → 3。S が 2 つで即効性が高いです。 …（残り 7 件）
- 04
画像・フォント・JS の三大対策
実務で効くのはほぼこの 3 つに集約される。Claude に“優先順位の理由”を必ず説明させる。
- 画像: AVIF/WebP 化・width/height 必須・LCP 画像は priority
- フォント: 必要 weight のみ・display:swap・self-host
- JS: コード分割・サードパーティ遅延読み込み
- 05
Skill 化と CI 計測
改善は 1 回ではなく継続。週次の Lighthouse 計測を Action にして、Claude が前週との差分を要約する仕組みに。
Lv.5 — 安全な実行手を動かす
0 / 3
理解度チェック
Q1.Web パフォーマンス監査 Skill の正しい運用は？
Q2.AI が提案したパフォーマンス改善 PR を本番に反映する前に必ずやるべきは？
Q3.パフォーマンス監査パイプラインの入力として最も適切なものは？