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