個人開発WebアプリのCore Web Vitals改善実践：LighthouseスコアをGreenにするまでの道のり

X個人開発でWebアプリをリリースしたはいいものの、「なんかページが遅い気がする」「SEO的にも不安」という状態になることがあります。

私自身、家計管理アプリ カケポン やトレーニング記録サービス トレメモ を開発する中で、Core Web Vitalsのスコアを改善する作業を繰り返してきました。今回はその実践的な改善手法をまとめます。

Core Web Vitalsとは

Core Web Vitals（CWV）はGoogleが定義するWebパフォーマンスの指標群です。2021年のPageExperienceアップデート以降、検索ランキングにも影響することが確認されています。

主要な3指標：

• LCP（Largest Contentful Paint）: 2.5秒以内がGood
• INP（Interaction to Next Paint）: 200ms以内がGood（2024年3月にFIDから置き換わり）
• CLS（Cumulative Layout Shift）: 0.1以下がGood

Lighthouseで現状を把握する

Chrome DevToolsのLighthouseタブで計測できます。本番後はSearch ConsoleのCore Web Vitalsレポートでフィールドデータを確認しましょう（データが溜まるまで28日かかります）。

LCP改善：最大コンテンツを速く表示する

ヒーロー画像の最適化

<!-- NG: 普通の書き方 -->
<img src="/hero.jpg" alt="hero">

<!-- OK: preload + WebP + srcset -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img 
  src="/hero.webp"
  srcset="/hero-640.webp 640w, /hero-1280.webp 1280w"
  sizes="100vw"
  alt="hero"
  fetchpriority="high"
>

フォントの読み込み最適化

font-display: swap を指定してFLOUT（不可視テキスト）を防ぎましょう。

サーバーレスポンスの高速化（TTFB）

• CDNの活用（Cloudflare, Vercel Edge Networkなど）
• APIレスポンスのキャッシュ
• N+1問題の解消

INP改善：操作レスポンスを速くする

重いJavaScript処理の分割

// NG: 重い処理をそのまま実行
button.addEventListener('click', () => {
  heavyCalculation();
  updateUI();
});

// OK: yieldで処理を分割
button.addEventListener('click', async () => {
  updateUI(); // UIを先に更新
  await scheduler.yield();
  heavyCalculation();
});

React使用時の最適化

// メモ化で再レンダリングを防ぐ
const ExpensiveComponent = React.memo(({ data }) => { ... });

// useMemoで計算結果をキャッシュ
const processed = useMemo(() => heavyProcess(data), [data]);

CLS改善：ガタつきをなくす

画像にサイズを指定する

<img src="/photo.webp" width="800" height="450" alt="...">

.image-wrapper {
  aspect-ratio: 16/9;
  width: 100%;
}

動的コンテンツのスペースを事前確保

.ad-slot {
  min-height: 250px;
}

Lighthouse CIで自動計測

name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            https://your-app.vercel.app/
          budgetPath: .lighthouse-budget.json
          uploadArtifacts: true

改善フロー

1. 計測: LighthouseとSearch Consoleで現状把握
2. 優先度付け: スコアが最も低い指標から着手
3. 改善実施: 1つずつ変更→計測→確認のサイクル
4. 定期モニタリング: Lighthouse CIで継続監視

まとめ

Core Web Vitalsの改善は「計測→特定→改善→再計測」のサイクルを地道に回すことで確実にスコアが上がります。

個人開発でも、パフォーマンスはユーザーを継続的に獲得するための重要な要素です。

---

関連アプリ

• カケポン（家計管理） → https://kake-pon.com/
• トレメモ（トレーニング記録） → https://training-memo.com/パフォーマンス個人開発