Anthropic ClaudeDevOps・インフラ⭐ リポ 2品質スコア 59/100

core-web-vitals

Name: core-web-vitals
Author: tecnologias2026-1

Core Web Vitals（LCP、INP、CLS）を最適化して、ページ体験と検索ランキングを向上させます。「Core Web Vitalsを改善したい」「LCPを修正したい」「CLSを削減したい」「INPを最適化したい」「ページ体験の最適化」「レイアウトシフトを修正したい」といったご依頼の際にご利用ください。

description の原文を見る

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

SKILL.md 本文

Core Web Vitals の最適化

Google 検索ランキングとユーザー体験に影響する3つの Core Web Vitals メトリクスの対象別の最適化です。

3つのメトリクス

メトリクス	測定対象	良好	要改善	不良
LCP	読み込み	≤ 2.5秒	2.5秒～4秒	> 4秒
INP	インタラクティビティ	≤ 200ミリ秒	200ミリ秒～500ミリ秒	> 500ミリ秒
CLS	視覚的安定性	≤ 0.1	0.1～0.25	> 0.25

Google は 75パーセンタイル で測定します。ページへのアクセスの75%が「良好」の閾値を満たす必要があります。

LCP: Largest Contentful Paint

LCP は最大の表示コンテンツ要素が描画されるタイミングを測定します。通常は以下のいずれかです:

ヒーロー画像または動画
大きなテキストブロック
背景画像
<svg> 要素

LCP の一般的な問題

1. サーバーレスポンスが遅い (TTFB > 800ミリ秒)

修正: CDN、キャッシング、最適化されたバックエンド、エッジレンダリング

2. レンダリングをブロックするリソース

<!-- ❌ レンダリングをブロック -->
<link rel="stylesheet" href="/all-styles.css">

<!-- ✅ 重要な CSS はインライン化、残りは遅延 -->
<style>/* 重要なファーストビュー CSS */</style>
<link rel="preload" href="/styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">

3. リソースの読み込み速度が遅い

<!-- ❌ ヒント無し、遅く検出される -->
<img src="/hero.jpg" alt="Hero">

<!-- ✅ 高優先度でプリロード -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<img src="/hero.webp" alt="Hero" fetchpriority="high">

4. クライアント側のレンダリング遅延

// ❌ JavaScript の後にコンテンツが読み込まれる
useEffect(() => {
  fetch('/api/hero-text').then(r => r.json()).then(setHeroText);
}, []);

// ✅ サーバー側または静的レンダリング
// SSR、SSG、またはストリーミングを使用してコンテンツ付き HTML を送信
export async function getServerSideProps() {
  const heroText = await fetchHeroText();
  return { props: { heroText } };
}

LCP 最適化チェックリスト

- [ ] TTFB < 800ミリ秒 (CDN、エッジキャッシング使用)
- [ ] LCP 画像が fetchpriority="high" でプリロード
- [ ] LCP 画像が最適化 (WebP/AVIF、適切なサイズ)
- [ ] 重要な CSS がインライン化 (< 14KB)
- [ ] <head> に JavaScript をブロックするリソースなし
- [ ] フォントがテキストレンダリングをブロックしない (font-display: swap)
- [ ] LCP 要素が初期 HTML に存在 (JS レンダリングではない)

LCP 要素の特定

// LCP 要素を検索
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

INP: Interaction to Next Paint

INP はページビュー中のすべてのインタラクション（クリック、タップ、キープレス）の応答性を測定します。最も悪いインタラクション（高トラフィックページの場合は98パーセンタイル）を報告します。

INP の分類

合計 INP = Input Delay（入力遅延） + Processing Time（処理時間） + Presentation Delay（プレゼンテーション遅延）

フェーズ	ターゲット	最適化
入力遅延	< 50ミリ秒	メインスレッドブロッキングを削減
処理	< 100ミリ秒	イベントハンドラーを最適化
プレゼンテーション	< 50ミリ秒	レンダリング処理を最小化

INP の一般的な問題

1. メインスレッドをブロックする長いタスク

// ❌ 長い同期タスク
function processLargeArray(items) {
  items.forEach(item => expensiveOperation(item));
}

// ✅ 念のためにチャンクに分割
async function processLargeArray(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => expensiveOperation(item));
    
    // メインスレッドに制御を譲る
    await new Promise(r => setTimeout(r, 0));
    // または利用可能な場合は scheduler.yield() を使用
  }
}

2. 重いイベントハンドラー

// ❌ ハンドラー内の全ての処理
button.addEventListener('click', () => {
  // 重い計算
  const result = calculateComplexThing();
  // DOM 更新
  updateUI(result);
  // アナリティクス
  trackEvent('click');
});

// ✅ 視覚的フィードバックを優先
button.addEventListener('click', () => {
  // 即座にビジュアルフィードバック
  button.classList.add('loading');
  
  // 重要でない処理を遅延
  requestAnimationFrame(() => {
    const result = calculateComplexThing();
    updateUI(result);
  });
  
  // アナリティクスに requestIdleCallback を使用
  requestIdleCallback(() => trackEvent('click'));
});

3. サードパーティースクリプト

// ❌ 早期に読み込まれ、インタラクションをブロック
<script src="https://heavy-widget.com/widget.js"></script>

// ✅ インタラクションまたは表示時に遅延読み込み
const loadWidget = () => {
  import('https://heavy-widget.com/widget.js')
    .then(widget => widget.init());
};
button.addEventListener('click', loadWidget, { once: true });

4. 過度なリレンダリング (React/Vue)

// ❌ 全体のツリーを再レンダリング
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Counter count={count} />
      <ExpensiveComponent /> {/* count が変更されるたびに再レンダリング */}
    </div>
  );
}

// ✅ 重い要素をメモ化
const MemoizedExpensive = React.memo(ExpensiveComponent);

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Counter count={count} />
      <MemoizedExpensive />
    </div>
  );
}

INP 最適化チェックリスト

- [ ] メインスレッド上に > 50ミリ秒のタスクなし
- [ ] イベントハンドラーが高速に完了 (< 100ミリ秒)
- [ ] 即座にビジュアルフィードバックを提供
- [ ] 重い処理を requestIdleCallback で遅延
- [ ] サードパーティースクリプトがインタラクションをブロックしない
- [ ] 必要に応じて入力ハンドラーをデバウンス
- [ ] CPU 集約的な処理に Web Worker を使用

INP デバッグ

// 遅いインタラクションを特定
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      console.warn('Slow interaction:', {
        type: entry.name,
        duration: entry.duration,
        processingStart: entry.processingStart,
        processingEnd: entry.processingEnd,
        target: entry.target
      });
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

CLS: Cumulative Layout Shift

CLS は予期しないレイアウトシフトを測定します。シフトはユーザーインタラクションなしに、フレーム間で表示要素の位置が変わるときに発生します。

CLS 計算式: impact fraction × distance fraction

CLS の一般的な原因

1. サイズ属性のない画像

<!-- ❌ 読み込み時にレイアウトシフトを引き起こす -->
<img src="photo.jpg" alt="Photo">

<!-- ✅ スペースを確保 -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- ✅ または aspect-ratio を使用 -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

2. 広告、埋め込み、iframe

<!-- ❌ 読み込まれるまでサイズ不明 -->
<iframe src="https://ad-network.com/ad"></iframe>

<!-- ✅ min-height でスペースを確保 -->
<div style="min-height: 250px;">
  <iframe src="https://ad-network.com/ad" height="250"></iframe>
</div>

<!-- ✅ または aspect-ratio コンテナを使用 -->
<div style="aspect-ratio: 16/9;">
  <iframe src="https://youtube.com/embed/..." 
          style="width: 100%; height: 100%;"></iframe>
</div>

3. 動的に注入されるコンテンツ

// ❌ ビューポートの上にコンテンツを挿入
notifications.prepend(newNotification);

// ✅ ビューポート下に挿入または transform を使用
const insertBelow = viewport.bottom < newNotification.top;
if (insertBelow) {
  notifications.prepend(newNotification);
} else {
  // シフトなしでアニメーション
  newNotification.style.transform = 'translateY(-100%)';
  notifications.prepend(newNotification);
  requestAnimationFrame(() => {
    newNotification.style.transform = '';
  });
}

4. FOUT を引き起こす Web フォント

/* ❌ フォント交換でテキストシフト */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
}

/* ✅ オプショナルフォント (遅い場合もシフトなし) */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
  font-display: optional;
}

/* ✅ またはフォールバック指標に合わせる */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%; /* フォールバックサイズに合わせる */
  ascent-override: 95%;
  descent-override: 20%;
}

5. レイアウトをトリガーするアニメーション

/* ❌ レイアウトプロパティをアニメーション */
.animate {
  transition: height 0.3s, width 0.3s;
}

/* ✅ 代わりに transform を使用 */
.animate {
  transition: transform 0.3s;
}
.animate.expanded {
  transform: scale(1.2);
}

CLS 最適化チェックリスト

- [ ] すべての画像に width/height または aspect-ratio 属性
- [ ] すべての動画/埋め込みにスペース確保
- [ ] 広告に min-height コンテナ
- [ ] フォントが font-display: optional または一致する指標を使用
- [ ] 動的コンテンツがビューポート下に挿入される
- [ ] アニメーションが transform/opacity のみを使用
- [ ] 既存コンテンツの上にコンテンツ注入がない

CLS デバッグ

// レイアウトシフトを追跡
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift:', entry.value);
      entry.sources?.forEach(source => {
        console.log('  Shifted element:', source.node);
        console.log('  Previous rect:', source.previousRect);
        console.log('  Current rect:', source.currentRect);
      });
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

測定ツール

ラボテスト

Chrome DevTools → パフォーマンスパネル、Lighthouse
WebPageTest → 詳細なウォーターフォール、フィルムストリップ
Lighthouse CLI → npx lighthouse <url>

フィールドデータ (実際のユーザー)

Chrome User Experience Report (CrUX) → BigQuery または API
Search Console → Core Web Vitals レポート
web-vitals ライブラリ → アナリティクスに送信

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics({name, value, rating}) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: rating
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

フレームワークのクイックフィックス

Next.js

// LCP: next/image を priority で使用
import Image from 'next/image';
<Image src="/hero.jpg" priority fill alt="Hero" />

// INP: 動的インポートを使用
const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false });

// CLS: Image コンポーネントが寸法を自動処理

React

// LCP: head でプリロード
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" />

// INP: メモ化と useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setExpensiveState(newValue));

// CLS: 常に img タグに寸法を指定

Vue/Nuxt

<!-- LCP: プリロード付き nuxt/image を使用 -->
<NuxtImg src="/hero.jpg" preload loading="eager" />

<!-- INP: 非同期コンポーネントを使用 -->
<component :is="() => import('./Heavy.vue')" />

<!-- CLS: aspect-ratio CSS を使用 -->
<img :style="{ aspectRatio: '16/9' }" />

参考資料

web.dev LCP
web.dev INP
web.dev CLS
Performance skill

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: tecnologias2026-1
リポジトリ: tecnologias2026-1/NEXUS
ライセンス: MIT
最終更新: 2026/5/6

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/tecnologias2026-1/NEXUS / ライセンス: MIT