タグ

タグを使用すると、履歴内の特定のポイントを重要なものとしてマークできます

  • 補足施策

    a8f785d1 · 全プラクティス適用後の複合効果の再評価（計測専用） · 
    補足施策

| 項目 | 状態 |
|------|------|
| WebP最適化（必須） | 適用済み（残存PNG20件をロスレス変換、Content-Type是正14件） |
| JS最適化 第1段階（必須） | 適用済み（構造的に達成済みであることを実測で確定） |
| JS最適化 第2段階（必須） | 適用済み（9本中 async 化できるのは /bundles/site 1本のみと確定） |
| CSS結合（必須） | FCPフェーズ 73eb036 で実施済み（外部CSSは1本のみ） |
| HTMLファイルサイズ | 適用済み（-24.9% / -49,747B） |
| 不要なHTML要素 | 適用済み（全ブレークポイント非表示のミニカート、DOM -24要素） |
| スライダー・リスト数の制限 | 適用済み（ブログリスト、DOM -191要素） |
| 初期非表示要素の遅延読み込み | 適用済み（セールカルーセル、DOM -796要素） |
| TTFB | 対処不可能（オリジンサーバ改修が必要。影響度を測定） |
| ネットワーク速度シミュレーション | 実施（不採用・計測専用） |
| CSSのパージ | 対処試行・不採用（単一ページのカバレッジでは安全に削減できないと実証） |
| Google Fonts をやめる | 適用済み（転送量 -30KiB、リクエスト -2件） |
| Webフォント（日本語）をやめる | 該当なし（日本語Webフォントは0件） |
| 未使用JS / レガシーpolyfill | 対処試行・不採用（理論上限測定で効果なしと実証） |

observedFirstContentfulPaint: 1,134ms
observedDomContentLoaded: 1,139ms
observedLargestContentfulPaint: 1,134ms
observedSpeedIndex: 1,153ms
observedLoad: 3,807ms

CLS: 0.000
TBT: 0ms
Overall Score: 100

dom-size: 1,544要素 / リクエスト 241件 / 転送量 2.99MB / 展開後 4.12MB / 404は2件

※ シミュレーションの LCP / SI は Lantern の内部計算が破綻しているため成果指標に使用しない

| 指標 | オリジナル | 最終 | 改善率 |
|---|---|---|---|
| observedLargestContentfulPaint | 4,001ms | 1,134ms | -71.7% |
| observedDomContentLoaded | 3,911ms | 1,139ms | -70.9% |
| observedSpeedIndex | 3,259ms | 1,153ms | -64.6% |
| observedLoad | 10,410ms | 3,807ms | -63.4% |
| リクエスト数 | 444件 | 241件 | -45.7% |
| 転送量 | 8.77MB | 2.99MB | -65.9% |
| 展開後サイズ | 26.13MB | 4.12MB | -84.2% |
| dom-size | 2,635要素 | 1,544要素 | -41.4% |
| CLS | 0.005 | 0.000 | 完全解消 |
| Overall Score | 66 | 100 | +34pt |

- IntersectionObserver の監視対象に display:none の要素を使うと
  「表示されたら初期化する」が「初期化されるまで表示判定されない」循環デッドロックになる
- pixel diff によるレグレッションテストでは、ビューポート外の機能破損を検出できない
- 実行時カバレッジによるCSS削減は、単一ページの計測では原理的に安全に行えない
- 「未使用バイト数が大きい」ことは「削れば速くなる」を意味しない
  （seiko バンドルを完全ゼロ化しても observedLCP の改善は -8ms のみ）

- server-response-time（TTFB 970ms）: オリジンサーバ改修が必要
- bf-cache: unloadハンドラ / cache-control:no-store、アプリケーション実装側

  • LCPを改善

    61963824 · TTFB=0 理論下限の再測定（LCP改善施策反映後・計測専用・不採用） · 
    LCPを改善

トレースの largestContentfulPaint::Candidate 実データ:

| 時刻 | nodeId | size | imageLoadEnd | 要素 |
|---|---|---|---|---|
| 1126.6ms | 7 | 84,872 (412x206) | 1028.1ms | ヒーローカルーセル1枚目 |
| 1389.5ms | 39 | 168,100 (410x410) | 1087.8ms | ポップアップ画像 |

LCP画像は 1087.8ms にロード完了済み（FCP 1127ms より前）。
にもかかわらず LCP は 1389.5ms。Render Delay 301.7ms が実体であり、
画像最適化系の施策では LCP は動かない。

原因の連鎖（コードレベルで特定）:
1. .popup{opacity:0;visibility:hidden;transition:.6s} / .popup.is-show{opacity:1}
2. index.html は class="popup"（is-show なし）
3. $(document).ready 内で popup.classList.add('is-show')
4. その ready を遅らせていたのが Google Fonts CSS の <link>（ttfbMs: 309）
   — 直後のパーサブロッキング script を HTML仕様に従って 1317ms までブロック
   → DCL 1318ms → LCP 1389.5ms

裏付け: 1127〜1310ms のメインスレッドは 3ms超のタスクが1件もなく完全に idle。

| 項目 | 状態 |
|------|------|
| LCP要素の特定 | 完了（ポップアップモーダル画像。ヒーロー画像ではない） |
| レンダリングブロックリソース | 適用済み（observedLCP -13%） |
| JS依存の表示制御 | 適用済み（observedLCP が observedFCP と同値化＝理論下限に到達） |
| CSS transition による描画遅延 | 適用済み（効果なし・発火経路が存在しないことを実測） |
| 画像のWebP化 | 適用済み（効果なし・LCP画像が唯一の JPEG だった） |
| fetchpriority | 適用済み（効果なし・Low → High に変化） |
| 適切なサイズの画像 | 適用済み（実転送量 -23.3%） |
| 画像の遅延読み込み | 適用済み（効果なし・swiper が全スライドをDOM生成） |
| PC用画像のスマホ配信 | 該当なし（_pc 命名0件、offscreen-images score 1） |
| 海外サーバーからの配信 | 該当なし（全237件が NRT / KIX、東京リージョン） |
| TTFB | 不採用（inventory編集では対処不可、理論下限を計測） |

| ルートTTFB | observedFCP | observedLCP |
|---|---|---|
| 962ms（現状） | 1133〜1135ms | 1133〜1135ms |
| 0ms（ルートのみ） | 147〜151ms | 147〜151ms |
| 全リソース 0ms | 58〜59ms | 65〜69ms |

LCPフェーズの施策により、TTFB=0 時点の理論下限そのものが
FCPフェーズ時点の396〜402msから147〜151msへ約250ms短縮された。
現状の observedLCP 1134ms と理論下限の差 約985ms のうち、約87%が TTFB。
TTFB は残存する最大の改善要因である。

observedFirstContentfulPaint: 約1133ms
observedDomContentLoaded: 約1137ms
observedLargestContentfulPaint: 約1133ms（FCPと同値＝理論下限）
observedSpeedIndex: 約1149ms
CLS: 0.000
TBT: 0ms
Overall Score: 100

observedLargestContentfulPaint: 約1378ms → 約1133ms（-245ms / -17.8%）
observedSpeedIndex: 約1456ms → 約1149ms（-307ms / -21.1%）
observedDomContentLoaded: 約1314ms → 約1137ms（-177ms）
ページ全体転送量: 約3.50MB → 約3.15MB（-約350KB）

シミュレーションの LCP / SI は 195eb8e 以降 Lantern の内部計算が破綻している
（Render Delay が負値、TTFB が総LCP を上回る）。
本フェーズの評価は観測値 observedLargestContentfulPaint を主指標として行った。

  • FCPを改善

    195eb8e9 · TTFB の影響度測定（計測専用・不採用） · 
    FCPを改善

configSettings.throttling が rttMs: 0 / throughputKbps: 0 / cpuSlowdownMultiplier: 1。
Lantern のネットワークモデルが実質「無遅延・無限帯域」であり、
シミュレーション FCP（78ms）はほぼ CPU 時間のみで決まる。
実測は observedFirstContentfulPaint = 1133ms。

観測FCP 1133ms の内訳:
- ルートドキュメント TTFB 967ms（86%）
- レンダリングブロックCSS 4本（並列、最遅）117ms（10%）
- スタイル計算〜ペイント 約35ms（3%）

CSS を完全撤去する理論上限測定でも観測FCP は -7ms しか動かなかった。

| 項目 | 状態 |
|------|------|
| GZIP圧縮（必須） | 適用済み（uses-text-compression 0.5→1.0） |
| CDNの同一ドメイン化 | 不採用（Lantern計算破綻・観測値不変） |
| CSSの別ドメイン配信 | 適用済み（Google Fonts CSS、Overall 99→100） |
| 複数CSSの一本化（4個以上で必須） | 適用済み（stylesheet 7件→4件） |
| scriptのレンダリングブロック | 適用済み（access.js async 化） |
| 不使用CSS | 適用済み（purgecss、転送 -51.3%） |
| クリティカルCSSの逆効果 | 適用済み（load_css_async 完全除去） |
| CSSのミニファイ | 適用済み（効果なし、unminified-css 0.5→1.0） |
| Google Fonts link の位置 | 不採用（head移動で観測FCP +20.2% 悪化） |
| TTFB | 不採用（inventory編集では対処不可、理論上限を計測） |
| CSS の @import | 該当なし（grep 0件） |
| document.write | 該当なし（TBTフェーズで解消済み） |
| Google Optimize | 該当なし（grep 0件） |
| preload / prefetch の誤用 | 該当なし（0件） |
| visibility: hidden による隠蔽 | 該当なし（grep 0件） |

自社アクセス解析 access.js が同期 script として 984〜3794ms（約2,810ms、
ほぼ全量が TTFB）にわたりパーサをブロックしていた。
async 属性の付与と naLog.Send() の onload 化により:

- observedDomContentLoaded: 3833ms → 1314ms（-2,519ms）
- observedLargestContentfulPaint: 3901ms → 1379ms（-2,522ms）

サードパーティタグ除去に次ぐ、本プロジェクト第2の実効改善。
access.js は第一者リソースとして除去対象外としていたが、
第一者であっても同期読み込みは重大なボトルネックになりうる。

| ルートTTFB | observedFCP | observedLCP |
|---|---|---|
| 962ms（現状） | 1130〜1136ms | 1375〜1381ms |
| 0ms（理論上限） | 142〜147ms | 396〜402ms |
| 全リソース 0ms | 51〜56ms | 135〜163ms |

TTFB は FCP / LCP / SI すべてに直結する最大のボトルネックであり、
本サイトに残る最大の改善余地はサーバ応答時間の短縮にある。

プラクティス5以降、Lantern のシミュレーション LCP / SI は
内部計算が破綻している（Render Delay が負値、TTFB > 総LCP）。
以降、LCP の評価は観測値 observedLargestContentfulPaint を主指標とする。

Google Fonts link の head 移動では、レグレッションテストの増分が0%、
render-blocking-resources 監査も変化なしだったにもかかわらず、
観測FCP だけが +228.7ms（+20.2%）悪化した。

observedFirstContentfulPaint: 約1130ms
observedDomContentLoaded: 約1314ms
observedLargestContentfulPaint: 約1378ms
observedSpeedIndex: 約1456ms
CLS: 0.000
TBT: 0ms
Overall Score: 100

  • TBTを改善

    6da28658 · $(document).ready 内の重い処理をチャンク分割（採用・効果なし） · 
    TBTを改善

TBT はオリジナルデータの時点から一貫して 0ms。
CrRendererMain の RunTask を全件抽出しても 50ms以上・30ms以上ともに 0件、
long-tasks 監査も items 0件。

cpuSlowdownMultiplier が 1（PageSpeed Insights のモバイル既定は 4）。
TBT = 0ms は「CPU減速なし条件下での 0ms」である。

| 項目 | 状態 |
|------|------|
| ロングタスク（50ms超） | 該当なし（RunTask 3,106件を全件抽出、50ms以上0件） |
| 同期XHR | 該当なし（.open( 全11件を列挙、async:false は0件） |
| .load() による同期通信 | 該当なし（1箇所のみ、読込先に script 0件） |
| スライダーの複数初期化 | 適用済み（効果なし・最長タスク -34%） |
| DOMContentLoaded内の重い処理 | 適用済み（効果なし・app ready タスク -31%） |
| 遅延読み込みライブラリの負荷 | 不採用（効果なし・404を36件誘発） |
| .each() による大量DOM操作 | 不採用（効果なし・Layout 変化なし） |
| document.write()（チェックリスト外） | 適用済み（効果なし・no-document-write 監査 0.5→1.0） |

- jQuery 3 は ready ハンドラを既にタスク分割している（$(fn) ごとに
  内部の window.setTimeout で個別タスク化）。「ready 内の重い処理が
  1つの巨大タスクに固まる」という前提が本サイトでは成立しない
- document.write() は皮肉にもタスクを強制分割する副作用を持っていた
  （除去により最長タスク 18.4ms → 22.5ms、PaintImage 15件→80件にバッチ化）
- Layout コストの主因は JS ではなく DOM 規模（2,561要素、dom-size 監査 score 0.5）

LCP: 1942ms
CLS: 0.000
TBT: 0ms
FCP: 78ms
SI: 1934ms
Overall Score: 99

long-tasks 監査: items 0件 / 50ms超・30ms超の RunTask ともに0件

  • CLSを改善

    a761c07b · icomoon アイコンフォントの font-display 変更を検証（不採用・効果なし） · 
    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件

  • サードパーティタグを除去

    889c52b5 · 残存サードパーティタグを一括除去（最終スイープ） · 
    サードパーティタグを除去

| 項目 | 状態 |
|------|------|
| Channel Talk（チャットウィジェット） | 適用済み（20リソース） |
| Facebook Pixel | 適用済み（5リソース） |
| Microsoft Clarity | 適用済み（7リソース） |
| Google Analytics（UA-2181747-1） | 適用済み（10リソース + HTML） |
| Google Ads gtag.js（AW-*） | 適用済み（74リソース + HTML） |
| GTM コンテナ GTM-5KTSTNG（+ 子タグ46件） | 適用済み |
| GTM コンテナ GTM-PWVZ9BR（+ 入れ子GTM） | 適用済み（9リソース + HTML） |
| 残存タグ一括スイープ（Intimate Merger / zen.one / LINE / Mercari / Mieruca / Buyee / Cloudflare Insights / ブラウザノイズ） | 適用済み（32リソース） |
| Public CDN | 該当なし（cdnjs/jsdelivr/unpkg/ajax.googleapis/code.jquery/bootstrapcdn いずれもヒット0件。jQuery/Bootstrap は /bundles/* で自社配信） |
| Google Fonts | 除去対象外として保護（3リソース残存） |
| s.naturum.co.jp（自社アクセス解析 naLog） | 除去対象外として保護（2リソース残存） |

index.json 245リソース = 第一者 *.naturum.co.jp 242件 + Google Fonts 3件
サードパーティ・ブラウザノイズの残存 0件

LCP: 1997ms
CLS: 0.005
TBT: 0ms
FCP: 84ms
SI: 2055ms
Overall Score: 99

LCP -7738ms (-79.5%) / SI -8036ms (-79.6%) / Overall Score +33
リソース 448→245件、転送量 8.77MB→3.42MB、展開後 26.13MB→5.00MB

  • オリジナルデータ

    4ee9f483 · オリジナルデータ · 
    オリジナルデータ

LCP: 9735ms
CLS: 0.005
TBT: 0ms
FCP: 75ms
SI: 10091ms
Overall Score: 66