菜单
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".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Gera 10 conceitos criativos de PERFORMANCE para Meta Ads (Facebook/Instagram) usando framework Hook → Hold → Offer e 40+ Creative Types com mapeamento de emoção e estágio de funil. Cada conceito inclui estratégia direct response, copy com limites de caracteres, conceito visual funcional, variações A/B de hook, prompt de imagem e adaptações por placement. Orientado por design system — quando não fornecido, EXTRAI automaticamente de referências visuais do cliente. Sem design system = SLOP. Use quando precisar criar anúncios de conversão para Instagram ou Facebook, gerar conceitos criativos de performance para Meta Ads, criar peças direct response para feed, stories ou reels, desenvolver campanhas de lead generation ou vendas no Meta, ou qualquer variação de "criativos para Meta", "anúncios para Instagram", "campanha Facebook Ads", "peças para feed", "criativos de performance".
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations, scroll-based animations, draggable elements, staggered effects, or any JavaScript-based animation on the web. Triggers on: "anime.js", "animejs", "animate elements", "CSS animation with JS", "timeline animation", "stagger animation", "SVG morphing", "motion path", "scroll animation", "draggable", "spring animation", "keyframe animation".
Expert AWS Cloud Advisor for architecture design, security review, and implementation guidance. Leverages AWS MCP tools for accurate, documentation-backed answers. Use when user asks about AWS architecture, security, service selection, migrations, troubleshooting, or learning AWS. Triggers on AWS, Lambda, S3, EC2, ECS, EKS, DynamoDB, RDS, CloudFormation, CDK, Terraform, Serverless, SAM, IAM, VPC, API Gateway, or any AWS service.
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
| name | core-web-vitals |
| 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". |
| license | MIT |
| metadata | {"author":"web-quality-skills","version":"1.0"} |
| version | 1.0.0 |
| updated | 2026-03-17 |
Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.
| 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 measures when the largest visible content element renders. Usually this is:
<svg> element1. 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 } }
}
- [ ] 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)
// 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 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).
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 |
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>
)
}
- [ ] 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
// 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 measures unexpected layout shifts. A shift occurs when a visible element changes position between frames without user interaction.
CLS Formula: impact fraction × distance fraction
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);
}
- [ ] 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
// 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 })
npx lighthouse <url>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)
// 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
// 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
<!-- 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' }" />