Webサイト高速化の基本 - Core Web Vitalsを改善する方法

Core Web Vitalsとは

Core Web Vitalsは、Googleが定義するWebページのユーザー体験を測る指標です。2021年からGoogle検索のランキング要因に含まれており、SEOに直接影響します。

各指標の詳細と目標値

3つの主要指標

目標値と評価基準

指標	良好	改善が必要	不良
LCP	2.5秒以下	2.5〜4.0秒	4.0秒超
INP	200ms以下	200〜500ms	500ms超
CLS	0.1以下	0.1〜0.25	0.25超

LCP（Largest Contentful Paint）

ビューポート内で最も大きなコンテンツ（画像、動画、テキストブロック）が表示されるまでの時間です。

INP（Interaction to Next Paint）

ユーザーがクリックやタップをしてから、画面が更新されるまでの時間です。2024年3月にFIDに代わって採用されました。

CLS（Cumulative Layout Shift）

ページ読み込み中に要素が予期せずずれる量を測定します。広告や画像の遅延読み込みでずれが発生しやすいです。

最適化テクニック

1. 画像の最適化（LCP改善）

2. JavaScriptの最適化（INP改善）

テクニック	効果	実装方法
コード分割	初期読み込み量を削減	dynamic import()を使用
遅延読み込み	メインスレッドのブロックを回避	defer/async属性を使用
ツリーシェイキング	未使用コードを除去	ES Modulesを使用
長いタスクの分割	UIのブロックを回避	setTimeout/requestIdleCallback

3. CSSの最適化

4. レイアウトシフトの防止（CLS改善）

5. サーバー・インフラ最適化

実装コード例

画像の遅延読み込み

<!-- ファーストビューの画像（プリロード） -->
<link rel="preload" as="image" href="hero.webp">
<img src="hero.webp" alt="ヒーロー画像" fetchpriority="high">

<!-- ファーストビュー外の画像（遅延読み込み） -->
<img src="photo.webp" alt="写真" loading="lazy">

CLSを防ぐ画像の指定

<!-- 必ずwidth/heightを指定 -->
<img
  src="photo.webp"
  alt="写真"
  width="800"
  height="600"
  style="aspect-ratio: 800/600; width: 100%; height: auto;"
>

JavaScriptの遅延読み込み

<!-- 重要なスクリプトは同期読み込み -->
<script src="critical.js"></script>

<!-- 解析系は遅延読み込み -->
<script src="analytics.js" defer></script>

<!-- 独立したスクリプトは非同期 -->
<script src="widget.js" async></script>

Reactでのコード分割

import { lazy, Suspense } from 'react';

// 動的インポートでコード分割
const HeavyComponent = lazy(() =>
  import('./HeavyComponent')
);

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

測定ツール

ツール	特徴	用途
PageSpeed Insights	実際のユーザーデータ（CrUX）を表示	本番サイトの評価
Lighthouse	詳細な改善提案を表示	開発中の診断
Chrome DevTools	リアルタイムで計測可能	デバッグ・検証
Web Vitals Extension	ブラウザで常時表示	日常的なモニタリング
Search Console	サイト全体のレポート	長期的な傾向分析

改善の優先順位

まとめ

サイトの高速化はSEOとユーザー体験の両方に効果があります。まずはPageSpeed Insightsで現状を把握し、「不良」の指標から改善していきましょう。