majiayu000/claude-arsenal
xiaohongshu
xiaohongshu
286 148
View 
Core Web Vitals 計測・診断
core-web-vitals
Core Web Vitals計測・診断スキル。Lighthouse CLI、Bundle Analyzer、パフォーマンス問題の特定と対策。
SKILL.md
Full skill instructions
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 |
| 広告/埋め込み | 固定サイズコンテナ |
FCP が遅い (> 1.8s)
主な原因と対策:
| 原因 | 対策 |
|---|---|
| 初期HTMLが大きい | Server Components、ストリーミング |
| render-blocking CSS | Critical CSS inline |
| TTFB が遅い | サーバー最適化 |
チェックリスト
計測
- Lighthouse モバイル/デスクトップ両方確認
- 実機でも確認（エミュレーションと差異あり）
- 本番環境で計測（開発環境は参考値）
監視
- Vercel Speed Insights 設定
- アラート閾値設定（LCP > 3s等）
- 定期レポート確認
関連スキル
- vercel-react-best-practices: 最適化パターン（57ルール）
- ui-ux-pro-max: アクセシビリティ（WCAG コントラスト）
More skills from majiayu000
majiayu000/claude-arsenal
technical-spec
technical spec
286 141
View majiayu000/claude-arsenal
product-ux-expert
product ux expert
286 133
View majiayu000/claude-arsenal
database-patterns
database patterns
286 119
View majiayu000/claude-skill-registry
agent-task-conductor
Conduct multi-agent task orchestration and workflow coordination.
663 1
View majiayu000/claude-skill-registry
conductor-setup
Initialize project with Conductor artifacts (product definition,
663 1
View majiayu000/claude-skill-registry
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
663 1
View majiayu000/claude-skill-registry
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
663 1
View majiayu000/claude-skill-registry-data
h3-pg
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
23 1
View majiayu000/claude-skill-registry
conductor-development
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
663 1
View majiayu000/claude-skill-registry
conductor-status
Display project status, active tracks, and next actions
663 1
View majiayu000/claude-skill-registry
dockerization
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
663 1
View Popular AI tools
Video
Kaiber
Generate, edit, and beat-sync AI video with leading models in one workspace.
Paid
View Productivity
Vimcal
The world's fastest calendar for remote work
Free
View Images
IMGCreator.ai
Transform Your Design with AI Designer by ImgCreator.ai
Freemium
View Content & writing
Akool AI
Revolutionizing Video Production with AI-Powered Creativity
Paid
View Images
Clipdrop Uncrop
Extend an image past the frame and let AI fill the new aspect ratio.
Freemium
View Security
StarByFace
Discover your celebrity doppelgänger with StarByFace!
Free
View C
Finance
ChainClarity
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Freemium
View Coding & apps
Opus Clip
Opus.ai: Revolutionize Your Web Experience
Free
View