SKILL.md
546 lines · 2,093 words
Web Performance
Purpose
Optimize web application performance across all dimensions -- loading speed, interactivity, visual stability, and runtime efficiency. This skill provides actionable strategies for achieving excellent Core Web Vitals scores and maintaining performance budgets.
Core Web Vitals
Metrics Overview
LCP (Largest Contentful Paint) -- Loading Performance
Good: <= 2.5s
Needs Improvement: 2.5s - 4.0s
Poor: > 4.0s
What it measures: Time until the largest content element is rendered
Common LCP elements: hero images, heading text, video posters
FID (First Input Delay) -- Interactivity (being replaced by INP)
Good: <= 100ms
Needs Improvement: 100ms - 300ms
Poor: > 300ms
INP (Interaction to Next Paint) -- Responsiveness
Good: <= 200ms
Needs Improvement: 200ms - 500ms
Poor: > 500ms
What it measures: Latency of all user interactions throughout page lifecycle
CLS (Cumulative Layout Shift) -- Visual Stability
Good: <= 0.1
Needs Improvement: 0.1 - 0.25
Poor: > 0.25
What it measures: Sum of unexpected layout shift scores