CLSを改善 | 項目 | 状態 | |------|------| | 画像の width/height 属性（sp-banner 123件） | 適用済み（効果なし） | | 画像の width/height 属性（ファーストビュー 3件） | 適用済み（効果なし） | | カルーセルのCSS最適化 | 適用済み（CLS -99.32%） | | Webフォント font-display（Google Fonts） | 適用済み（CLS 完全解消） | | Webフォント font-display（icomoon・自社配信） | 不採用（効果なし・optionalはアイコン豆腐化） | | 動的挿入コンテンツ（AJAX差し替え 4ブロック） | 適用済み（効果なし） | | ヘッダーの動的高さ | 該当なし（fix-space が同じ高さで補償済み） | | Google Fonts Early Access版 | 該当なし（grep ヒット0件） | | JS による zoom 操作 | 該当なし（grep ヒット0件） | 当初仮説（sp-banner の min-height 24px 不足）はトレースにより反証された。 真因は content/top/css の `.swiper-container.swiper-container-horizontal.swiper-container-fade` に指定された `margin-bottom: 8px`。これらのクラスは Swiper が init() 時に JS で付与するため、 初期化の瞬間に margin-bottom が 0 → 8px に変化し、ヒーロー以降の全ブロックが 8px 押し下げられていた。 トレースの overall_max_distance: 8 と完全一致。 - font-display の最適値はフォントの用途で変わる。同じ optional が テキストフォント（Google Fonts）では CLS を完全解消し、 アイコンフォント（icomoon）ではヘッダの全アイコンを豆腐化させた - ラボデータの CLS = 0 はフィールドデータの CLS = 0 を意味しない。 Lighthouse の計測時間内では AJAX 差し替えが発火せず、 スクロールを与えて初めて高さが 227px → 449/416/512/0px に変化する - 画像への単純な width/height 付与は、max-height や負マージンと干渉して 表示崩れを起こすことがある（ヘッダロゴが 165×57.59 に横伸び） LCP: 1945ms CLS: 0.000 TBT: 0ms FCP: 77ms SI: 1833ms Overall Score: 99 layout-shifts 監査: notApplicable / items 0件 トレースの LayoutShift イベント: 0件