Core Web Vitals

Name: Core Web Vitals
Author: kimny1143

kimny1143/claude-code-template

80 installs
4 repo stars
Updated July 31, 2026
kimny1143/claude-code-template

Optimize page performance metrics for SEO and user experience.

About

Optimize page performance metrics for SEO and user experience. See SKILL.md for details.

Optimize page performance metrics for SEO and user experienc
Templates and reference code included

Core Web Vitals by the numbers

80 all-time installs (skills.sh)
Ranked #1,106 of 2,244 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/kimny1143/claude-code-template --skill core-web-vitals

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/kimny1143/claude-code-template/core-web-vitals.svg)](https://skillselion.com/skills/kimny1143/claude-code-template/core-web-vitals)

Installs	80
repo stars	★ 4
Last updated	July 31, 2026
Repository	kimny1143/claude-code-template ↗

What it does

Optimize page performance metrics for SEO and user experience.

Files

SKILL.mdMarkdownGitHub ↗

Core Web Vitals 計測・診断

パフォーマンス計測と問題診断に特化。最適化パターンは vercel-react-best-practices を参照。

---

目標値

指標	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 - 0.25	> 0.25
FCP (First Contentful Paint)	< 1.8s	1.8s - 3.0s	> 3.0s
TTFB (Time to First Byte)	< 800ms	800ms - 1800ms	> 1800ms

---

計測コマンド

Lighthouse CLI

# デスクトップ
npx lighthouse https://example.com --view --preset=desktop

# モバイル
npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile

# アクセシビリティのみ
npx lighthouse http://localhost:3000 --only-categories=accessibility --view

# JSON出力で詳細確認
npx lighthouse http://localhost:3000 --output=json | jq '.audits["largest-contentful-paint"]'

Bundle Analyzer

# Next.js
npm run build
npx @next/bundle-analyzer

# 汎用
npx source-map-explorer 'dist/**/*.js'

Vercel Speed Insights

# Vercelダッシュボードで確認
# Analytics > Speed Insights

---

問題別診断

LCP が遅い (> 2.5s)

原因特定:

npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'

主な原因と対策:

原因	対策
ヒーロー画像が重い	`next/image` + `priority` + WebP
Webフォント読み込み	`next/font` + `display: swap`
サーバー応答遅い	キャッシュ、CDN、DB最適化
render-blocking JS	動的インポート、defer

INP が遅い (> 200ms)

原因特定:

Chrome DevTools > Performance > Interactions

主な原因と対策:

原因	対策
重いイベントハンドラ	`useTransition`、Web Worker
過剰な再レンダリング	React DevTools Profiler確認
長いJSタスク	タスク分割、`requestIdleCallback`

CLS が高い (> 0.1)

原因特定:

npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'

主な原因と対策:

原因	対策
画像サイズ未指定	`width` / `height` 必須
動的コンテンツ挿入	スケルトンで領域確保
Webフォント切り替え	`font-display: swap` + fallback
広告/埋め込み	固定サイズコンテナ