Trusted by market leaders · Client results
ディメンション：Attribution: Element (CLS, INP, LCP)
Attribution Elementのメトリクス（clsel、inpel、lcpel）は、Core Web Vitalsのイベントに関連付けられたHTML要素のノード名と具体的なCSSセレクターを返します。
URLディメンションはアプリケーション内のどこでパフォーマンスが低下しているかを示します。一方、Attribution Elementは、どの具体的なコンポーネントがそのスコアの要因になっているかを示します。この粒度により、エンジニアリングにおける議論は、一般的なページレベルの最適化から、具体的なDOMレベルのターゲティングへと変化します。
Attribution Elementフィルタリングの目的：検証と発見
このディメンションは、パフォーマンスのワークフローにおいて、ターゲットの検証と挙動の発見という2つの主要な戦略的機能を果たします。
- ターゲットの検証：ターゲットにするノードが間違っていれば、LCPは最適化できません。開発者は「ヒーロー画像」がLCP要素であると想定して最適化しがちですが、ブラウザが実際に検出したのはテキストブロックやクッキーバナーであり、メトリクスが改善しないということがよくあります。このディメンションは、ブラウザが測定している要素を正確に特定します。
- 挙動の発見：ユーザーは、QAで想定していない方法でサイトを操作します。ズームを期待して静的画像をクリックしたり、反応のないUI要素をレイジクリックしたりします。このディメンションは、高レイテンシを引き起こしている、ユーザーが実際に操作した要素を明らかにし、テストの盲点を浮き彫りにします。
メトリクスごとのシナリオ
Attribution Elementを確認する際、各Core Web Vitalsに対して異なる分析手法が必要となります。
Largest Contentful Paint (LCP)
LCPのAttribution Elementは、「リソースの優先順位」を監査するためのツールです。「画面内で最大の要素は、意図通りに設計した要素なのか？」という問いに答えます。
- 予期しないLCP：
div.cookie-consentやp.intro-textなどの要素がLCPノードとして表示されることがよくあります。これは通常、読み込みエラーではなく、レスポンシブデザインの現実を示しています。特定のviewport（特にモバイル）では、ヒーロー画像がテキストブロックよりも小さくレンダリングされたり、スクロールしなければ見えない位置に完全に押し出されたりすることがあります。テキストブロックがviewport内で画像よりも物理的に多くのピクセルを占有している場合、ブラウザはテキストをLCPとして正しく識別します。これらの要素をDevice Form Factorディメンションとクロスリファレンスし、モバイルレイアウトで画像よりもテキストが主要なコンテンツとして優先されていないか確認してください。 - 想定通りのLCP：ディメンションによって、意図した
img.hero-bannerが確かにLCP要素であると確認できれば、アセット固有の最適化に進むことができます。この特定の画像ファイルに対する直接的な対策（圧縮、フォーマットの変更、キャッシュ）が、全体のスコアに直接影響を与えることがわかります。
Interaction to Next Paint (INP)
INPの問題は、ユーザーの意図とインターフェースの応答性の乖離から発生することがよくあります。このディメンションは、main threadのブロッキングを引き起こしている、具体的なクリック, タップ、キープレスのターゲットを浮き彫りにします。
- 隠れたインタラクション：「インタラクティブ」だと思っていなかった要素（IMG.product-detailやDIV.background-wrapperなど）に、高いINP値が紐づいているのを発見することがあります。これは、ユーザーがフィードバック（ライトボックスやズームなど）を期待してそれらの要素をクリックしているものの、フィードバックが存在しないか、あるいは不要な重いJavaScriptリスナーが実行されていることを示しています。
- 重い機能：INPUT.search-barやBUTTON.add-to-cartなどの一般的なターゲットが頻繁に表示されます。これにより、パフォーマンスのボトルネックを、これらのコントロールに関連付けられた特定のイベントハンドラーへと絞り込むことができます。遅延の原因がページ全体の遅延ではなく、その機能に関連する特定の計算コスト（例：検索のオートコンプリートスクリプトの過剰な実行など）であることを確認できます。
Cumulative Layout Shift (CLS)
CLSはデバッグが困難です。なぜなら、レイアウトシフトを起こしている要素自体は、他の場所で行われた動的なコンテンツ注入による影響を受けていることが多いからです。Attribution Elementは、その影響を受けた要素、つまり「移動した要素」を特定します。
- 原因の追跡：ディメンションがDIV.content-bodyをシフト要素として報告した場合、通常はDOM内のそのノードのすぐ上を確認します。content-body自体が問題であることは稀であり、遅れて読み込まれる広告枠やバナー、フォントファイルの切り替えなどによって下に押し下げられています。
- クラスター分析：これらのアトリビューションをグループ化することで、レイアウトの不安定さがシステム全体に起因するもの（例：ページロードのたびに
footerがずれる）なのか、特定のコンテンツタイプに固有のもの（例：プロフィールページでのみimg.user-avatarがずれる）なのかを判別できます。
要素ごとのCore Web Vitalsの改善
- インパクト順でソート：CoreDashのテーブルでImpact（インパクト）列をソートします。これにより、グローバルスコアに最も大きな悪影響を与えている特定のDOM要素が最上位に表示されます。
- コンポーネントの特定：
button.submit-formがINP悪化の最大の要因である場合、一般的なJavaScriptバンドル全体の調査を止め、そのボタンのonsubmitハンドラーだけに調査を集中させることができます。 - 修正の検証：修正（例：広告枠のスペース確保など）をデプロイした後、CLSのAttribution Elementを監視します。該当するノードがリストから消えれば、修正は成功です。ノードは残っているもののスコアがわずかに改善した場合は、ずれは軽減されたものの解決はしていない状態です。
