タグ

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

    補足施策
    
    | 項目 | 状態 |
    |------|------|
    | WebP最適化 | 対象0件を実測確認(index.json 548件にJPEG/PNGは存在せずP-LCP-4で適用済み) |
    | JS最適化 第1段階(body末尾移動) | 適用済み(script 30本を移動。効果なし=P-FCP-5のdefer付与で既に解決済み) |
    | JS最適化 第2段階(async付与) | 適用済み(対象はmessage.js 1本のみ。19本中18本がjQuery依存のため) |
    | CSS結合 | FCPフェーズで適用済み(9本→1本) |
    | GZIP圧縮 | 有効(text/JS/CSS/JSON/SVG/XMLで未適用0件) |
    
    | 項目 | 状態 |
    |------|------|
    | HTMLファイルサイズ | 適用済み(空白・コメント324個・死んだ広告スタブを除去。生サイズ -22.7%) |
    | 未使用CSS | 適用済み(実行時カバレッジで追加除去。CSS累計 -40.0%) |
    | 結合CSSのminify | 適用済み(unminified-css 0.5→1) |
    | IE向けポリフィル | 適用済み(legacy-javascript 0.5→1。実バグも同時解消) |
    | passive event listener | 適用済み(指摘2→1件。残1件はjQuery内部で対処不能) |
    | フォントのインライン化 | 適用済み(最長チェーン345→161ms、深度3→2) |
    | キャッシュ設定 | 適用済み(シミュレーション。uses-long-cache-ttl/cache-insight 0.5→1) |
    | bf-cache | 適用済み(シミュレーション。score 0→1、failure 3→0件) |
    | アニメーションGIF | 適用済み(ajax-loader.gif の読み込み回避) |
    | 初期非表示DOMの遅延生成 | 効果なし(DOM -29.1%だが指標は1つも改善せず。mainに取り込まず) |
    | 画像の表示サイズ等倍リサイズ | 不採用(全件でDiff 10.79%不合格。部分適用でも監査未達成) |
    | jQueryの再minify | 不採用(gzip後はほぼ変化なし。ライブラリ改変は運用適用性が低い) |
    | Google Fonts | 該当なし(サイト自身のHTML/CSSからの参照0件) |
    | 日本語Webフォント | 該当なし(slick.woff 1,540Bのアイコンフォントのみ) |
    | ネットワーク速度シミュレーション | 条件未達(実効帯域中央値120Mbps・RTT実質0msのため実施不要) |
    
    実リクエスト138件を cache-control で分類すると:
    
    | 指定 | 件数 | 転送バイト |
    |------|------|-----------|
    | private | 104 | 904,718B |
    | no-store / no-cache | 11 | 58,723B |
    | 合計(監査対象外) | 115 | 963,441B = 転送バイトの87.2% |
    
    原因は lighthouse/core/audits/byte-efficiency/uses-long-cache-ttl.js L173-190 の
    shouldSkipRecord() が private / no-store / no-cache を無条件に除外していること。
    
    そのため「Est savings of 89 KiB」という指摘は実態の1/10以下である。
    
    P-SUP-10 で当初「private の除去のみ」を試したところ、
    指摘対象が 20件 → 105件 に増加し、wasted-bytes 推定は約5.2倍に悪化した。
    
    private が外れたことで監査の対象に含まれるようになり、
    今度は max-age が短すぎることが新たに指摘されたためである。
    
    max-age も1年に延長する完全是正版で uses-long-cache-ttl / cache-insight とも
    score 0.5 → 1 を達成した。
    
    common.js の initSwiper() 内に以下のコードがあった:
    
        if (String.repeat == null) { /* O(n)ループによる素朴な実装で上書き */ }
    
    String.repeat は静的メソッドとしては存在せず(正しくは String.prototype.repeat)、
    この条件は常に true となる。
    
    結果として全モダンブラウザで、ネイティブの String.prototype.repeat が
    素朴なループ実装に無条件で上書きされていた。L67から実際に呼び出されている。
    
    IE向けポリフィルの残骸除去と同時にこの実行時バグを解消した。
    
    psq の Lighthouse は performance カテゴリのみ実行するため(監査73件)、
    errors-in-console 監査はレポートに含まれない。
    
    本プロジェクトで各所に記録していた「errors-in-console 0件」は、
    キーが存在しないため常に0が返る無効な検証だった。
    
    Puppeteerでリスナーを goto の前に登録する厳密な検証スクリプト
    (persistence/scripts/js_error_check.js)を作成して再検証した結果:
    
    - JSエラー 0件
    - jQuery / $.cookie / $.fn.slick / $.fn.myModal すべて正常に定義
    - カルーセル3系統がすべて初期化(.slick-initialized = 3)
    
    これにより、同期XHRの静的script化・全19本へのdefer付与・
    ライブラリ削除といったリスクの高い変更が実際に壊れていないことが実証された。
    
    P-SUP-10(キャッシュ設定)と P-SUP-11(bf-cache)は index.json の
    rawHeaders を書き換えたシミュレーションであり、実際のサーバー改修ではない。
    P-FCP-8(文書TTFB)・P-LCP-6(画像TTFB)と同じ位置づけである。
    
    LCP: 159ms
    CLS: 0.000
    TBT: 0ms
    FCP: 95ms
    SI: 179ms
    Overall Score: 100
  • LCPを改善

    LCPを改善
    
    | 項目 | 状態 |
    |------|------|
    | LCP対象要素の特定 | 適用済み(メインビジュアルスライダー画像・AVIF) |
    | 画像データの重さがボトルネックか | 該当なし(観測LCPの1.3%のみ。トレース6区間分解で定量化) |
    | WebP変換 | 適用済み(非モダン14件のみ。AVIF 151件は保持) |
    | 過大サイズ画像のリサイズ | 適用済み(65件) |
    | ビューポート外画像の先読み | 適用済み(非表示スライダー7枚にfetchpriority="low") |
    | 画像ホストのキャッシュ設定 | 適用済み(TTFB短縮シミュレーション) |
    | fetchpriority="high" の付与 | 不採用(Load Delayが既に0msで回収余地なし) |
    | head での preload | 不採用(同上の機序) |
    | 同一オリジン配信 | 効果なし(preconnect済みのため。mainに取り込まず) |
    | PC用画像のスマホDL | 該当なし(910_409のリクエスト0件) |
    | picture/srcset による出し分け | 該当なし(19件で実装済み) |
    | 海外サーバー配信 | 該当なし(dig でAkamaiエッジを確認) |
    
    pic2の画像185件の ttfbMs は二峰性の分布を示した:
    
    | 範囲 | 件数 | 解釈 |
    |------|------|------|
    | < 50ms | 137 | エッジキャッシュHIT |
    | 300-600ms | 43 | オリジン往復 |
    | >= 600ms | 3 | ファーストビューの主要3画像 |
    
    突出して遅い3件はすべてファーストビュー:
    - ヘッダーロゴ 895ms / ヘッダーバナー 842ms / LCP画像 789ms
    
    画像193件が cache-control: private でCDN共有キャッシュを禁止されており、
    www には server-timing: cdn-cache; desc=HIT が付くが pic2 には一切付かない。
    
    P-LCP-6 で ttfbMs を実測中央値34msに設定するシミュレーションを行った結果:
    
    | 指標 | 変更前 | 変更後 | 変化 |
    |------|--------|--------|------|
    | 観測LCP | 943ms | 326ms | -617ms(-65.4%) |
    | 観測SI | 731ms | 237ms | -494ms(-67.6%) |
    | スコア算出SI | 426ms | 179ms | -58.0% |
    | スコア算出LCP | 133ms | 136ms | ほぼ不変 |
    
    LCPフェーズ内訳では Load Time が 26.2ms → 0ms になった。
    
    注記: P-LCP-6 は ttfbMs を書き換えたシミュレーションであり実際のサーバー改修ではない。
    
    lcp-discovery-insight は score 0 だったが、不合格理由は priorityHinted: false の一点のみで、
    requestDiscoverable と eagerlyLoaded は合格していた。
    
    トレースのLCPフェーズ内訳を見ると Load Delay は全5runで 0ms。
    fetchpriority="high" が短縮できるのはこの Load Delay であり、既に0msなら回収余地はない。
    
    実際に付与した結果、監査は score 0→1 になったが観測LCPは 948→1,084ms(+14.3%)悪化した
    (カルーセルのスクリプト実行との干渉で描画が遅延)。
    
    この監査は属性の有無で判定しており、実際の改善余地を見ていない(偽陽性)。
    
    なお Load Delay が 0ms なのは P-FCP-8(文書TTFB短縮)の副次効果であり、
    plan.md 策定時(TTFB 1,070ms)には約50msの Load Delay が存在していた。
    
    このサイトの画像は拡張子が .jpg でも実体がAVIFのものが151件ある。
    拡張子で変換対象を選別すると、最も圧縮効率の良い画像群を劣化させる逆最適化になる。
    
    content-type で判定した結果、変換された14件はすべて真正のJPEG/PNGであり、
    AVIF 151件は無傷で保持された。メインビジュアル8枚中7枚もAVIFのまま。
    
    副次的発見: 同じ用途・同じ寸法のスライダー画像8枚のうち1枚だけがJPEGだった。
    自動AVIF変換パイプラインに適用漏れがある。
    
    | 時点 | 観測LCP |
    |------|---------|
    | サードパーティ除去後 | 1,963ms |
    | P-FCP-8(文書TTFB 1070→100ms) | 943ms |
    | P-LCP-6(画像TTFB 中央値化) | 326ms |
    
    フロントエンド施策を全て実施した上で、残る改善余地のほぼ全てが
    サーバー応答時間に集中していることが数値で裏付けられた。
    
    LCP: 136ms
    CLS: 0.000
    TBT: 0ms
    FCP: 94ms
    SI: 179ms
    Overall Score: 100
    
    (観測値: LCP 325ms / FCP 201ms / SI 236ms)
  • FCPを改善

    FCPを改善
    
    | 項目 | 状態 |
    |------|------|
    | GZIP圧縮(必須) | 適用済み(未圧縮2件に適用。FCP効果0msを実測証明) |
    | 複数CSSの一本化(必須) | 適用済み(9本→1本、リクエスト-7件) |
    | 不使用CSSの存在 | 適用済み(purgecssで転送-19.7%、デッドCSS削除) |
    | script要素によるレンダリングブロック | 適用済み(全19本にdefer。RB 13件→1件) |
    | preloadの誤用 | 適用済み(未使用preconnect 7オリジン削除) |
    | CDN同一ドメイン化 | 該当なし(外部CDN 0件、全てセルフホスト) |
    | CSSが別ドメインから配信 | 該当なし(CSS 9件すべて同一ドメイン) |
    | CSSの@import使用 | 該当なし(CSS 9本を展開して全文検索、0件) |
    | document.write | 該当なし(全JS 504,932文字を検索、0件) |
    | Google Optimizeによる表示制御 | 該当なし(async-hide 0件) |
    | クリティカルCSSの逆効果 | 該当なし(動的CSS挿入 0件) |
    | アニメーションによる表示遅延 | 該当なし(全体を隠す実装なし) |
    | (追加探索)JSのminify | 適用済み(6本をminify、wastedBytes -81%) |
    
    | 項目 | フェーズ開始時 | 完了時 |
    |------|--------------|--------|
    | render-blocking-insight | 20件 / 132,695B | 1件 / 24,152B(-92.3% / -81.8%) |
    | stylesheet転送量 | 57.0KB | 44.7KB(-19.7%) |
    | stylesheetリクエスト数 | 11 | 4 |
    | unminified-javascript | 25,760B | 4,905B(-81%) |
    | preconnectオリジン | 8(うち7未使用) | 1(使用中のみ) |
    
    観測FCP 1,247ms のうち 1,077ms(86.5%)がルート文書のTTFBだった。
    しかしLighthouseのLanternは、オリジンのサーバ応答時間を観測最小値(76.05ms)で
    代表させるため、この1,077msを外れ値として捨ててスコアを算出する。
    
    その結果「FCPスコアは100点なのに server-response-time 監査は score 0
    (Root document took 1,070 ms)」という矛盾した状態になっていた。
    
    P-FCP-8 で ttfbMs を 1070→100 に変更するシミュレーションを行った結果:
    
    | 指標 | 変更前 | 変更後 | 変化 |
    |------|--------|--------|------|
    | 観測FCP | 1,199ms | 199ms | -1,000ms(-83.4%) |
    | 観測LCP | 1,973ms | 1,011ms | -962ms(-48.8%) |
    | 観測SI | 1,744ms | 756ms | -988ms(-56.7%) |
    | 観測TTFB | 1,075ms | 105ms | -970ms(-90.2%) |
    | スコア算出FCP | 98ms | 94ms | ほぼ不変 |
    
    **スコアは動かないのに実際の表示は約1秒速くなる**ことを実証した。
    
    注記: P-FCP-8 は inventory の ttfbMs を書き換えたシミュレーションであり、
    実際のサーバー改修ではない。フロントエンド(inventory)の編集では対処できない
    領域の改善ポテンシャルを数値化したものである。
    
    第1段階で `</body>` 直前の6本のみに defer を付与したが、
    render-blocking-insight は13件のまま1件も減らなかった。
    **末尾のスクリプトはそもそもレンダリングをブロックしていない**ためである。
    真のボトルネックは `<head>` の10本(jQuery 146KB を含む)だった。
    
    LCP: 213ms
    CLS: 0.000
    TBT: 0ms
    FCP: 94ms
    SI: 461ms
    Overall Score: 100
    
    (観測値: FCP 199ms / LCP 1,011ms / SI 756ms)
  • TBTを改善

    TBTを改善
    
    | 項目 | 状態 |
    |------|------|
    | 同期XHR(第3引数false) | 適用済み(jQuery _evalUrl 経由の同期XHR3件を静的script化) |
    | ロングタスク(50ms以上) | 適用済み(1件→0件) |
    | 未使用JavaScript | 適用済み(OverlayScrollbars削除、監査1件→0件) |
    | 遅延読み込みライブラリ自体の負荷 | 適用済み(no-opのlazyload削除。TBT効果は0ms) |
    | DOMContentLoadedハンドラ内の重い処理 | 効果なし(setTimeout分割は成功したがTBT寄与0。mainに取り込まず) |
    | スライダーの複数初期化 | 効果なし(同上、P-TBT-2に包含) |
    | jQueryの.each()による大量DOM操作 | 効果なし(同上。個別に10ms超のものは存在せず) |
    | .load()による同期通信 | 該当なし(grepヒットはコメントアウト1件のみ) |
    
    29ms(CLSフェーズ完了時)→ 0ms(P-TBT-1)→ 0ms(P-TBT-3/4でも変化なし)
    
    トレース上で50ms超のタスクは1件(142.1ms)のみで、その89%(126.1ms)が
    URLLoader::loadSynchronously だった。
    
    原因は以下3箇所の $("head").append(scriptTag):
    - initialize.js L85 → jquery.cookie.js(40.1ms)
    - initialize.js L91 → system_initialize.js(42.3ms)
    - process.js L658 → system_process.js(43.7ms)
    
    jQuery 3.6.0 は script 要素の挿入を _evalUrl 経由で処理し、その実装が
    ajax({async: !1}) すなわち同期XHRである。
    
    調査上の重要な教訓: ミニファイされたjQueryでは false が !1 に圧縮されるため、
    "async: false" の文字列検索ではこの欠陥を発見できない。
    
    報告価値: これら3スクリプトは initialize.js / process.js というサイト全体の
    ブートストラップから読み込まれるため、全ページで同じ停止が発生している。
    playback環境のRTTは0.26msだが、実環境のモバイル(RTT 100-300ms)では
    3つの直列同期XHRが300-900msのメインスレッド停止に相当しうる。
    
    リクエスト: 162件 → 160件
    転送量: 約25KB削減
    unused-javascript 監査: 1件 → 0件
    
    LCP: 488ms
    CLS: 0.000
    TBT: 0ms
    FCP: 90ms
    SI: 965ms
    Overall Score: 100
  • CLSを改善

    CLSを改善
    
    | 項目 | 状態 |
    |------|------|
    | 画像のwidth/height属性の欠如 | 適用済み(mvスライダー8件のsourceにwidth/height付与) |
    | 動的に挿入されるコンテンツ | 適用済み(v2レイアウトを静的HTMLに事前適用) |
    | カルーセル/スライダー | 適用済み(ranking/mv の初期化前領域をCSSで確保) |
    | ヘッダー/フッターの動的な高さ変化 | 適用済み(ロゴ枠のflex-basis固定) |
    | Webフォントの読み込み | 該当なし(@font-faceはslickのみでfont-display:swap済み、Google Fonts参照0件) |
    | JavaScriptによるzoomプロパティ変更 | 該当なし(grep 4件すべて無関係と確認) |
    | 未ログオン状態要素の事前整理 | 効果なし(drawer-navはオフキャンバスでCLS寄与ゼロ。コード変更は不採用) |
    
    0.960(サードパーティ除去後)
      → 0.952(P-CLS-1 v2レイアウト事前適用)
      → 0.777(P-CLS-2 mvスライダーのアスペクト比修正)
      → 0.011(P-CLS-3 カルーセル初期化前領域のCSS事前確保)
      → 0.000(P-CLS-4 ヘッダーロゴ枠のflex-basis固定)
    
    - 真の支配要因はカルーセル(mvスライダー/ランキング)の初期化前の高さ未確保だった
    - mvスライダーはsource要素にwidth/heightがなく、img属性の比(910x380=2.395)で
      予約されるが実配信画像は700x875(0.800)のため +274px の成長が発生していた
    - Puppeteerでslick初期化前後の幾何を実測し、CSSで同一の幾何を事前確保する手法が有効だった
    
    LCP: 398ms
    CLS: 0.000
    TBT: 29ms
    FCP: 231ms
    SI: 1042ms
    Overall Score: 100
  • サードパーティタグを除去

    サードパーティタグを除去
    
    | 項目 | 状態 |
    |------|------|
    | Visumo(UGC/動画ウィジェット) | 適用済み |
    | fluct/adingo 広告タグ(GAM/Criteo/ID5/Yahoo等) | 適用済み |
    | Akamai Bot Manager | 適用済み |
    | Google Tag Manager / GA4(Sprocket/Facebook等含む) | 適用済み |
    | Datadog RUM | 適用済み |
    | Akamai mPulse (boomerang) | 適用済み |
    | Public CDN(cdnjs/jsdelivr) | 対象外(誤除去なし・index.json未変更) |
    | Google Fonts | 対象外(誤除去なし・index.json未変更) |
    
    リクエスト: 554件 → 152件(-402件)
    転送量: 10.07MB → 2.49MB(-7.58MB)
    残存ホスト: www.bellemaison.jp(40件)、pic2.bellemaison.jp(112件)の2ホストのみ
    
    LCP: 1109ms
    CLS: 0.960
    TBT: 23ms
    FCP: 229ms
    SI: 1027ms
    Overall Score: 76
    
    | 指標 | オリジナル | 除去後 |
    |------|-----------|--------|
    | LCP | 3372ms | 1109ms |
    | CLS | 0.805 | 0.960 |
    | TBT | 2ms | 23ms |
    | FCP | 611ms | 229ms |
    | SI | 17855ms | 1027ms |
    | Overall | 58 | 76 |
    
    - CLS 0.960 が唯一の未解決指標(スコア2点)。主因はファーストパーティの
      メインビジュアルスライダーであり、サードパーティとは無関係。CLS改善フェーズで対処する
    - GTM除去(807da28)により計測揺らぎが大幅に縮小した(Overall レンジ 28 → 4)
    - このHTMLはCRLF/LF混在。編集時はバイト単位の置換が必要
  • オリジナルデータ

    オリジナルデータ
    
    LCP: 3372ms
    CLS: 0.805
    TBT: 2ms
    FCP: 611ms
    SI: 17855ms
    Overall Score: 58