Agent skill · marketing growth · davila7
core-web-vitals
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".
Why this skill is useful
Provides specific optimization techniques and code snippets for improving Core Web Vitals that are not commonly known.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Core Web Vitals optimization Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience. The three metrics 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: Largest Contentful Paint LCP measures when the largest visible content element renders. Usually this is: Hero image or video Large text block Background image <svg> element Common LCP issues 1. Slow server response (TTFB > 800ms) 2. Render-blocking resources 3. Slow resource load times 4. Client-side rendering delays LCP optimization checklist LCP element identification --- INP: Interaction to Next Paint 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). INP breakdown 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 Common INP issues 1. Long tasks blocking main thread 2. Heavy event handlers 3. Third-party scripts 4. Excessive re-renders (React/Vue) INP optimization checklist INP debugging --- CLS: Cumulative Layout Shift 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 Common CLS causes 1. Images without dimensions 2. Ads, embeds, and iframes 3. Dynamically injected content 4. Web fonts causing FOUT 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/core-web-vitals