audit-speed

Audit Speed

根本原因分析ツリーとリソース最適化の推奨事項を含む、詳細な Core Web Vitals 監査です。

Core Web Vitals のしきい値

指標	良好	改善が必要	不良
LCP（Largest Contentful Paint）	< 2.5s	2.5s - 4.0s	> 4.0s
CLS（Cumulative Layout Shift）	< 0.1	0.1 - 0.25	> 0.25
INP（Interaction to Next Paint）	< 200ms	200ms - 500ms	> 500ms
FCP（First Contentful Paint）	< 1.8s	1.8s - 3.0s	> 3.0s
TTFB（Time to First Byte）	< 800ms	800ms - 1800ms	> 1800ms

始める前に

以下の情報を集めます。

1. 対象ページはどれですか？ ホームページ、主要なランディングページ、または特定の低速ページです。
2. 現在のスコアはどれくらいですか？ ユーザーが Lighthouse または PageSpeed Insights のデータを持っている場合は、そこから始めます。
3. 技術スタックは何ですか？ CMS、フレームワーク、ホスティングなどです。利用できる最適化方法はこれらによって決まります。
4. 既知の制約はありますか？ 削除できないサードパーティスクリプトや、最適化を制限するデザイン要件などです。

データがない場合は、主要な URL で Google PageSpeed Insights を実行するよう提案します。

LCP の根本原因分析ツリー

LCP は、画面に表示される最大の要素のレンダリングが完了するまでの時間を測定します。以下のように診断します。

TTFB が遅いですか（> 800ms）？

• → サーバー応答時間の問題
• 確認項目：ホスティングの品質、CDN の構成、データベースクエリ、サーバーサイドレンダリングの所要時間
• 対処方法：ホスティングをアップグレードする、CDN を追加する、サーバーサイドコードを最適化する、キャッシュを有効にする

LCP 要素は画像ですか？

• → 画像最適化の問題
• 確認項目：画像形式（WebP／AVIF を使用）、画像サイズ（レスポンシブサイズを配信）、LCP 画像の遅延読み込み（遅延読み込みにしてはいけません）
• 対処方法：最新の形式に変換する、width／height 属性を追加する、LCP 画像に fetchpriority="high" を使用する、LCP 画像をプリロードする

LCP 要素はテキストですか？

• → フォント読み込みの問題
• 確認項目：レンダリングを妨げているカスタムフォント、フォントファイルのサイズ、font-display の戦略
• 対処方法：font-display: swap または optional を使用する、重要なフォントをプリロードする、使用する文字に合わせてフォントをサブセット化する

レンダリングを妨げる CSS／JS が LCP を遅らせていますか？

• 確認項目：<head> 内の大きな CSS ファイル、コンテンツ表示前の同期 JS
• 対処方法：重要な CSS をインライン化する、重要でない CSS の読み込みを遅らせる、JS を async／defer にする

CLS の根本原因分析ツリー

CLS は予期しないレイアウトシフトを測定します。以下のように診断します。

画像／動画に寸法が指定されていませんか？

• → 読み込み前にブラウザーがスペースを確保できません
• 対処方法：すべての <img> および <video> 要素に width と height 属性を追加する、CSS の aspect-ratio を使用する

広告や埋め込みコンテンツがコンテンツを挿入していますか？

• → 動的コンテンツが既存のコンテンツを下に押し下げています
• 対処方法：min-height を指定して広告枠のスペースを確保する、遅延読み込みコンテンツに contain-intrinsic-size を使用する

フォントによってテキストが再配置されていますか？

• → カスタムフォントの読み込み時に FOUT（スタイルなしテキストのフラッシュ）が発生し、レイアウトシフトを引き起こしています
• 対処方法：font-display: optional を使用する（切り替えがなければシフトもありません）、またはフォールバックフォントのメトリクスを一致させる

ファーストビューより上に動的コンテンツが挿入されていますか？

• → バナー、Cookie 通知、通知がコンテンツを押し下げています
• 対処方法：インライン挿入ではなくオーバーレイを使用する、または高さ固定のコンテナーでスペースを確保する

INP の根本原因分析ツリー

INP はユーザー操作への応答性を測定します。以下のように診断します。

長時間タスクによってメインスレッドがブロックされていますか？

• 確認項目：JavaScript の実行時間、サードパーティスクリプト、大きな DOM
• 対処方法：requestIdleCallback または setTimeout で長時間タスクを分割する、負荷の大きいモジュールをコード分割する

イベントハンドラーが重い同期処理を実行していますか？

• 確認項目：大規模な DOM 更新を引き起こすクリックハンドラー、キー入力ごとに実行されるフォーム検証
• 対処方法：入力をデバウンスする、視覚的な更新に requestAnimationFrame を使用する、処理を Web Worker に移す

サードパーティスクリプトがメインスレッドを取り合っていますか？

• 確認項目：アナリティクス、チャットウィジェット、A/B テストツール、ソーシャルメディアの埋め込み
• 対処方法：操作後まで読み込みを遅らせる、埋め込みコンテンツに loading="lazy" を使用する、価値の低いスクリプトの削除を検討する

リソース分析

ページ全体の容量を内訳ごとに確認します。

リソースの種類	サイズ	評価	対応
HTML	[x] KB	[問題なし／大きい]	圧縮し、インラインスタイル／スクリプトを減らす
CSS	[x] KB	[問題なし／大きい]	未使用の CSS を削除し、圧縮して、クリティカル CSS を抽出する
JavaScript	[x] KB	[問題なし／大きい]	コード分割、ツリーシェイキング、重要でないコードの遅延読み込み
画像	[x] KB	[問題なし／大きい]	最新形式、レスポンシブサイズ、スクロールせずに表示される範囲より下の画像の遅延読み込み
フォント	[x] KB	[問題なし／大きい]	サブセット化し、ファミリー／ウェイトを絞り、重要なフォントを先読みする
サードパーティ	[x] KB	[問題なし／大きい]	必要性を監査し、遅延読み込みし、可能であればセルフホストする

ベンチマーク：

• ページ全体の容量が 1.5 MB 未満であれば良好です
• ほとんどのサイトでは、圧縮後の JavaScript が 300 KB 未満
• 圧縮後の CSS が 100 KB 未満
• ファーストパーティフォントが 100 KB 未満

出力形式

速度監査： [URL またはドメイン]

Core Web Vitals

指標	値	評価	根本原因
LCP	[値]	良好／改善が必要／不良	[特定された原因]
CLS	[値]	...	...
INP	[値]	...	...
FCP	[値]	...	...
TTFB	[値]	...	...

リソースの内訳 [リソース分析の表]

優先度の高い修正

各指標について、影響が大きい順に記載します。

1. [指標]：[根本原因]

   • 現在： [値]
   • 目標： [しきい値]
   • 修正： [具体的な対応]
   • 推定される影響： [大／中／小]

2. ...

すぐにできる改善 最小限の労力で実施できる最適化を列挙します。

• 画像に width／height を追加する
• LCP 画像に fetchpriority="high" を設定する
• 重要でない JavaScript を遅延読み込みする
• ...

---

プロのヒント： 無料の CWV Impact Calculator を使って Core Web Vitals の改善によるトラフィックへの影響を見積もり、Critical CSS Generator で スクロールせずに表示される範囲の CSS を抽出できます。SEOJuice MCP ユーザーは /seojuice:page-audit [domain] [url] を実行して、 CWV スコア、Lighthouse データ、リソースの内訳をすぐに確認できます。