ITMay 26, 2026

ウェブサイト速度最適化 2026 — Core Web Vitals 90+ 達成法

2026年のGoogle Core Web Vitalsを完全解説。LCP・INP・CLSの3つの指標を改善する方法、画像最適化・フォント読み込み・JavaScriptバンドル削減・CDN設定まで、Lighthouse 90+達成のための実戦チェックリストをコード例とともに提供。

> **要点まとめ** 2026年のGoogle Core Web Vitals(コアウェブバイタル):LCP(最大コンテンツの描画)< 2.5秒、INP(次の描画までのインタラクション)< 200ms、CLS(累積レイアウトシフト)< 0.1。この3指標がGoogle SEOランキングシグナルに直接反映されます。最も効果が大きい最適化:① WebP/AVIF画像変換 ② フォントのpreload ③ JavaScriptバンドルのコード分割 ④ CDN設定。Next.jsユーザーはデフォルト設定をきちんと押さえるだけで90+達成が可能です。

Core Web Vitalsとは?

Core Web Vitals(コアウェブバイタル)は、Googleがユーザー体験を測定するための3つの主要なパフォーマンス指標で、2021年からSEOランキングシグナルとして活用されています。

3つのコア指標

| 指標 | 正式名称 | 測定対象 | 良好 | 改善が必要 | 不良 |

|---|---|---|---|---|---|

| **LCP** | Largest Contentful Paint | 最大コンテンツ(画像・テキスト)の描画時間 | < 2.5秒 | 2.5〜4秒 | > 4秒 |

| **INP** | Interaction to Next Paint | ユーザーのクリック/タップ後の画面反応時間 | < 200ms | 200〜500ms | > 500ms |

| **CLS** | Cumulative Layout Shift | 読み込み中の予期しないレイアウトの移動 | < 0.1 | 0.1〜0.25 | > 0.25 |

※ FID(First Input Delay)は2024年にINPへ置き換えられました。

なぜCore Web Vitalsが重要なのか?

**SEOへの直接的な影響**:Googleのランキングアルゴリズムに含まれており、内容が同等であればパフォーマンスの良いサイトが優先されます

**ユーザー離脱**:LCPが3秒を超えるとモバイルの離脱率が53%増加(Google調査)

**広告収益**:AdSense RPMはページ滞在時間に比例 → 速いサイト = 高い収益

**コンバージョン率**:ECサイトで1秒の遅延 = コンバージョン率7%低下(Akamai調査)

LCP最適化(最大コンテンツの描画)

LCPはほとんどの場合、ヒーロー画像または大きなテキストブロックの読み込み時間によって決まります。

画像最適化(最も効果が大きい方法)

#### WebP/AVIF形式の使用

| 形式 | 容量削減 | ブラウザ対応 |

|---|---|---|

| JPEG | 基準 | 100% |

| WebP | 25〜35%削減 | 98%+ |

| AVIF | 40〜50%削減 | 90%+(2026年基準) |

```html

</picture>

```

#### Next.js Imageコンポーネントの活用

```typescript

// next/imageはWebP/AVIF自動変換 + 遅延読み込み + サイズ最適化

import Image from 'next/image'

// LCP対象画像:priority属性が必須

<Image

src="/hero.jpg"

alt="ヒーロー画像"

width={1200}

height={628}

priority // LCP画像には必ずpriorityを追加

quality={85}

```

LCPリソースのpreload

```html

```

サーバー応答時間の短縮(TTFB)

| 方法 | 効果 | 実装方法 |

|---|---|---|

| **CDNの利用** | 世界中のエッジキャッシング | Cloudflare、Vercel Edge |

| **キャッシュヘッダー** | 再訪問者は即座に読み込み | Cache-Control: max-age=31536000 |

| **サーバーサイドキャッシング** | DBクエリ結果をキャッシュ | Redis、Cloudflare KV |

INP最適化(インタラクション反応時間)

INPはクリック・タップ・キーボード入力時に、ブラウザが次の画面を描画するまでにかかる時間です。

JavaScript実行の最適化

#### メインスレッドのブロッキングを減らす

```javascript

// ❌ 悪い例:重い同期処理がクリックハンドラ内にある

button.addEventListener('click', () => {

const result = heavyComputation(data) // メインスレッドをブロック

updateUI(result)

})

// ✅ 良い例:Web Workerにオフロード

const worker = new Worker('heavy-worker.js')

button.addEventListener('click', () => {

worker.postMessage(data) // 別スレッドで処理

})

worker.onmessage = (e) => updateUI(e.data)

```

#### イベントハンドラの最適化

```javascript

// Debounceで過度なイベント呼び出しを防ぐ

function debounce(fn, delay) {

let timer

return (...args) => {

clearTimeout(timer)

timer = setTimeout(() => fn(...args), delay)

}

// スクロール・resizeなど頻繁に発生するイベントに適用

window.addEventListener('resize', debounce(handleResize, 100))

```

JavaScriptバンドルの最適化

#### Code Splitting(コード分割)

```typescript

// Next.js:dynamic importで遅延ロード

import dynamic from 'next/dynamic'

// ファーストビューに表示されないコンポーネントは遅延ロード

const HeavyChart = dynamic(() => import('./HeavyChart'), {

loading: () => <div>チャート読み込み中...</div>,

ssr: false // クライアント専用ならSSRをオフに

})

```

#### Tree Shaking

```javascript

// ❌ 悪い例:lodash全体をインポート(70KB+)

import _ from 'lodash'

const result = _.chunk(array, 3)

// ✅ 良い例:必要な関数のみインポート(1KB)

import chunk from 'lodash/chunk'

const result = chunk(array, 3)

```

CLS最適化(累積レイアウトシフト)

CLSは広告・画像・動的コンテンツが読み込み中に位置を変えると発生します。

画像・動画のサイズを明示

```html

```

広告スペースの予約

```css

/* 広告コンテナに最小高さを予約 */

.ad-container {

min-height: 250px; /* 広告領域を事前確保 */

display: flex;

align-items: center;

justify-content: center;

}

```

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

```css

/* font-display: swap → フォント読み込み前にシステムフォントでテキストを即座に表示 */

@font-face {

font-family: 'MyFont';

src: url('/fonts/myfont.woff2') format('woff2');

font-display: swap; /* optionalも検討(CLSがさらに低い) */

}

```

実戦最適化チェックリスト

Lighthouse 90+達成のための30項目チェックリスト

**LCP関連(10項目)**

[ ] LCP要素を特定(DevTools → Performanceタブ)

[ ] LCP画像 → priorityまたはpreloadを適用

[ ] ヒーロー画像をWebP/AVIFに変換

[ ] next/imageを使用(自動最適化)

[ ] 画像サイズをsrcsetでレスポンシブ提供

[ ] CDNの利用(Cloudflare Pages、Vercel Edge)

[ ] TTFB < 600msを確認

[ ] サーバーサイドキャッシング(ISR/SSGを優先)

[ ] 不要なリダイレクトを削除

[ ] サードパーティスクリプトの遅延読み込み

**INP関連(10項目)**

[ ] Lighthouse → INPスコアを確認

[ ] Long Tasks(50ms+)を排除 → DevTools Performanceタブ

[ ] 重い計算 → Web Workerへ移行

[ ] JavaScriptバンドルサイズ < 200KB(圧縮ベース)

[ ] 不要なポリフィルを削除

[ ] React:useMemo/useCallbackで最適化

[ ] イベントハンドラにDebounce/Throttleを適用

[ ] アニメーションはCSS transitionを使用(JSアニメーションは避ける)

[ ] サードパーティスクリプトにasync/defer属性を追加

[ ] Largest Contentful関連のJS実行順序を最適化

**CLS関連(10項目)**

[ ] すべての画像・動画にwidth/heightを明示

[ ] 広告コンテナに最小高さを予約

[ ] 動的に挿入されるコンテンツ → 最下部に配置

[ ] フォント → font-display: swapを適用

[ ] フォントpreloadタグを追加

[ ] transform/opacityのみを使うアニメーション(レイアウト変更を避ける)

[ ] skeleton loaderでコンテンツスペースを事前確保