タグ

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

  • 補足施策

    7f2f43d4 · Swiper の preloadImages: false 明示（採用／効果ゼロ・LCPフェーズP6の回避完全性の裏付けと再発防止） · 
    補足施策

| # | コミット | プラクティス | 主要効果 |
|---|----------|-------------|----------|
| P10 | f2c110e | autoplay動画1.5MBの二重DL解消と遅延化 | 初期転送量 -1.51MB（-59.1%）、loadEventEnd -178.3ms |
| P2 | 729d7d2 | 静的アセット249件への Cache-Control 付与 | uses-long-cache-ttl / cache-insight ともに 0.5→1.0 |
| P5 | 30c5d20 | HTMLのminify | 400,088→259,378B（-35.2%） |
| P7 | b2edd2a | JavaScriptのminify（15本） | unminified-javascript 0.5→1.0、実効削減 -39,550B |
| P6 | d836238 | 残存未使用CSSのパージ | レンダーブロッキングCSS -28.7% |
| P3 | 4b0946c | 検索パネルのオンデマンド化 | FCP -20ms、DOM -1,424、UpdateLayoutTree -40% |
| P4 | af58ccd | カテゴリツリーの遅延読み込み | DOM -694（累積 4,588→2,470、-46.2%） |
| P8 | 7444779 | 残存する過大画像の適正サイズ化（派生161件） | uses-responsive-images 0.5→1.0、全ページ画像 mobile -1.92MB |
| P1 | ace19c0 | index.js への async 付与（必須実施項目） | 効果なし（実測で確定） |
| P9 | 19030c5 | cache-control: no-store 解消による bfcache 対応 | bf-cache 0→1.0、戻る操作 757ms→55ms（-92.7%） |
| - | 7f2f43d | Swiper preloadImages: false の明示 | 効果なし（再発防止としての価値） |

| 項目 | 状態 |
|------|------|
| WebP最適化 | 適用済み（LCPフェーズ。JPEG/PNG 0件） |
| JS第1段階（body末尾移動） | 適用済み（TBTフェーズ。head内script 0件） |
| JS第2段階（async付与） | 実施済み（P1）・効果なし。外部15本中14本がasync不可 |
| CSS結合 | 適用済み（FCPフェーズ。link rel=stylesheet 1件のみ） |
| TTFB 50msシミュレーション | 廃止項目（仕様どおりスキップ） |

| 項目 | 根拠 |
|------|------|
| Google Fonts の廃止 | Webフォントリソース0件、link 5件中フォント関連0件 |
| 日本語Webフォントの廃止 | @font-face は swiper-icons の base64 1件のみ（P6で削除済み）。デバイスフォント使用 |
| 高速ネットワークのシミュレーション | 帯域中央値 113.7Mbps、ping 17.3ms、network-rtt score 1 |

| 監査 | 開始時 | 完了時 |
|------|--------|--------|
| uses-long-cache-ttl | 0.5（97リソース） | 1.0（0件） |
| cache-insight | 0.5（2,514 KiB） | 1.0 |
| unminified-javascript | 0.5（39 KiB） | 1.0 |
| uses-responsive-images | 0.5（139 KiB） | 1.0 |
| bf-cache | 0 | 1.0 |
| total-byte-weight | 1.0（2,555 KiB） | 1.0（797 KiB） |
| image-delivery-insight | 0.5（519 KiB） | 0.5（323 KiB。残存56%はDPR未考慮の誤検出） |
| unused-css-rules | 0.5（18,837B） | 0.5（14 KiB。満点化を目的化すべきでない） |
| dom-size | 0.5（4,588要素） | 0.5（2,470要素、-46.2%） |
| uses-passive-event-listeners | 0.5 | 0.5（jQuery 3.4.1 内部。対象外） |

1. unminified-html 監査は Lighthouse に存在しない。gzip後でも -23% 残るため
   「gzipしているからminifyは不要」は成立しない。
2. unused-css-rules を満点にすることを目的化すべきでない（初回ロードで当たらないだけの
   ルールを未使用に数える。16シナリオの実測カバレッジで裏付け）。
3. image-delivery-insight の残存56%はDPR未考慮の誤検出。対処すべきでない。
4. DOM要素数の削減量とメインスレッド削減量は比例しない。
5. visibility:hidden はレンダリング対象のため不可視パネル配下の画像8件が実際にDLされていた。
6. 1つのヘッダ（no-store）が2つの弱点を生んでいた（bfcache無効化とHTMLのCDN非キャッシュ）。
7. UIライブラリの既定オプション（Swiper preloadImages）がパフォーマンス施策を静かに打ち消す。

- P9（no-store解消）はセキュリティ要件との兼ね合いがあり「提言」の位置づけ。
  6件の Set-Cookie を返すログイン状態依存ページであり、無条件に外すべき施策ではない。
- P2（Cache-Control）の実装時はURLバージョニングの併用が必要。

LCP: 193ms
CLS: 0.000
TBT: 0ms
FCP: 178ms
SI: 524ms
Overall Score: 100

Lighthouse総転送量: 2,616,459B → 816,557B（-68.8%）

  • LCPを改善

    0f43b2bc · 計測環境の正常化: ドキュメントTTFBを実測値591msに復帰（プラクティスではない） · 
    LCPを改善

| plan.md番号 | コミット | プラクティス | 主要効果 | 改修主体 |
|---|----------|-------------|----------|----------|
| P1 | a426ce3 | LCP画像の preload + fetchpriority=high | トレース実測LCP -18.7ms | フロントエンド |
| P2 | 44c152f | 初期ビューポート外177 src に loading="lazy" | Lantern LCP -139ms、初期転送量 -6.17MB | フロントエンド |
| P5 | c6a4419 | 全画像WebP化169件 | 転送量 -4.35MB、modern-image-formats 0.5→1.0 | 画像制作＋CDN |
| P3 | 5e12a8b | サムネイル帯の適正サイズ化（148px派生） | Lantern LCP -33ms、critical window -736KB | 画像制作＋CDN |
| P4 | 05893e4 | LCP画像の適正サイズ化（721px派生） | Lantern LCP -21ms、critical window -177KB | 画像制作＋CDN |
| P6 | 6329939 | picture+media によるPC/SP出し分け | 転送量 -1.79MB、リクエスト -23件 | フロントエンド |
| P7 | 9b8cfcd | LCP画像のCDNエッジキャッシュ化（48件） | LCP画像TTFB -47ms | インフラ／CDN |
| P8 | ac83d56 | ドキュメントTTFB短縮シミュレーション（591→200ms） | 実ブラウザ観測LCP 782→390ms（-392ms） | インフラ／サーバー |
| - | 0f43b2b | （プラクティスではない）計測環境の正常化 | - | - |

| 項目 | 状態 |
|------|------|
| LCP対象画像の優先読み込み不足 | 適用済み（P1。発行順位16→3位、priority Medium→High） |
| 画像の最適化（サイズ・データ量） | 適用済み（P3・P4。critical window -913KB） |
| 画像の最適化（WebP変換） | 適用済み（P5。-60.1%） |
| 画像の最適化（フォーマット選択） | 適用済み（P5。JPEG -63.2% / PNG -36.0%） |
| 不要な画像のDL（PC用画像がSPでDL） | 適用済み（P6。-1.79MB） |
| 不要な画像のDL（picture/MQ出し分け） | 適用済み（P6。出し分け機構が完全に存在しなかった） |
| 遅延読み込みの完全な欠如（追加発見） | 適用済み（P2。loading属性0件、203画像が1.2msバーストで一斉発行） |
| 海外サーバーからの配信 | 該当なし（国内Akamaiエッジ、ping RTT 17.3ms） |
| CDNの活用が不完全（派生発見） | 適用済み（P7。MISS⟺Set-Cookie の相関100%） |

1. psq playback は二層構造。ネットワーク再生層（トレース実測）は durationMs の逐語再生で
   実バイト数を参照しないが、Lantern層（Lighthouse報告値）は transferSize で再計算するため
   バイト削減が報告値に現れる。

2. Swiper の preloadImages: true が new Image() で強制DLを行い、loading="lazy" と
   display:none を両方無効化していた。picture化で初めて遅延が実効化（mobile初期画像 -78.7%）。

3. uses-responsive-images はURL単位で「全要素中の最大表示サイズ」を採用するため、
   URL使い回しサイトでは過大画像を構造的に見落とす（本フェーズで2例確認）。

4. Lantern は network-server-latency をオリジンの全リクエストTTFB中央値から推定するため、
   「速いリクエストを消すと推定サーバ遅延が悪化して見える」逆説がある（P6で対照実験により立証）。

5. LCP 782ms の 75.6% がドキュメントTTFB（インフラ側の課題）。
   P1〜P7を全部適用してもこの支配率はほぼ不変だった（76.2% → 75.6%）。

6. P7はP5の前提条件。.webp URLへ移行するとCDNキャッシュルール未修正では
   169件がMISSに転落し、-4.35MBの効果が相殺されうる。

7. Lighthouse有効計測の ttfbMs 下限が 525 に移動した（FCPフェーズ時点の500はもはや無効）。

| 監査 | 開始時 | 完了時 |
|------|--------|--------|
| lcp-discovery-insight | score 0 | score 1 |
| modern-image-formats | score 0.5（3,972 KiB） | score 1（0件） |
| uses-optimized-images | score 0.5（894 KiB） | score 1（0件） |
| image-delivery-insight | score 0.5（3,244 KiB） | score 0.5（519 KiB、約-84%） |
| uses-responsive-images | score 0.5 | score 0.5（構造的限界により満点化困難） |

LCP: 204ms
CLS: 0.000
TBT: 0ms
FCP: 204ms
SI: 535ms
Overall Score: 100

トレース実測LCP: 790.3ms → 751.7ms

  • FCPを改善

    e50e60d7 · 計測環境の正常化: ドキュメントTTFBを実測値591msに復帰（プラクティスではない） · 
    FCPを改善

| # | コミット | プラクティス | FCPへの効果 |
|---|----------|-------------|-------------|
| 1 | d7c76f2 | CSS 10本を1本に結合（必須） | 観測FCP -71.9ms（807.9 → 736.0ms） |
| 2 | 25e883b | 結合済みCSSのminify（504KB → 359KB） | シミュレーション上は効果なし。実配信でgzip後 -12.4KB |
| 3 | bd3d93f | 未使用CSSの削減（359KB → 145KB、-59.5%） | シミュレーション上は効果なし。実配信でgzip後 -26.1KB |
| 4 | 05548e2 | ドキュメントTTFB短縮シミュレーション（591 → 200ms） | 観測FCP -396ms（実ブラウザ計測） |
| - | e50e60d | （プラクティスではない）ドキュメントTTFBを591msに復帰 | 計測環境の正常化 |

| 項目 | 状態 |
|------|------|
| 【必須】GZIP圧縮 | 適用済み（テキスト系33件中31件がgzip済み。非gzipの2件は配信されない403ページ。対応不要） |
| パブリックCDNの同一ドメイン化 | 該当なし（233件全件が同一ドメイン、CDNホスト0件） |
| CSSが別ドメインから配信 | 該当なし（CSS 10本すべて同一ドメイン） |
| 複数CSSの一本化 | 適用済み（10本→1本。観測FCP -71.9ms） |
| script要素によるレンダリングブロック | 適用済み（TBT P5で対応済み。head内script 0本） |
| CSSの@import使用 | 該当なし（再帰検索で0件） |
| 不使用CSSの存在 | 適用済み（-59.5%。残存18KiBは削除不可能） |
| document.write | 該当なし（0件） |
| Google Optimizeによる表示制御 | 該当なし（0件） |
| preloadの誤用 | 該当なし（リソースヒント全種0件） |
| クリティカルCSSの逆効果 | 該当なし（styleブロック0件、動的注入0件） |
| アニメーションによる表示遅延 | 該当なし（該当CSSは存在するが対象要素がこのページに0件） |

1. psq playback はバイト削減を速度に反映しない（記録済みのttfbMs/durationMsのみで再現）。
   P2・P3の「効果なし」はシミュレータの仕様であり、実配信での削減（合計gzip後 -38.5KB）は実在する。
   P1が -71.9ms を出せたのはリクエスト本数（10→1）を変えたため。

2. ttfbMs < 500 で Lighthouse の計測が破綻する（500と450の間に約+1,940msの不連続な段差）。
   P4のLighthouse計測値（SI 1536ms / trace観測FCP 2334ms）は無効値であり、指標推移グラフに使用してはならない。

3. Lighthouse報告FCP（Lantern値）はドキュメントTTFBに一切反応しない（掃引全域で356〜383ms）。
   このページのFCPの81%を占める最大の弱点は、PageSpeed Insightsのスコアでは原理的に可視化できない。

- P1〜P3: フロントエンドのコード改修のみで実現可能
- P4: インフラ／サーバーサイド改修（アプリ応答速度・CDN・キャッシュ・DBクエリ）を要する

P4の効果はP1〜P3の合計の5.5倍だが、改修の費用・リードタイム・実施主体が根本的に異なる。

style.css はサイト全体で共有される単一の巨大CSSであり、トップページから到達不能なルールが
ルール数で68%・バイトで59.5%を占めていた。ページ別CSS分割またはクリティカルCSS抽出で恒久的に解消できる。

LCP: 369ms
CLS: 0.000
TBT: 0ms
FCP: 352ms
SI: 606ms
Overall Score: 100

観測FCP（トレース実測）: 807.9ms → 727.5ms

  • TBTを改善

    70b9333c · 全スクリプト要素をbody末尾へ出現順のまま移動（TBTへの効果はゼロ／FCP・SIに改善方向を観測） · 
    TBTを改善

| # | コミット | プラクティス | TBTへの効果 |
|---|----------|-------------|-------------|
| 1 | 951467f | カート合計取得の同期XHRを非同期化 | 497ms → 0ms（全量を解消。Overall 87 → 100） |
| 2 | b8be5e6 | 検索パネルの同期Ajax 3箇所を非同期化 | 効果なし（INP・操作応答性では改善） |
| 3 | （実施せず） | 残存ロングタスクのsetTimeout分割 | 該当なし（P1後のトレース実測で50ms超0本） |
| 4 | 4ea6f9c | jquery-ui.min.js を autocomplete 系に絞る | 効果なし（unused-javascript 0.5→1.0） |
| 5 | 70b9333 | 全スクリプト要素をbody末尾へ出現順のまま移動 | 効果なし（FCP -28ms / SI -38ms の改善方向） |

TBT 497ms の全量がただ1本のロングタスク（547.3ms）に起因していた。

  RunTask 547.3ms
    TimerFire 547.2ms（jQuery ready ディスパッチ）
      FunctionCall 547.2ms  jquery-3.4.1.min.js
        URLLoader::loadSynchronously 545.4ms   ← 同期XHR

imageCart-smt.js の $.ajax({ async: false }) による POST doGetBasketTotal（TTFB 540ms）。
TBTはロングタスクの50ms超過分の総和であるため 547 - 50 = 497 となり、Lighthouseの実測値と誤差ゼロで一致した。

| 項目 | 状態 |
|------|------|
| ロングタスク（50ms以上の処理） | 適用済み（P1で解消。TBT 497ms→0ms） |
| スライダーの複数初期化 | 効果なし（実測14.7ms / 12.2ms で50ms未満、TBT寄与0ms） |
| DOMContentLoadedハンドラ内の重い処理 | 適用済み（実体はP1対象の同期XHR） |
| jQueryの.each()による大量DOM操作 | 効果なし（対象要素が1桁、ロード時TBT寄与0ms） |
| XMLHttpRequestによる同期通信 | 適用済み（該当4件すべて対処。P1で1件、P2で3件） |
| jQueryの.load()による同期通信 | 該当なし（検索結果0件） |
| 遅延読み込みライブラリ自体の負荷 | 該当なし（lazysizes等・loading="lazy" ともに0件） |
| unused-javascript の解消（チェックリスト外） | 適用済み（score 0.5→1.0、パース/評価 -79%） |
| スクリプトのbody末尾移動（チェックリスト外） | 適用済み（TBTへの効果なし） |
| async属性の付与 | 該当なし（15本すべてが被依存または即時DOM取得） |

| 監査 | 開始時 | 完了時 |
|------|--------|--------|
| total-blocking-time | 500ms（score 0.58） | 0ms（score 1） |
| long-tasks items | 1件（547ms） | 0件 |
| max-potential-fid | 550ms（score 0.06） | 20ms（score 1） |
| bootup-time | 0.6s | 0.0s（score 1） |
| mainthread-work-breakdown | 0.8s | 0.3s（score 1） |
| unused-javascript | score 0.5（60 KiB） | score 1（0件） |
| メインスレッド最長タスク | 547.3ms | 26.1ms（50ms超0本） |

TBT改善フェーズで扱えるJavaScript関連監査は、すべて満点に到達した。

LCP: 368ms
CLS: 0.000
TBT: 0ms
FCP: 339ms
SI: 637ms
Overall Score: 100

  • CLSを改善

    00f6a0b8 · ページ全体の残る寸法未指定画像への寸法指定 · 
    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

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

    d8299707 · Google Tag Manager（GTM-5TQV6B）を除去 · 
    サードパーティタグを除去

| プラクティス | コミット | 対象 |
|-------------|---------|------|
| 1 | 4f4ca31 | mPulse（Akamai Boomerang） |
| 2 | 247ba5e | Yahoo!タグマネージャー（YTM） |
| 3 | ea01d7c | Mieruca（ミエルカヒートマップ）と Yappli SDK |
| 4 | d829970 | Google Tag Manager（GTM-5TQV6B、下流90ドメイン195リソース） |

| 項目 | 状態 |
|------|------|
| HTML上のサードパーティ入口5箇所の除去 | 適用済み |
| index.json の除去漏れ確認 | 該当なし（243リソース中、ファーストパーティ234件＋ブラウザ内部通信9件のみ） |
| Public CDN の誤除去 | 該当なし（元々存在せず。ライブラリは /ec/js/libs/ からセルフホスト配信） |
| Google Fonts の誤除去 | 該当なし（Webフォントの読み込み自体が存在せず） |
| ブラウザ内部通信の保持 | 適用済み（除去不能な9リソースを保持） |
| レグレッションテスト | 全プラクティスで Diff 0.0000% |

| 段階 | LCP | CLS | TBT | FCP | SI | Score |
|------|-----|-----|-----|-----|-----|-------|
| オリジナル | 1097ms | 0.163 | 502ms | 535ms | 9392ms | 72 |
| P1後 | 1093ms | 0.163 | 499ms | 530ms | 9270ms | 72 |
| P2後 | 1082ms | 0.163 | 501ms | 523ms | 9195ms | 72 |
| P3後 | 901ms | 0.163 | 499ms | 348ms | 8469ms | 72 |
| P4後 | 903ms | 0.163 | 493ms | 349ms | 792ms | 81 |

LCP: 903ms
CLS: 0.163
TBT: 493ms
FCP: 349ms
SI: 792ms
Overall Score: 81

447リソース / 14.64MB → 233リソース / 10.32MB

- SI悪化の実質ほぼ全量がGTM配下の連鎖読み込みに起因していた（8469ms → 792ms）
- TBTは493msとほぼ不変であり、残存するTBTはファーストパーティJS由来
- CLS 0.163も完全に不変であり、レイアウトシフトはページ自身のマークアップ由来
- head内の同期クロスオリジンスクリプト（Yappli SDK）がFCPを直撃していた知見は、ファーストパーティの同期スクリプト群の検証に応用できる

  • オリジナルデータ

    ec22d511 · オリジナルデータを記録 · 
    オリジナルデータ

対象URL: https://www.hiraki.co.jp/ec/cmTopPage.html

LCP: 1097ms
CLS: 0.163
TBT: 502ms
FCP: 535ms
SI: 9392ms
Overall Score: 72