Lighthouse スコア 64 の正体を調べたら、シミュレーションだった話

Chrome の Lighthouse でこのブログのパフォーマンスを測ったら 64/100 という微妙なスコアが出た。
「さすがにまずいかな」と思って調査してみたら、想定外の結論にたどり着いたのでメモ。

状況

Lighthouse の JSON レポートを取得して Claude Code に分析させた。

スコアはこんな感じ:

カテゴリスコア
Performance64
Accessibility94
Best Practices100
SEO100

Performance と Accessibility に問題あり。

Accessibility の問題: コントラスト比

こっちはシンプルだった。

シンタックスハイライトの CSS（monokai テーマ）で、JSON のキー名や XML タグに使われるピンク赤（#f92672）が、背景色（#272822）に対してコントラスト比 3.92:1 しかなかった。WCAG AA 基準は 4.5:1 以上なので落第。

Lighthouse のレポートで指摘されていた要素:

selector: code.language-json > span.line > span.cl > span.nt
explanation: contrast ratio of 3.92 (foreground: #f92672, background: #272822)

該当するトークンを全部拾うと .nt（NameTag）、.kn（KeywordNamespace）、.o（Operator）、.ow（OperatorWord）、.gd（GenericDeleted）の 5 種類。

#f92672 を #ff5c8d に変更した。コントラスト比は 5.1:1 になって AA 準拠。monokai のピンク赤の雰囲気はそのまま、明度を少し上げただけなので見た目の変化はほぼわからない。

static/css/syntax.css の対象行を修正してコミット、終わり。簡単。

Performance の問題: レンダーブロッキング CSS

こっちが厄介だった。

FCP・LCP・Speed Index がすべて 3.3 秒。しかも三つが揃って同じ値というのが気になった。

Lighthouse のレポートを読むと、render-blocking-insight に CSS ファイル 3 本が列挙されていた。

css/style.css   (4,967 bytes)
css/syntax.css  (1,464 bytes)
css/custom.css  (3,999 bytes)

「10KB 程度の CSS でそんなに遅くなる？」と疑問を持ったので、よく見たら同じ audit の metricSavings がこうなっていた:

"metricSavings": {
  "FCP": 0,
  "LCP": 0
}

Lighthouse 自身が「レンダーブロッキングを直しても FCP/LCP の改善はゼロ」と言っている。では 3.3 秒の正体は何なのか。

実測してみた

WebPageTest で HAR を取得して確認した。

リソース転送時間
style.css96ms
custom.css194ms
syntax.css148ms
email-decode.js (Cloudflare)8ms

全部 200ms 以内。onLoad は 713ms。

全然遅くない。

Lighthouse の 3.3 秒はシミュレーション値だった

Lighthouse のレポートには二種類の値が混在している:

  • Observed（実測値）: テスト中に実際に計測された値
  • Simulated（推定値）: 「Moto G4 + 低速 4G」環境をソフトウェアでシミュレートした推定値

スコアに使われるのはシミュレーション値の方。

JSON の metrics を見ると:

"observedFirstContentfulPaint": 1129,   // 実測値
"firstContentfulPaint": 3328            // シミュレーション値（スコアに使用）

実測の FCP は 1.1 秒。3.3 秒は Lighthouse が「低速 4G だったらこうなる」と計算した推定値だった。

Lighthouse が使っている Lantern というシミュレーターは、実測値をベースに仮想の低速環境を再現する。Cloudflare CDN の最適化や HTTP/3 の恩恵を過小評価しやすいという特性もある。今回はそれが顕著に出た形。

CSS インライン化はやらないことにした

当初「CSS をインライン化してリクエストを削減しよう」と考えていたけど、実測で 713ms なのにわざわざ複雑な対応をするのは割に合わない。metricSavings: 0 というデータもあるし、見送り。

結論

問題対応
コントラスト比（Accessibility 94 → 改善）syntax.css の #f92672 を #ff5c8d に修正
レンダーブロッキング CSS（Performance 64）実測 713ms なので対応不要と判断

Lighthouse のスコアは指標の一つでしかない。特に Performance スコアはシミュレーションベースなので、実環境と大きくズレることがある。疑ったら WebPageTest で実測するのが正解だった。

おまけ

で、ここからはどうでもいい話なんだけど、Lighthouse がなぜかエラーになる現象にしばらく陥っていた。なんだこれ？と DevTools 内の AI アシスタントに相談して色々やったあげく、Settings > Preferences > Restore Defaults and Reload で復活した。なんだったんだろ。