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