Core/Dash Diagnosis

CoreDash Diagnosis：根本原因エンジン

Real User Monitoringはバイタルサインを提供します。LCPは3.2秒です。CLSは0.25です。INPは失敗しています。 これこそがRUMの本来の目的です。重要な指標を示します。パフォーマンスが低下していることと、どこに焦点を当てるべきかの場所を教えてくれます。これは、Core Web Vitalsを修正するための最初の、そして不可欠なステップです。

しかし、データを入手してからが本当の仕事の始まりです。LCPの失敗は、サーバーの遅延、サイズが大きすぎる画像、レンダリングをブロックするスクリプト、またはその3つすべてである可能性があります。RUMは症状を示します。次の論理的なステップは診断です。

CoreDash Diagnosisは、指標を修正に変えるインテリジェンスレイヤーです。 自動化されたパフォーマンスフォレンジックによってRUMデータを拡張し、ブラウザから詳細な実行プロファイルをキャプチャして、正確なボトルネックを特定し、ご使用のCMSに合わせた正確なソリューションを生成します！

測定から根本原因へ

ダッシュボードがあります。LCP：3.2秒。どこに問題があるかはわかっています。次に、その理由を知る必要があります。 ヒーロー画像でしょうか？サードパーティのスクリプトでしょうか？サーバーの応答時間でしょうか？ウォーターフォールを監査し、メインスレッドをプロファイリングし、理論をテストするのに何時間も費やすこともできます。あるいは、診断エンジンに任せることもできます。

CoreDash Diagnosisは、次の論理的なステップを踏み出します。単にパフォーマンスを測定するだけではありません。障害をリバースエンジニアリングします。

LCP診断：4つのフェーズ、1つの答え

Largest Contentful Paintを、TTFB、Load Delay、Load Duration、Render Delayの4つの構成フェーズに分解します。フェーズが失敗したとき、単にフラグを立てるだけではありません。その理由を説明します。

• Vendor Attribution（ベンダーの特定）：「スクリプトの実行時間が長い」とは報告しません。HubSpotのトラッキングスクリプトが150ミリ秒ペイントをブロックしたこと、またはGoogle Tag Managerが300ミリ秒レンダリングを遅延させたことを報告します。ベンダー、コスト、および影響を確認できます。
• Anti-Pattern Detection（アンチパターンの検出）: LCP画像の遅延読み込み、CSSバックグラウンドへの隠蔽、最適化されていないCDNからの読み込みなど、14の特定のアーキテクチャ上の間違いをスキャンします。監査が見逃すエラーを捕捉します。
• Code-Level Remediation（コードレベルの修正）: 修正を生成します。LCP画像に優先度ヒントがない場合、<link rel="preload">タグを書き込みます。スクリプトがレンダリングをブロックしている場合は、deferを追加する場所を示します。修正はコピー＆ペーストですぐに使えます。

CLS診断：ゴーストバグの捕捉

レイアウトシフトは、再現が最も難しいバグです。ある接続ではフォントの読み込みが遅れます。モバイルでは広告のレンダリングが遅くなります。シフトは一度だけ発生し、二度と見ることはありません。

CoreDash Diagnosisはすべてのフレームをキャプチャします。シフトを記録し、要素を特定し、根本原因を追跡します。

• The Element（要素）：どのDOMノードが移動したかを正確に伝えます。「ヘッダーのどこか」ではありません。特定のクラスを持つ特定の<div>です。
• The Trigger（トリガー）：なぜ移動したのかを伝えます。fallbackの宣言なしにWebフォントがスワップされた。予約されたスペースなしにバナー広告が挿入された。寸法なしで画像が読み込まれた。
• The Fix（修正）: CSSを記述します。画像にaspect-ratio: 16/9を追加します。フォントフェイスにfont-display: swapを設定します。広告コンテナにmin-height: 250pxを予約します。これでシフトは二度と発生しません。

INP診断：フリーズの発見

Interaction to Next Paintは応答性を測定します。これが失敗すると、インターフェースがフリーズします。ユーザーがボタンをクリックしても、何も起こりません。

RUMデータは「INPが悪い」こと、そして訪問者がページのどこでインタラクションしたかを伝えます。  私たちは、どの関数がメインスレッドをブロックしているか、そしてそれをどのように修正するかを伝えます！

• Isolate the Interaction（インタラクションの分離）：ボタンのクリック、フォームの送信、キーの押下など、正確な入力イベントを特定します。どのインタラクションが失敗したかを把握します。
• Profile the Handler（ハンドラーのプロファイリング）：イベントリスナーを測定します。個々の関数に至るまで、独自のコードの実行時間を示します。クリックハンドラーが200ミリ秒の同期操作を実行する場合、その200ミリ秒を示します。
• Detect Interference（干渉の検出）：コードが高速な場合もあります。ブラウザが単に忙しいだけです。サードパーティのアナリティクスライブラリがデータを処理している。トラッキングピクセルがネットワークリクエストを発生させている。ユーザーのインタラクションからサイクルを奪っているバックグラウンドタスクにフラグを立てます。

盲目的な最適化はもうやめましょう。実際にフリーズを引き起こしている関数を最適化します。

プラットフォーム固有のソリューション

一般的な推奨事項は役に立ちません。

「次世代フォーマットで画像を提供する」というアドバイスは、CDNを制御できないShopifyマーチャントには役立ちません。「JavaScriptの実行時間を短縮する」というアドバイスは、どのプラグインが問題なのかわからないWordPressサイトの所有者には役立ちません。

CoreDash Diagnosisはスタックを検出し、ネイティブコードを生成します。

WordPressの場合： PHPスニペットまたは変更すべき特定のプラグイン設定を提供します。
Next.jsの場合： next.config.jsの変更内容を提供します。
Shopifyの場合： 編集すべきLiquidテンプレートを伝え、追加すべき正確な行を示します。

Shopify、WordPress、WooCommerce、Magento、Drupal、Squarespace、Wix、Next.js、React、Vue.js、Nuxt.jsをサポートしています。

推奨事項は理論上のものではありません。実行可能なものです。

見ることと解決することの違い

RUMは、サイトが遅いことを伝えます。

CoreDash Diagnosisは、初期ペイント中にIntercomチャットウィジェットがメインスレッドを200ミリ秒ブロックしていることを伝え、読み込みをdefer（遅延）させるために変更すべきscriptタグを提示します。

それが、指標とソリューションの違いです。