菜单
Deep-dive into Core Web Vitals — LCP, INP, CLS diagnosis and fix recipes for React/Next.js. Specific patterns for each metric with measurement tools, thresholds, and real-world fixes. Use when pages are slow, Lighthouse scores are low, or search ranking is affected by performance.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
API client architecture for React and Next.js — typed fetch wrappers, interceptors, retry with backoff, request cancellation, pagination patterns, file uploads, and Next.js API route handlers. Use when building API clients, data fetching layers, or integrating with backends.
Authentication and authorization patterns for React and Next.js — NextAuth/Auth.js setup, middleware route protection, token refresh, session management, protected components, OAuth providers, role-based UI. Use when implementing login, protecting routes, or managing user sessions.
Production error handling architecture for React and Next.js — Error boundary hierarchies, custom error classes, global error normalization, Sentry integration, fallback UI strategies, toast vs inline vs full-page error patterns, and error recovery. Use when building error UIs, setting up monitoring, or handling failures gracefully.
Frontend SEO for React and Next.js — Metadata API, meta tags, canonical URLs, Open Graph, Twitter cards, robots.txt, sitemap, SSR/SSG/ISR rendering strategy, heading hierarchy, and crawlability. Use when building pages, setting up metadata, or optimizing for search visibility.
JSON-LD structured data and schema markup for React/Next.js — Organization, Article, Product, FAQ, BreadcrumbList, HowTo, WebSite with search. Also covers GEO/AEO optimization for AI search engines (Google AI Overviews, Perplexity, ChatGPT). Use when adding rich snippets, building product pages, or optimizing for AI search.
Frontend security audit covering XSS, injection, CSRF, secrets scanning, CSP headers, dependency vulnerabilities, and authentication patterns. Use when reviewing security, before launch, or when handling user input.
| name | core-web-vitals |
| description | Deep-dive into Core Web Vitals — LCP, INP, CLS diagnosis and fix recipes for React/Next.js. Specific patterns for each metric with measurement tools, thresholds, and real-world fixes. Use when pages are slow, Lighthouse scores are low, or search ranking is affected by performance. |
| Metric | Measures | Good | Needs Work | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed | ≤ 2.5s | ≤ 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | Responsiveness | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Visual stability | ≤ 0.1 | ≤ 0.25 | > 0.25 |
What it measures: How fast the biggest visible element loads (hero image, headline, video poster).
# Run Lighthouse to identify LCP element
npx lighthouse http://localhost:3000 --output=json --quiet | \
jq '.audits["largest-contentful-paint"]'
# Check which element is the LCP
npx lighthouse http://localhost:3000 --output=json --quiet | \
jq '.audits["largest-contentful-paint-element"].details'
Hero image is the LCP element:
// BEFORE: lazy-loaded hero (kills LCP)
<Image src="/hero.jpg" alt="..." loading="lazy" />
// AFTER: preloaded, priority hero
<Image
src="/hero.webp" // Modern format
alt="Product hero showing the dashboard"
width={1200}
height={600}
priority // Preloads in <head>
fetchPriority="high" // Browser fetch priority
sizes="100vw" // Full-width
placeholder="blur" // Instant placeholder
blurDataURL={heroBlurDataUrl} // Base64 blur
/>
Headline text is the LCP element:
/* Preload the heading font */
<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin />
@font-face {
font-family: 'Heading';
src: url('/fonts/heading.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
}
Server response is slow:
// Switch from SSR to SSG/ISR for static content
// app/products/[slug]/page.tsx
export const revalidate = 3600; // ISR: regenerate every hour
// Or generate at build time
export async function generateStaticParams() {
const products = await getAllProducts();
return products.map((p) => ({ slug: p.slug }));
}
Render-blocking resources:
// Move non-critical JS to dynamic imports
const HeavyChart = dynamic(() => import('./HeavyChart'), {
loading: () => <ChartSkeleton />,
ssr: false,
});
// Defer third-party scripts
<Script src="https://analytics.example.com" strategy="lazyOnload" />
What it measures: Delay between user interaction (click, tap, keypress) and the next visual update.
INP is hard to catch in lab tests — it requires real user interactions.
// Add web-vitals monitoring
import { onINP } from 'web-vitals';
onINP((metric) => {
console.log('INP:', metric.value, 'ms');
console.log('Element:', metric.attribution?.interactionTarget);
console.log('Type:', metric.attribution?.interactionType);
// Send to analytics
});
Heavy computation blocking the main thread:
// BEFORE: synchronous filter on 10K items
function handleSearch(query: string) {
const results = allItems.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
setResults(results); // Blocks paint until done
}
// AFTER: debounce + startTransition
import { startTransition } from 'react';
const debouncedQuery = useDebounce(query, 150);
useEffect(() => {
startTransition(() => {
const results = allItems.filter(item =>
item.name.toLowerCase().includes(debouncedQuery.toLowerCase())
);
setResults(results);
});
}, [debouncedQuery]);
Large re-renders on interaction:
// BEFORE: entire list re-renders on selection
function ItemList({ items, selectedId, onSelect }) {
return items.map(item => (
<Item
key={item.id}
item={item}
isSelected={item.id === selectedId}
onSelect={onSelect}
/>
));
}
// AFTER: memoize individual items
const MemoItem = memo(function Item({ item, isSelected, onSelect }) {
return (
<div
role="option"
aria-selected={isSelected}
onClick={() => onSelect(item.id)}
>
{item.name}
</div>
);
});
Long event handlers:
// BEFORE: heavy work in click handler
async function handleSubmit() {
validateForm(); // 50ms
transformData(); // 100ms
await submitToAPI(); // Network
updateLocalState(); // 30ms
showSuccessToast(); // 10ms
} // Total: 190ms+ before any paint
// AFTER: yield to browser between steps
async function handleSubmit() {
setIsSubmitting(true); // Paint: show loading
// Yield to let the loading state paint
await new Promise(resolve => setTimeout(resolve, 0));
const data = transformData();
await submitToAPI(data);
updateLocalState();
showSuccessToast();
}
What it measures: How much the page layout shifts unexpectedly while loading.
import { onCLS } from 'web-vitals';
onCLS((metric) => {
console.log('CLS:', metric.value);
metric.entries.forEach((entry) => {
console.log('Shifted element:', entry.sources?.[0]?.node);
});
});
Images without dimensions:
// BEFORE: no dimensions = layout shift when image loads
<img src="/photo.jpg" alt="..." />
// AFTER: explicit dimensions prevent shift
<Image src="/photo.jpg" alt="..." width={800} height={600} />
// For responsive images with unknown aspect ratio:
<div style={{ aspectRatio: '16/9', position: 'relative' }}>
<Image src="/photo.jpg" alt="..." fill style={{ objectFit: 'cover' }} />
</div>
Dynamic content injected above viewport:
// BEFORE: banner appears and pushes everything down
{showBanner && <Banner />} // CLS when banner loads
// AFTER: reserve space with min-height
<div style={{ minHeight: showBanner ? 'auto' : 0 }}>
{showBanner && <Banner />}
</div>
// OR: use CSS containment
<div style={{ contentVisibility: 'auto', containIntrinsicSize: '0 60px' }}>
{showBanner && <Banner />}
</div>
Web fonts causing reflow:
@font-face {
font-family: 'Body';
src: url('/fonts/body.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
size-adjust: 105%; /* Match fallback metrics */
ascent-override: 95%;
descent-override: 22%;
line-gap-override: 0%;
}
| Tool | Lab / Field | Best For |
|---|---|---|
| Lighthouse | Lab | Quick local audits |
| Chrome DevTools Performance | Lab | Trace individual interactions |
| PageSpeed Insights | Field + Lab | Real CrUX data + Lighthouse |
| web-vitals (npm) | Field | Production monitoring |
| Chrome UX Report (CrUX) | Field | 28-day real user data |
// lib/web-vitals.ts
import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics(metric: { name: string; value: number; id: string }) {
// Send to your analytics endpoint
navigator.sendBeacon('/api/vitals', JSON.stringify({
name: metric.name,
value: Math.round(metric.value),
id: metric.id,
page: window.location.pathname,
timestamp: Date.now(),
}));
}
export function initWebVitals() {
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
}
font-display: swapdynamic()size-adjust to match fallback metrics