タグ

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

    補足施策
    
    | 項目 | 状態 |
    |------|------|
    | 画像のWebP変換 | 適用済み(4829197・残存GIF 2件) |
    | JS最適化 第1段階(body末尾移動) | 適用済み(4052e17) |
    | JS最適化 第2段階(async付与) | 適用済み(845f941・**simulated FCP -46.5%**) |
    | CSS結合 | FCPフェーズ(26653c3)で実施済み |
    | GZIP圧縮 | FCPフェーズ(38d009a)で実施済み |
    
    | 項目 | 状態 |
    |------|------|
    | 残存GIFのWebP変換 | 適用済み(4829197・-15.7KB) |
    | 画像の適正サイズ化 第1弾(非カルーセル20件) | 適用済み(e66817c・**-351KB / -62.7%**) |
    | 画像の適正サイズ化 第2弾(第2カルーセル9件) | 適用済み(7b61a1b・-88KB / -37.0%) |
    | 全script要素のbody末尾移動 | 適用済み(4052e17・render-blocking-resources 満点化) |
    | 非依存scriptへのasync付与 | 適用済み(845f941・**simulated FCP -46.5%**) |
    | HTML軽量化(コメント + ネストHTML文書) | 適用済み(b4638f6・**HTML -18.4%**) |
    | インライン<style>のパージ | 適用済み(f75ce24・HTML -5.3%) |
    | キャッシュTTLの設定 | 適用済み(d67868d・効果なし。uses-long-cache-ttl 0.5→1.0) |
    | 初期非表示DOMの遅延生成(ハンバーガーメニュー) | 適用済み(a6da9a5・**dom-size 0.5→1.0、DOM 925→763**) |
    | fs_style.css 第2段階未使用CSS除去 | 適用済み(9479dab・**unused-css-rules 0.5→1.0、CSS -40.3%**) |
    | 第2カルーセルのlazy loading | 適用済み(6084d74・adaptiveHeight非再発を実証) |
    | jQuery 3重読み込みの解消 | **不採用**(208882b+revert・SRI制約により検証不能) |
    | フッターアコーディオン等の遅延生成 | **スキップ**(dom-size満点済みで追加利益ゼロ・純CSS実装をJS依存に後退させるリスク) |
    | Google Fonts / 日本語Webフォント | 該当なし(fonts.googleapis/gstatic 0件。@font-face は fs-icon 1件のみ) |
    | 高速ネットワークシミュレーション | 条件不成立(実測RTT 0.259〜1.488ms、既に高速環境) |
    
    | 項目 | 開始時 | 完了時 |
    |------|--------|--------|
    | 転送量 | 2.51 MB | 約 2.0 MB |
    | HTMLサイズ | 72,276 B | 55,983 B(-22.5%) |
    | DOM要素数 | 925 | 763(-17.5%) |
    | CSSサイズ | 94,308 B | 56,306 B(-40.3%) |
    | uses-responsive-images | 556 KiB / 28件 | 46 KiB / 10件 |
    | uses-long-cache-ttl | 0.5(62件) | **1.0(0件)** |
    | dom-size | 0.5 | **1.0** |
    | render-blocking-resources | 0 | **1.0** |
    | unused-css-rules | 0.5(13,014 B) | **1.0(0 B)** |
    | Overall Score | 100 | **100** |
    | CLSスパイク率 | 0/20 | **0/20(全プラクティスで維持)** |
    
    スクリプトのタイミングを変える施策は**8回連続で他の指標を悪化**させてきたが、
    **async 付与(845f941)が初めて成功**し simulated FCP を -46.5% 改善した。
    defer(3回試行、全て不採用)と async の違いが決定的だった。
    
    simulated FCP 203.5 → 967.5ms は「悪化」ではなく「正常化」だった。
    適用前の 203.5ms は**HTML文書の受信完了(約490ms)より前**で物理的にあり得ない値であり、
    適用後の約950msが妥当。observed FCP は一貫して約1580msで不変。
    
    inventoryに記録されたファイルのSHA-256が integrity 属性と不一致のため、
    全計測を通じて jQuery 3.4.1 が一度も実行されていない。
    **psq の record/playback アーティファクトであり実サイトの欠陥ではない**が、
    **jQueryが3バージョン同時ロードされ最新の3.4.1が古い1.7.2に巻き戻されている**という弱点自体は実在する。
    
    Lighthouseの計測環境が帯域無制限(throughputKbps: 0)のため。
    **実回線・モバイルデータ環境では大きな効果が期待できる。**
    
    LCP: 約1434〜1504ms
    CLS: 0.000
    TBT: 0ms
    FCP: 約515〜545ms
    SI: 約1514〜1552ms
    Overall Score: 100
  • LCPを改善

    LCPを改善
    
    | 項目 | 状態 |
    |------|------|
    | LCP画像の優先読み込み(fetchpriority / loading="eager") | 適用済み(8a6d5a5・Load Delay 766ms→0ms) |
    | 画像の最適化(WebP変換) | 適用済み(f26aea6・**転送量 -47.1%**) |
    | 画像サイズ過大(logo2_sp.gif) | 適用済み(0ef0d75・3406x850→436x109、-71.3%) |
    | オフスクリーン画像の遅延読み込み | 適用済み(18ec494・23件にloading="lazy") |
    | 重複ダウンロード | 適用済み(419a758・-1件 / -35,748B) |
    | パブリックCDNの同一ドメイン化 | 不採用(f6a1d62+revert・simulated -77.4%だが**observed不変**) |
    | recommend.js の defer化 | 不採用(2bd06b0+revert・simulated LCP +27.9%悪化) |
    | PC用画像のSP配信の解消 | 不採用(33fc4bb+revert・**observed LCP +32.4%、二峰化**) |
    | picture/srcset による出し分け | 該当あり(未導入が弱点。ただし本サイトはPC/SPで別HTMLを配信する設計) |
    | 海外サーバーからの配信 | 該当あり(jsdelivr フランクフルト492ms / code.jquery.com ニューヨーク356ms) |
    
    | 指標 | 開始時 | 完了時 |
    |------|--------|--------|
    | simulated LCP(中央値) | 1390.0 ms | 約 1308 ms |
    | observed LCP(中央値) | 1590.0 ms | 約 1576.5 ms |
    | **転送量(total)** | **4.88 MB** | **2.51 MB(-48.6%)** |
    
    LCPそのものの改善はごくわずかだが、**転送量をほぼ半減**させた。
    
    プラクティス1は simulated LCP を **-77.4%** 改善したが、observed LCP は **+0.28%** で完全に不変だった。
    
    lcp-planner が実装前に「observed LCP も改善すること」を採用条件として明文化していたため、
    見かけ上-77%の「改善」を正しく退けることができた。
    
    最終状態のLCP内訳: TTFB 約489ms(38%)/ Load Delay **0ms** / Load Time 約14ms / **Render Delay 約800ms(62%)**
    
    当初「webstore.js の1.68MB同期バンドルが原因」としていたが、**実測により否定された**:
    
    - 最長RunTask長は **21.9〜23.3ms**、50ms超は **0件**
    - メインスレッドの総作業量は **131.8ms** のみ、bootup-time は 0.0ms
    - **cpuSlowdownMultiplier: 1(CPUスロットリングなし)**
    
    **真の原因は Lantern がシミュレートするネットワーク遅延(requestLatencyMs: 562.5)** であり、
    LCP要素(カルーセル画像)の表示に必要な
    jQuery → slick → webstore.js → recommend.js という
    **複数オリジンにまたがる依存チェーンの段数**に依存する。
    
    これを短縮するにはカルーセルをJSに依存せずCSS/HTMLのみで初期表示できるよう
    アーキテクチャを変更する必要があり、inventoryの編集では対処不可能。
    
    プラクティス6では、早期(507ms)にリクエストされていた `logo_pc.gif`(わずか7.8KB)を
    削除しただけで、**20回中10回が約1秒遅いクラスタに分裂**した。
    practice-commiter が git stash で対照を10回再取得し、二峰化が消えることを確認して因果を確定した。
    
    **このページのロード順序は極めて脆く、無関係に見える小さなリソースの削除でも不安定化する。**
    
    LCP: 1318ms
    CLS: 0.000
    TBT: 0ms
    FCP: 232ms
    SI: 1447ms
    Overall Score: 100
  • FCPを改善

    FCPを改善
    
    | 項目 | 状態 |
    |------|------|
    | GZIP圧縮(必須プラクティス) | 適用済み(38d009a・未圧縮は404ページ2件のみ・効果なし) |
    | 6-1-6.js のslick初期化を setTimeout 分割 | 適用済み(e9da6ea・FCP -50.7%) |
    | 不使用CSSの除去 | 適用済み(ecd1161・FCP効果なし・転送量 -77%) |
    | CSSが別ドメインから配信(/closest-css) | 適用済み(6ef9fe6・FCP -4.7%) |
    | 複数CSSの一本化(/consolidate-css) | 適用済み(26653c3・FCP -52.0%・**CLSスパイクも消滅**) |
    | document.write の使用 | 適用済み(6702410・効果なし) |
    | Webフォントの font-display | 適用済み(86c14c8・効果なし) |
    | preconnect の追加 | 適用済み(0dd70d6・効果なし) |
    | recommend.js の defer化 | 不採用(ca2e174+revert・FCP +95.7% 悪化) |
    | パブリックCDNの同一ドメイン化(/localize-cdn) | 不採用(3238152+revert・FCP +13.4% 悪化。**ただしLCP -76.7%。LCPフェーズへ申し送り**) |
    | CSSの @import 使用 | 該当なし(稼働中8CSS全ファイルで0件) |
    | Google Optimize による表示制御 | 該当なし(async-hide 0件) |
    | preload の誤用 | 該当なし(preload/prefetch/preconnect/dns-prefetch が元々0件) |
    | クリティカルCSSの逆効果 | 該当なし(動的CSS注入0件) |
    | アニメーションによる表示遅延 | 該当なし(visibility:hidden/opacity:0 は全て部分要素) |
    
    | 指標 | 開始時 | 完了時 | 改善率 |
    |------|--------|--------|--------|
    | simulated FCP(公式指標) | 約 905 ms | 約 205 ms | -77.3% |
    | **observed FCP(実測寄り)** | 約 2604 ms | 約 1593 ms | **-38.8%** |
    
    Lighthouse の simulated FCP(約200ms)が HTML文書の受信完了(約490ms)より前になっており、
    物理的にあり得ない値になっている。これは Lantern(シミュレーションエンジン)の特性である。
    
    **公式指標の -77.3% だけを示すと、実際のユーザー体験の改善幅を過大に伝えることになる。**
    Wikiには simulated と observed の両方を記載する。
    
    なお、全プラクティスが同一条件で対照実験されているため、
    個々の採用・不採用の判断(相対比較)の妥当性には影響しない。
    
    プラクティス5(CSS結合)により、それまで10〜20%の頻度で発生していた
    大きなCLSスパイク(CLS 0.38〜0.43)が完全に消滅した(0/20)。
    
    CLS改善フェーズで「解決困難」とした弱点が、FCPフェーズのCSS結合によって副次的に解決された。
    真因は「FCPの速さ」ではなく「レンダリング開始タイミングのばらつき」だった。
    
    同期スクリプトが意図せずレンダリングパイプラインの区切りとして機能しており、
    defer化・分割すると他の指標が悪化する現象が繰り返し観測された。
    本フェーズでは recommend.js の defer化(FCP +95.7%悪化)が該当。
    
    パブリックCDNの同一ドメイン化(3238152、本フェーズでは不採用)は
    **LCP中央値を 1358ms → 316.5ms(-76.7%)と劇的に改善**した。
    LCPフェーズで必ず再評価すること。
    
    LCP: 1310ms
    CLS: 0.000
    TBT: 0ms
    FCP: 216ms
    SI: 1448ms
    Overall Score: 100
  • TBTを改善

    TBTを改善
    
    | 項目 | 状態 |
    |------|------|
    | ロングタスク(50ms以上) | 検証済み(0件。ただし最長48.41msで閾値まで残り1.59msと判明) |
    | スライダーの複数初期化 | 適用済み(7c9bb5f・最長RunTask 44〜46.5ms → 25.2〜25.9ms) |
    | DOMContentLoadedハンドラ内の重い処理 | 効果なし(プラクティス1の波及効果で 10.44ms → 4.2〜5.1ms に縮小済み) |
    | jQueryの .each() 大量DOM操作 | 適用済み(7c9bb5f) |
    | 重複読み込みされたjQuery 1.7.2 / tab_new.js | 適用済み(016dcaf・48.41ms → 44.66ms) |
    | 同期XHR(.open(...,false)) | 該当なし(ハードコードされた false / !1 は0件) |
    | jQuery .load() による同期通信 | 該当なし(1件はHTMLコメント内で無効) |
    | 遅延読み込みライブラリ自体の負荷 | 該当なし(lazysizes等0件。ネイティブ loading="lazy" を26箇所で使用済み) |
    | jQuery一本化(条件付き) | 実施せず(実施条件「最長タスク45ms以上」が不成立。実測25.2〜25.9ms) |
    | webstore.js の defer 化 | 不採用(46cf452+revert・CLSスパイク率 10%→25%) |
    | 6-1-6.js のslick初期化を setTimeout 分割 | 不採用(57e7ec6+revert・最長RunTask が 4/5回で50ms超に悪化) |
    
    TBTの実測値は開始時も完了時も 0ms で変化していないが、
    **「薄氷の上」だった状態を解消した。**
    
    | 項目 | 開始時 | 完了時 |
    |------|--------|--------|
    | TBT(実測値) | 0 ms | 0 ms |
    | 最長RunTask長 | 48.41 ms | 25.2〜25.9 ms |
    | 閾値50msまでの余裕 | 1.59 ms | 約24 ms(約15倍) |
    
    同期スクリプトやレイアウト処理が意図せず他の処理の直列化・分割点として機能しており、
    それを取り除くと他の指標が悪化する現象が、プロジェクト全体で4回観測された。
    
    | フェーズ | 施策 | 意図せぬ悪化 |
    |----------|------|-------------|
    | サードパーティ除去 | New Relic の同期script除去 | LCPが悪化 |
    | CLS改善 | lazyLoad:"progressive" 除去 | CLSスパイク率 25% |
    | TBT | webstore.js の defer 化 | CLSスパイク率 10%→25% |
    | TBT | 6-1-6.js の強制同期Layout分離 | 最長RunTask が50ms超 |
    
    根本原因は webstore.js(非圧縮1.68MB、jQuery + slick + カスタムコードの同期バンドル)。
    抜本的な解決にはバンドルの分割が必要で、inventoryの編集では対処不可能。
    
    プラクティス3(6-1-6.js の setTimeout 分割)は最長RunTask長を悪化させるため不採用としたが、
    **FCPを 892ms → 418〜435ms と大幅に改善**した。FCP改善フェーズで再検討すること。
    
    LCP: 1296ms
    CLS: 0.006
    TBT: 0ms
    FCP: 908ms
    SI: 1934ms
    Overall Score: 100
  • CLSを改善

    CLSを改善
    
    | 項目 | 状態 |
    |------|------|
    | カルーセルのJS非依存レイアウト固定(必須プラクティス) | 適用済み(85b67b3・ストレス計測 1.1069→0.0055) |
    | ファーストビュー画像への明示的サイズ指定 | 適用済み(f24d705・効果なし) |
    | ウェルカムメッセージ(fs-clientInfo)の領域事前確保 | 該当なし(モバイル幅では display:none のため 0×0) |
    | ヘッダーロゴのvw単位固定化 | 適用済み(7b1a852・部分改善) |
    | 第1カルーセルのスライド画像への明示的サイズ指定 | 適用済み(3ab18b7・効果は断定不可) |
    | ul.slider(6-1-6.js)のレイアウト固定 | 該当なし(top=2403px でファーストビュー外・シフト寄与0件) |
    | レコメンド枠の領域事前確保 | 該当なし(top=922px 以降でファーストビュー外・シフト寄与0件) |
    | 未使用アイコンフォントの font-display 付与 | 該当なし(.slick-prev/next は固定寸法 40×40px でCLSに寄与し得ず) |
    | 動的コンテンツ(document.write/innerHTML 等) | 該当なし(0件) |
    | zoom プロパティの変更 | 該当なし(jQuery内部の zoom:1 ハックのみ) |
    | **第2カルーセルの adaptiveHeight レースコンディション** | **解決困難(未解決・次フェーズへ申し送り)** |
    
    1. サードパーティのアンチフリッカーが隠蔽していた CLS 0.815 規模の構造的弱点を可視化した
    2. カルーセル初期化時のレイアウト崩壊(約1640pxの縮小)を特定し、`:not(.slick-initialized)` による初期化前レイアウト固定で解消した
    3. Chromeが img の `width:%` をデコード完了まで保留する非自明な欠陥を発見し、vw単位への変更で解消した
    4. 検証プロトコルの欠陥(5回計測では偽陰性)を発見し、スパイク発生率による判定に改めた
    
    発生率約1割のCLSスパイク(CLS 0.43前後)が残存する。
    再現条件: FCPが 158〜175ms と異常に早く発生した回でのみ発生(通常時FCPは 858〜936ms)。
    
    試行して効果がなかった対処:
    - `webstore.js` が注入する `lazyLoad:"progressive"` の除去 → 20回中5回(25%)に悪化
    - 両カルーセルの `data-settings` で `adaptiveHeight:false` 化 → 同規模のスパイクを再現
    
    推定真因: 1.68MBの同期JSバンドル(`webstore.js`)のパース・実行完了タイミングと早期初回ペイントとの競合。
    スクリプトの分割・非同期化を扱う TBT/FCP 改善フェーズで再検証すること。
    
    LCP: 1346ms
    CLS: 0.000
    TBT: 0ms
    FCP: 873ms
    SI: 1981ms
    Overall Score: 100
  • サードパーティタグを除去

    サードパーティタグを除去
    
    | 項目 | 状態 |
    |------|------|
    | Leeep(Tracking + Cite ウィジェット) | 適用済み(39件除去) |
    | Mattrz CX(Web接客ツール) | 適用済み(4件除去) |
    | New Relic Browser Agent | 適用済み(10件除去) |
    | GTM-MXM69D9N(Optimize Next アンチフリッカー) | 適用済み(1件除去) |
    | GTM-T259TF(広告系コンテナ・67ホスト連鎖) | 適用済み(143件除去) |
    | GTM-58R5BNH + Google Analytics | 適用済み(15件除去) |
    | Ptengine / Microsoft Clarity / contx | 適用済み(26件除去) |
    | Public CDN(jQuery×3, slick-carousel) | 除去対象外(4件残存・後続フェーズで対処) |
    | Google Fonts | 該当なし(本ページではリクエスト0件) |
    | 自サイト・ECプラットフォーム資産 | 除去対象外(112件残存) |
    | Chrome内部通信 | 除去対象外(8件残存・ページのリソースではない) |
    
    | 項目 | オリジナル | 除去後 |
    |------|-----------|--------|
    | リクエスト数 | 362 | 124 |
    | 転送量 | 11.10 MB | 4.92 MB |
    
    残存124件にマーケティング/分析/広告/チャット系のサードパーティタグは0件(3rdparty-evaluatorが独立に集計して確認)。
    
    LCP: 1383ms
    CLS: 0.000
    TBT: 0ms
    FCP: 907ms
    SI: 1997ms
    Overall Score: 100
    
    サードパーティ除去により計測の二極化は大幅に改善したが、3rdparty-evaluatorの独立追加計測では3回中1回で CLS 0.365(Score 82)を検出した。
    CLSの主因は `div.fs-pt-carousel__track`(slick-carousel)で寄与0.7849(約96%)と特定済み。
    構造的な高さ固定対策は未実施のため、CLS改善フェーズはスキップせず実施する。
  • オリジナルデータ

    オリジナルデータ
    
    LCP: 10325ms
    CLS: 0.000
    TBT: 6ms
    FCP: 1020ms
    SI: 8497ms
    Overall Score: 67