Lighthouse Performance を 57 → 91 に上げた 3 つの施策

ベースライン（修正前）

Chrome DevTools の Lighthouse CLI で本番の 3URL を計測した初回結果は、 特にホームのパフォーマンスが厳しい値でした。

トップ Opportunity は全 URL 共通で redirects / third-party-cookies / color-contrast / unused-javascript の 4 つでした。以下に最も効いた 3 施策を紹介します。

施策 1: AdSense を lazyOnload に

ホームの Performance 57 点の主犯は unused-javascript が 1.4 秒。 中身を見ると AdSense の adsbygoogle.js が初期描画の ブロッキング要素として重く乗っていました。next/script でstrategy を afterInteractive → lazyOnload に変更するだけで、ユーザーがページを触り始めてからAdSense を読むように できます。

<Script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=..."
  crossOrigin="anonymous"
  strategy="lazyOnload"
/>

効果は劇的で、ホームの Performance が 57 → 83 (+26pt)。広告自体は見えなくならず、初期描画の後にロードされるだけです。 収益への影響は軽微な計測の範囲でした。

施策 2: canonical URL を www に統一して redirects を解消

全 3URL 共通で redirects audit が 780〜1020ms 損と指摘されていました。調べると Vercel の primary domain が www.lit-forge.com 側で、apex（lit-forge.com）からアクセスすると常に 307 リダイレクトが走っていました。

Vercel の dashboard でドメイン設定を変える選択もありますが、 コード側で canonical URL を www 付きに揃える方が 確実です。metadataBase、sitemap.ts、robots.ts、JSON-LD の SITE_URL、Lighthouse 計測 スクリプトの対象 URL を https://www.lit-forge.comに揃えました。

結果、redirects audit が完全消滅。Lighthouse の top issues から消え、検索エンジンへの canonical シグナルも www 側に 一本化できました。

施策 3: 薄すぎる Tailwind カラーを 1 段階濃く

Accessibility の color-contrast で引っかかるのは、 白背景の上にtext-slate-400 (#94a3b8) を置いた場合の コントラスト比が 約 3.3:1 で WCAG AA (4.5:1) 未達だったためです。text-slate-400 dark:text-slate-500 を逆にして text-slate-500 dark:text-slate-400（白背景で 5.4:1）に 揃えるだけで、ほぼ全 URL で解消できました。

// 12ファイル一括置換
- "text-slate-400 dark:text-slate-500"
+ "text-slate-500 dark:text-slate-400"

Node 製の置換スクリプト（sed / awkよりクオートトラブルを避けやすい）を 1 本書いて 12 ファイル一括で変更しました。

最終結果

残した課題

• Best Practices 77 点の内訳はthird-party-cookies（AdSense 由来）とinspector-issues（同じく広告系の Cookie 警告）で、 AdSense を外さない限り上がらない構造。収益化を優先する判断で許容としました。
• Network dependency treeやforced-reflowは invoice-pdf など重い画面でまだ 出ますが、ページ全体の Perf 94 には影響しない軽微な差分。

まとめ

1. 初期 JS を減らす（AdSense / GA 等を lazyOnload に）
2. Redirect を消す（canonical URL を primary domain に揃える）
3. 薄すぎる色を濃く（slate-400→slate-500 で AA 通過）

どれも 数十行〜数文字の変更で、Lighthouse スコアは 10〜30 点単位で動きます。投資対効果でかなり割のいい改善だったので、 同じ構成（Next.js + Vercel + AdSense）のサイトは試してみる価値大。