Core Web Vitalsを改善する実践テクニック

Core Web Vitals とは

Core Web Vitals は、Google が定めた Web ページのユーザー体験を測定する3つの指標 です。2021年から Google 検索のランキング要因に組み込まれています。

計測方法

PageSpeed Insights

最も手軽な方法は PageSpeed Insights です。URL を入力するだけでスコアと改善提案が表示されます。

アクセス: pagespeed.web.dev

Chrome DevTools

1. Chrome で対象ページを開く
2. F12 で DevTools を開く
3. 「Lighthouse」タブを選択
4. 「パフォーマンス」にチェックして分析開始

Search Console

Google Search Console の「ウェブに関する主な指標」レポートで、サイト全体の Core Web Vitals を確認できます。

LCP（最大コンテンツの描画）の改善

LCP は、ページの 最大の要素（メイン画像やヘッダーテキスト等）が描画されるまでの時間です。

1. preconnect でリソース取得を高速化

外部サービス（Google Analytics 等）への接続を事前に確立します。

<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

2. JavaScript の defer / async

JavaScript の読み込みがページの描画をブロックしないようにします。

<!-- defer: HTMLパース完了後に実行（順序保証あり） -->
<script src="app.js" defer></script>

<!-- async: ダウンロード完了後すぐに実行（順序保証なし） -->
<script src="analytics.js" async></script>

3. CSS の最適化

不要な CSS はページの描画を遅延させます。

• 使用していない CSS ルールを削除
• CSS ファイルを圧縮（minify）する
• 本番環境で WhiteNoise 等の圧縮ストレージを使用

CLS（レイアウトのずれ）の改善

CLS は、ページ読み込み中に コンテンツが予期せずずれる量 を測定します。画像の読み込みで文章が下に押し出される、広告が挿入されてボタンがずれる、などが CLS を悪化させます。

1. 画像に width / height を指定

画像のサイズを事前に指定することで、ブラウザが読み込み前にスペースを確保します。

<!-- CLS が発生する（サイズ未指定） -->
<img src="photo.jpg" alt="写真">

<!-- CLS を防止（サイズ指定） -->
<img src="photo.jpg" alt="写真" width="600" height="400">

2. lazy loading の活用

ファーストビュー外の画像は loading="lazy" で遅延読み込みにします。

<img src="photo.jpg" alt="写真" width="600" height="400" loading="lazy">

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

Web フォントの読み込みでテキストが一瞬消える（FOIT）のを防ぎます。

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;  /* システムフォントで先に表示 */
}

INP（次のペイントまでの応答時間）の改善

INP は、ユーザーがクリックやキー入力をしてから 画面が更新されるまでの時間 を測定します。

改善のポイント

• メインスレッドをブロックしない: 重い JS 処理は requestAnimationFrame や setTimeout で分割
• イベントハンドラを軽量に: click や input のハンドラ内で重い処理をしない
• 不要な JS を削除: 使っていないライブラリやコードを除去

汎用的な高速化テクニック

1. 静的ファイルの圧縮

Django の WhiteNoise を使うと、CSS/JS を gzip/brotli 圧縮して配信できます。

STORAGES = {
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

2. ブラウザキャッシュの活用

Nginx で静的ファイルのキャッシュを長期間に設定します。

location /static/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

3. データベースクエリの最適化

N+1 問題を避け、select_related や prefetch_related で効率的にデータを取得します。

# N+1 問題が発生する
articles = Article.objects.all()

# 改善: 関連データを一括取得
articles = Article.objects.select_related(
    "classification__parent"
).all()