audit-speed
Core Web VitalsやページスピードをLCP・CLS・INP・FCP・TTFBなどの指標を含めて詳細に診断します。ページの表示が遅い原因、Lighthouseスコアの改善、リソースサイズ分析など、パフォーマンス最適化に関する質問があるときに使用してください。より広範な技術的SEO課題は diagnose-seo をご参照ください。
description の原文を見る
> Deep Core Web Vitals and page speed audit. Use when the user asks about page speed, Core Web Vitals, LCP, CLS, INP, FCP, TTFB, Lighthouse scores, why a page is slow, performance optimization, or resource size analysis. For broader technical SEO issues, see diagnose-seo.
SKILL.md 本文
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 |
開始する前に
以下の情報を収集してください:
- どのページ? ホームページ、重要なランディングページ、または特定の遅いページ。
- 現在のスコア。 ユーザーが Lighthouse または PageSpeed Insights のデータを持っている場合は、そこから開始します。
- 技術スタック。 CMS、フレームワーク、ホスティング — これにより利用可能な最適化が決まります。
- 既知の制約。 削除できないサードパーティスクリプト、最適化を制限する設計要件。
データがない場合は、主要な 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属性を追加、CSSaspect-ratioを使用
広告またはエンベッドがコンテンツを注入している?
- → 動的コンテンツが既存コンテンツを押し下げる
- 修正: 広告スロット用にスペースを予約 (min-height)、遅延読み込みコンテンツに
contain-intrinsic-sizeを使用
フォントがテキストリフローを引き起こす?
- → FOUT (Flash of Unstyled Text) がカスタムフォント読み込み時にレイアウトシフトを引き起こす
- 修正:
font-display: optionalを使用 (スワップなし = シフトなし)、またはフォールバックフォントメトリクスをマッチ
動的コンテンツがファーストビューの上に挿入される?
- → バナー、クッキー通知、通知がコンテンツを押す
- 修正: インライン挿入ではなくオーバーレイを使用、または固定高さコンテナでスペースを予約
INP 根本原因ツリー
INP はユーザーインタラクションへの応答性を測定します。診断:
メインスレッドが長いタスクでブロックされている?
- 確認: JavaScript 実行時間、サードパーティスクリプト、大規模な DOM
- 修正:
requestIdleCallbackまたはsetTimeoutで長いタスクを分割、重いモジュールをコード分割
イベントハンドラーが重い同期作業を実行している?
- 確認: 大規模な DOM 更新をトリガーするクリックハンドラー、キーストロークごとのフォーム検証
- 修正: 入力をデバウンス、視覚更新に requestAnimationFrame を使用、作業を Web Workers にオフロード
サードパーティスクリプトがメインスレッドで競合している?
- 確認: アナリティクス、チャットウィジェット、A/B テストツール、ソーシャルエンベッド
- 修正: インタラクション後の読み込みを遅延、エンベッドに
loading="lazy"を使用、低価値スクリプトの削除を検討
リソース分析
ページ全体のサイズを分類:
| リソースタイプ | サイズ | 評価 | アクション |
|---|---|---|---|
| HTML | [x] KB | [ok/large] | 圧縮、インラインスタイル/スクリプトを削減 |
| CSS | [x] KB | [ok/large] | 未使用 CSS を削除、縮小化、重要 CSS を抽出 |
| JavaScript | [x] KB | [ok/large] | コード分割、ツリーシェイク、非重要をデファー |
| Images | [x] KB | [ok/large] | モダン形式、レスポンシブサイズ、ファーストビュー下で遅延読み込み |
| Fonts | [x] KB | [ok/large] | サブセット化、ファミリー/ウェイトを制限、重要フォントをプリロード |
| Third-party | [x] KB | [ok/large] | 必要性を監査、遅延、可能なら自己ホスト |
ベンチマーク:
- ページ全体のサイズ 1.5 MB 以下が良好
- ほとんどのサイトで圧縮済み JavaScript 300 KB 以下
- CSS 圧縮済み 100 KB 以下
- ファーストパーティフォント 100 KB 以下
出力形式
Speed Audit: [URL またはドメイン]
Core Web Vitals
| メトリクス | 値 | 評価 | 根本原因 |
|---|---|---|---|
| LCP | [値] | Good / Needs Improvement / Poor | [特定された原因] |
| CLS | [値] | ... | ... |
| INP | [値] | ... | ... |
| FCP | [値] | ... | ... |
| TTFB | [値] | ... | ... |
リソース内訳 [リソース分析のテーブル]
優先度別修正項目
失敗しているメトリクスごと、インパクト順に:
-
[メトリクス]: [根本原因]
- 現在: [値]
- 目標: [閾値]
- 修正: [具体的アクション]
- 推定インパクト: [high/medium/low]
-
...
クイックウィン 最小限の労力で実装可能な最適化:
- 画像に
width/heightを追加 - LCP 画像に
fetchpriority="high"を設定 - 非重要 JavaScript をデファー
- ...
Pro Tip: 無料の CWV Impact Calculator を使用して Core Web Vitals 修正のトラフィックインパクトを推定し、 Critical CSS Generator でファーストビュー CSS を抽出できます。SEOJuice MCP ユーザーは
/seojuice:page-audit [domain] [url]で 即座に CWV スコア、Lighthouse データ、リソース内訳を取得できます。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- calm-north
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/calm-north/seojuice-skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。