CLSを改善 | # | コミット | プラクティス | CLSへの効果 | |---|----------|-------------|-------------| | 1 | 22162c7 | サムネイルスライダーの初期化依存CSSを解消 | 0.163 → 0.020 | | 2 | 24e661b | ファーストビュー画像50枚への明示的な寸法指定 | 効果なし | | 3 | 9d80f33 | カルーセル初期レイアウトのCSS固定 + スライダーCSSのhead移動（必須） | 0.020 → 0.000 | | 4 | 00f6a0b | ページ全体の残る寸法未指定画像への寸法指定（207枚） | 効果なし | | 項目 | 状態 | |------|------| | 画像のwidth/height属性 | 適用済み（CLSへの効果なし。unsized-images 154件→0件、score 0.5→1.0） | | 動的コンテンツ | 該当あり（フォールド外のため実測CLS寄与ゼロ、対処不要） | | Webフォント | 該当なし（@font-faceはswiper-iconsのdata URI 1件のみ、Webフォント読み込みなし） | | カルーセル/スライダー | 適用済み（主因。CLS全量が .thumbs-slider 1箇所に集約） | | ヘッダー/フッターの動的高さ変化 | 該当なし（setPaddingTopBodyはCSS値と一致、headerStickyはデッドコード） | | JSによるzoom変更 | 該当なし（実際にzoomを変更するコードなし） | | 【必須】カルーセル初期レイアウトのCSS固定 | 適用済み（JS無効時のレイアウト再現をPuppeteerで実測検証） | - CLS 0.163 の全量がサムネイルスライダー `.thumbs-slider` の1箇所に集約されていた - 原因は `swiper-container-initialized` 等のJS付与クラスに `padding: 10px 0` が依存していたことと、スライド幅がJSにしか決められていなかったこと - Lighthouse の layout-shifts 監査は根本原因を「Media element lacking an explicit size」と報告し続けたが、これは誤導だった（HTML属性による寸法指定を認識しないヒューリスティック） | 監査 | 開始時 | 完了時 | |------|--------|--------| | cumulative-layout-shift | 0.163（score 72） | 0.000（score 100） | | layout-shifts items | 1件 | 0件 | | unsized-images items | 154件 | 0件 | | unsized-images score | 0.5 | 1.0 | LCP: 894ms CLS: 0.000 TBT: 497ms FCP: 337ms SI: 1004ms Overall Score: 87