2026.05.03

Lighthouse スコアを 98/100/100/100 まで持っていけた

技術

はじめに

Onbit のサイトを公開してから、Lighthouse スコアの伸びしろが残っていることに気づきました。きっかけは Best Practices に出ていた CSP 警告ですが、ボトルネックを 1 つ直すと隣の問題まで見えてくるのが面白かったので、一連の改善を一気にメモしておきます。

基礎となる知識

Lighthouse: ブラウザの開発者ツールで動く、ページ品質の測定ツール。Performance / Accessibility / Best Practices / SEO の 4 軸で 0 〜 100 のスコアを出す
CSP(Content Security Policy): ブラウザに「このサイトはこのドメインからしかスクリプトを読まない」と宣言するセキュリティ設定
LCP(Largest Contentful Paint): ページの一番大きな要素が描画されるまでの時間。Performance スコアに大きく効く
コントラスト比: 文字色と背景色の差。AA 基準は 4.5、AAA は 7.0 が目安

解説と使い方

CSP が Cloudflare Web Analytics をブロックしていた

Lighthouse をかけてみたら Best Practices に警告が出ていました。CSP が、自分で入れたはずの Cloudflare Web Analytics のビーコンを弾いていました。

script-src と connect-src に Cloudflare のドメインを追加して直しました。実は計測自体が動いていなかったので、ここを直すまで数字が取れていなかった、というオチでした。

ヒーロー画像が LCP 候補に認識されていなかった

Performance のスコアが上がらない理由を調べていくと、ヒーロー画像が LCP の候補から外れていました。

原因は 2 つで、ロゴ画像に loading="lazy" が付いていたことと、ヒーロー部分にフェードイン用の .reveal クラスで初期 opacity:0 がかかっていたことでした。ロゴを eager に変えて、ヒーローからフェードを外すと、LCP がきちんとヒーロー画像で認識されるようになりました。

画像圧縮と CSS インライン化

ヒーロー画像の quality を 75 → 50 まで下げました。背景にオーバーレイがかかっているので圧縮の劣化はほぼ気になりません。あわせて Astro の build.inlineStylesheets: "always" を有効にして、global.css(9.7KB)を HTML に埋め込みました。CSS のインライン化で render-blocking が消えて、FCP が一段階速くなっています。

アクセシビリティの 4 点

Footer のサブテキスト色 #7a857d がクリーム背景でコントラスト 3.4 しかなく、AA 基準(4.5)に届いていませんでした。#5a6760 まで暗くして 5.3 まで上げました。同時に、ヒーローの CTA ボタンの aria-label と可視テキストの食い違い(全角括弧 vs 半角スペース)も直しました。

やってみた結果

項目	Before	After
Performance	92	98
Accessibility	96	100
Best Practices	92	100
SEO	100	100

スコアの数字を追うのが目的ではないけれど、ボトルネックを 1 つ直すと隣にあった別の問題まで一緒に見えてくる、というのがあって、結果として全体的に底上げできました。

まとめ

CSP 警告 → 計測の不通発覚 → LCP 改善 → 画像圧縮 / CSS インライン化 → アクセシビリティ修正、と数珠つなぎで進んだ作業でした。最初の警告が「光源」になって、暗かった部分が次々見えてくる感じです。