💬 コミュニケーションコミュニティ 🟡 少し慣れが必要 👤 幅広いユーザー

💬 Core Web Vitals

core-web-vitals

ウェブページの表示速度や安定性を改善し、検索順位向上に貢献するCore Web Vitals最適化を支援するSkill。

⚡ ⏱ お礼メール定型化 5分/通 → 30秒/通

📺 まず動画で見る(YouTube)

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

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".

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブページの表示速度や安定性を改善し、検索順位向上に貢献するCore Web Vitals最適化を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o core-web-vitals.zip https://jpskill.com/download/354.zip && unzip -o core-web-vitals.zip && rm core-web-vitals.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/354.zip -OutFile "$d\core-web-vitals.zip"; Expand-Archive "$d\core-web-vitals.zip" -DestinationPath $d -Force; ri "$d\core-web-vitals.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して core-web-vitals.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → core-web-vitals フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 2

💬 こう話しかけるだけ — サンプルプロンプト

› core-web-vitals の使い方を教えて
› core-web-vitals で何ができるか具体例で見せて
› core-web-vitals を初めて使う人向けにステップを案内して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

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 > 800ms)

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

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

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

<!-- ✅ クリティカル CSS をインライン化し、残りを遅延させます -->
<style>/* Critical above-fold 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 < 800ms (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 = 入力遅延 + 処理時間 + 表示遅延

フェーズ	目標	最適化
入力遅延	< 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 /> {/* カウントが変更されるたびに再レンダリングされる */}
    </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 Workers を使用する

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,
        pro

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Core Web Vitals optimization

Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.

The three metrics

Metric	Measures	Good	Needs work	Poor
LCP	Loading	≤ 2.5s	2.5s – 4s	> 4s
INP	Interactivity	≤ 200ms	200ms – 500ms	> 500ms
CLS	Visual Stability	≤ 0.1	0.1 – 0.25	> 0.25

Google measures at the 75th percentile — 75% of page visits must meet "Good" thresholds.

LCP: Largest Contentful Paint

LCP measures when the largest visible content element renders. Usually this is:

Hero image or video
Large text block
Background image
<svg> element

Common LCP issues

1. Slow server response (TTFB > 800ms)

Fix: CDN, caching, optimized backend, edge rendering

2. Render-blocking resources

<!-- ❌ Blocks rendering -->
<link rel="stylesheet" href="/all-styles.css">

<!-- ✅ Critical CSS inlined, rest deferred -->
<style>/* Critical above-fold CSS */</style>
<link rel="preload" href="/styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">

3. Slow resource load times

<!-- ❌ No hints, discovered late -->
<img src="/hero.jpg" alt="Hero">

<!-- ✅ Preloaded with high priority -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<img src="/hero.webp" alt="Hero" fetchpriority="high">

4. Client-side rendering delays

// ❌ Content loads after JavaScript
useEffect(() => {
  fetch('/api/hero-text').then(r => r.json()).then(setHeroText);
}, []);

// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
  const heroText = await fetchHeroText();
  return { props: { heroText } };
}

LCP optimization checklist

- [ ] TTFB < 800ms (use CDN, edge caching)
- [ ] LCP image preloaded with fetchpriority="high"
- [ ] LCP image optimized (WebP/AVIF, correct size)
- [ ] Critical CSS inlined (< 14KB)
- [ ] No render-blocking JavaScript in <head>
- [ ] Fonts don't block text rendering (font-display: swap)
- [ ] LCP element in initial HTML (not JS-rendered)

LCP element identification

// Find your LCP element
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 measures responsiveness across ALL interactions (clicks, taps, key presses) during a page visit. It reports the worst interaction (at 98th percentile for high-traffic pages).

INP breakdown

Total INP = Input Delay + Processing Time + Presentation Delay

Phase	Target	Optimization
Input Delay	< 50ms	Reduce main thread blocking
Processing	< 100ms	Optimize event handlers
Presentation	< 50ms	Minimize rendering work

Common INP issues

1. Long tasks blocking main thread

// ❌ Long synchronous task
function processLargeArray(items) {
  items.forEach(item => expensiveOperation(item));
}

// ✅ Break into chunks with yielding
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));

    // Yield to main thread
    await new Promise(r => setTimeout(r, 0));
    // Or use scheduler.yield() when available
  }
}

2. Heavy event handlers

// ❌ All work in handler
button.addEventListener('click', () => {
  // Heavy computation
  const result = calculateComplexThing();
  // DOM updates
  updateUI(result);
  // Analytics
  trackEvent('click');
});

// ✅ Prioritize visual feedback
button.addEventListener('click', () => {
  // Immediate visual feedback
  button.classList.add('loading');

  // Defer non-critical work
  requestAnimationFrame(() => {
    const result = calculateComplexThing();
    updateUI(result);
  });

  // Use requestIdleCallback for analytics
  requestIdleCallback(() => trackEvent('click'));
});

3. Third-party scripts

// ❌ Eagerly loaded, blocks interactions
<script src="https://heavy-widget.com/widget.js"></script>

// ✅ Lazy loaded on interaction or visibility
const loadWidget = () => {
  import('https://heavy-widget.com/widget.js')
    .then(widget => widget.init());
};
button.addEventListener('click', loadWidget, { once: true });

4. Excessive re-renders (React/Vue)

// ❌ Re-renders entire tree
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Counter count={count} />
      <ExpensiveComponent /> {/* Re-renders on every count change */}
    </div>
  );
}

// ✅ Memoized expensive components
const MemoizedExpensive = React.memo(ExpensiveComponent);

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

INP optimization checklist

- [ ] No tasks > 50ms on main thread
- [ ] Event handlers complete quickly (< 100ms)
- [ ] Visual feedback provided immediately
- [ ] Heavy work deferred with requestIdleCallback
- [ ] Third-party scripts don't block interactions
- [ ] Debounced input handlers where appropriate
- [ ] Web Workers for CPU-intensive operations

INP debugging

// Identify slow interactions
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 measures unexpected layout shifts. A shift occurs when a visible element changes position between frames without user interaction.

CLS Formula: impact fraction × distance fraction

Common CLS causes

1. Images without dimensions

<!-- ❌ Causes layout shift when loaded -->
<img src="photo.jpg" alt="Photo">

<!-- ✅ Space reserved -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- ✅ Or use aspect-ratio -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

2. Ads, embeds, and iframes

<!-- ❌ Unknown size until loaded -->
<iframe src="https://ad-network.com/ad"></iframe>

<!-- ✅ Reserve space with min-height -->
<div style="min-height: 250px;">
  <iframe src="https://ad-network.com/ad" height="250"></iframe>
</div>

<!-- ✅ Or use aspect-ratio container -->
<div style="aspect-ratio: 16/9;">
  <iframe src="https://youtube.com/embed/..." 
          style="width: 100%; height: 100%;"></iframe>
</div>

3. Dynamically injected content

// ❌ Inserts content above viewport
notifications.prepend(newNotification);

// ✅ Insert below viewport or use transform
const insertBelow = viewport.bottom < newNotification.top;
if (insertBelow) {
  notifications.prepend(newNotification);
} else {
  // Animate in without shifting
  newNotification.style.transform = 'translateY(-100%)';
  notifications.prepend(newNotification);
  requestAnimationFrame(() => {
    newNotification.style.transform = '';
  });
}

4. Web fonts causing FOUT

/* ❌ Font swap shifts text */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
}

/* ✅ Optional font (no shift if slow) */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
  font-display: optional;
}

/* ✅ Or match fallback metrics */
@font-face {
  font-family: 'Custom';
  src: url('custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%; /* Match fallback size */
  ascent-override: 95%;
  descent-override: 20%;
}

5. Animations triggering layout

/* ❌ Animates layout properties */
.animate {
  transition: height 0.3s, width 0.3s;
}

/* ✅ Use transform instead */
.animate {
  transition: transform 0.3s;
}
.animate.expanded {
  transform: scale(1.2);
}

CLS optimization checklist

- [ ] All images have width/height or aspect-ratio
- [ ] All videos/embeds have reserved space
- [ ] Ads have min-height containers
- [ ] Fonts use font-display: optional or matched metrics
- [ ] Dynamic content inserted below viewport
- [ ] Animations use transform/opacity only
- [ ] No content injected above existing content

CLS debugging

// Track layout shifts
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 });

Measurement tools

Lab testing

Chrome DevTools → Performance panel, Lighthouse
WebPageTest → Detailed waterfall, filmstrip
Lighthouse CLI → npx lighthouse <url>

Field data (real users)

Chrome User Experience Report (CrUX) → BigQuery or API
Search Console → Core Web Vitals report
web-vitals library → Send to your analytics

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);

Framework quick fixes

Next.js

// LCP: Use next/image with priority
import Image from 'next/image';
<Image src="/hero.jpg" priority fill alt="Hero" />

// INP: Use dynamic imports
const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false });

// CLS: Image component handles dimensions automatically

React

// LCP: Preload in head
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" />

// INP: Memoize and useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setExpensiveState(newValue));

// CLS: Always specify dimensions in img tags

Vue/Nuxt

<!-- LCP: Use nuxt/image with preload -->
<NuxtImg src="/hero.jpg" preload loading="eager" />

<!-- INP: Use async components -->
<component :is="() => import('./Heavy.vue')" />

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

References

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。

📄 SKILL.md (11,669 bytes)
📎 references/LCP.md (4,431 bytes)