Core web vitals skill
When the user wants to optimize Core Web Vitals, fix LCP, INP, or CLS issues.
by kostja94·MIT license·★ 1,006 Stars on the repo·GitHub ↗
Use now
npx degit kostja94/marketing-skills/skills/seo/technical/core-web-vitals#main ~/.claude/skills/core-web-vitals-kostja94Checked ·commit main
Files of Core web vitals
SKILL.md
Show the full text98 lines
SEO Technical: Core Web Vitals
Guides optimization of Core Web Vitals (CWV)—Google's user experience metrics that affect search ranking. CWV are confirmed ranking factors for mobile and desktop.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Scope (Technical SEO)
- LCP (Largest Contentful Paint): Loading performance; time to render largest content element
- INP (Interaction to Next Paint): Responsiveness; replaced FID on March 12, 2024
- CLS (Cumulative Layout Shift): Visual stability; unexpected layout shifts
Target Thresholds (75th percentile, field data)
| Metric | Target | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP | ≤2.5s | ≤2.5s | 2.5–4.0s | >4.0s |
| INP | ≤200ms | ≤200ms | 200–500ms | >500ms |
| CLS | <0.1 | ≤0.1 | 0.1–0.25 | >0.25 |
Source: Google Page Experience
Initial Assessment
Project context: Read root contextus.md when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.
Identify:
- Tools: GSC Core Web Vitals report, PageSpeed Insights, Chrome DevTools
- Metrics: Which metric is failing (LCP, INP, CLS)
- Page type: Hero, article, product, list—LCP candidate differs
LCP Optimization
LCP measures the time until the largest content element (image, video, or text block) is visible.
| Cause | Fix |
|---|---|
| Slow server response | Reduce TTFB; use CDN; optimize server |
| Render-blocking resources | Defer non-critical CSS/JS; inline critical CSS |
| Large images | WebP/AVIF; compress; width/height to prevent CLS; see image-optimization |
| Client-side rendering | SSR/SSG for above-fold content; see rendering-strategies |
| Third-party scripts | Load async; defer non-critical |
LCP candidates: Hero image, large text block, video poster. Ensure above-fold images use loading="eager" (default); never lazy-load LCP.
INP Optimization
INP measures responsiveness—time from user interaction to next paint. Replaced FID on March 12, 2024.
| Cause | Fix |
|---|---|
| Long-running JS | Break tasks >50ms; use requestIdleCallback; Web Workers |
| Heavy event handlers | Debounce/throttle; defer non-critical work |
| Main thread blocking | Reduce third-party scripts; defer non-critical JS |
| Layout thrashing | Batch DOM reads/writes; avoid forced reflows |
CLS Optimization
CLS measures unexpected layout shifts.
| Cause | Fix |
|---|---|
| Images without dimensions | Always set width and height attributes |
| Dynamic content | Reserve space for ads, embeds; use min-height |
| Web fonts | font-display: optional or swap; preload critical fonts |
| Animations | Use transform instead of top/left/width |
Reserve space: For images, ads, embeds—define dimensions before load. Avoid inserting content above existing content without reserved space.
Tools & Monitoring
| Tool | Use |
|---|---|
| GSC | Core Web Vitals report; URL grouping; field data |
| PageSpeed Insights | Lab + field data; mobile + desktop |
| Chrome DevTools | Performance panel; LCP element; layout shift overlay |
Output Format
- Current state: Which metrics fail (LCP, INP, CLS)
- Prioritized fixes: By impact
- References: Web Vitals, Page Experience
Related Skills
- image-optimization: LCP image optimization; WebP; lazy loading (below-fold only)
- google-search-console: CWV report; field data monitoring
- mobile-friendly: Mobile-first indexing; mobile CWV targets
- rendering-strategies: SSR/SSG for LCP; content in initial HTML
- site-crawlability: Redirect chains waste crawl; fix for performance
| 1 | |
| 2 | name core-web-vitals |
| 3 | description When the user wants to optimize Core Web Vitals, fix LCP, INP, or CLS issues. Also use when the user mentions "Core Web Vitals," "CWV," "LCP," "INP," "CLS," "FID," "page speed," "page performance," "Largest Contentful Paint," "Interaction to Next Paint," "Cumulative Layout Shift," or "Page Experience." For GSC CWV, use google-search-console. |
| 4 | metadata |
| 5 | version 1.0.2 |
| 6 | |
| 7 | |
| 8 | # SEO Technical: Core Web Vitals |
| 9 | |
| 10 | Guides optimization of Core Web Vitals (CWV)—Google's user experience metrics that affect search ranking. CWV are confirmed ranking factors for mobile and desktop. |
| 11 | |
| 12 | **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. |
| 13 | |
| 14 | ## Scope (Technical SEO) |
| 15 | |
| 16 | **LCP** (Largest Contentful Paint): Loading performance; time to render largest content element |
| 17 | **INP** (Interaction to Next Paint): Responsiveness; replaced FID on March 12, 2024 |
| 18 | **CLS** (Cumulative Layout Shift): Visual stability; unexpected layout shifts |
| 19 | |
| 20 | ## Target Thresholds (75th percentile, field data) |
| 21 | |
| 22 | | Metric | Target | Good | Needs Improvement | Poor | |
| 23 | |--------|--------|------|-------------------|------| |
| 24 | | **LCP** | ≤2.5s | ≤2.5s | 2.5–4.0s | >4.0s | |
| 25 | | **INP** | ≤200ms | ≤200ms | 200–500ms | >500ms | |
| 26 | | **CLS** | <0.1 | ≤0.1 | 0.1–0.25 | >0.25 | |
| 27 | |
| 28 | **Source**: [Google Page Experience] |
| 29 | |
| 30 | ## Initial Assessment |
| 31 | |
| 32 | **Project context:** Read root `contextus.md` when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system. |
| 33 | |
| 34 | Identify: |
| 35 | **Tools**: GSC Core Web Vitals report, PageSpeed Insights, Chrome DevTools |
| 36 | **Metrics**: Which metric is failing (LCP, INP, CLS) |
| 37 | **Page type**: Hero, article, product, list—LCP candidate differs |
| 38 | |
| 39 | ## LCP Optimization |
| 40 | |
| 41 | LCP measures the time until the largest content element (image, video, or text block) is visible. |
| 42 | |
| 43 | | Cause | Fix | |
| 44 | |-------|-----| |
| 45 | | **Slow server response** | Reduce TTFB; use CDN; optimize server | |
| 46 | | **Render-blocking resources** | Defer non-critical CSS/JS; inline critical CSS | |
| 47 | | **Large images** | WebP/AVIF; compress; `width`/`height` to prevent CLS; see **image-optimization** | |
| 48 | | **Client-side rendering** | SSR/SSG for above-fold content; see **rendering-strategies** | |
| 49 | | **Third-party scripts** | Load async; defer non-critical | |
| 50 | |
| 51 | **LCP candidates**: Hero image, large text block, video poster. Ensure above-fold images use `loading="eager"` (default); never lazy-load LCP. |
| 52 | |
| 53 | ## INP Optimization |
| 54 | |
| 55 | INP measures responsiveness—time from user interaction to next paint. Replaced FID on March 12, 2024. |
| 56 | |
| 57 | | Cause | Fix | |
| 58 | |-------|-----| |
| 59 | | **Long-running JS** | Break tasks >50ms; use `requestIdleCallback`; Web Workers | |
| 60 | | **Heavy event handlers** | Debounce/throttle; defer non-critical work | |
| 61 | | **Main thread blocking** | Reduce third-party scripts; defer non-critical JS | |
| 62 | | **Layout thrashing** | Batch DOM reads/writes; avoid forced reflows | |
| 63 | |
| 64 | ## CLS Optimization |
| 65 | |
| 66 | CLS measures unexpected layout shifts. |
| 67 | |
| 68 | | Cause | Fix | |
| 69 | |-------|-----| |
| 70 | | **Images without dimensions** | Always set `width` and `height` attributes | |
| 71 | | **Dynamic content** | Reserve space for ads, embeds; use `min-height` | |
| 72 | | **Web fonts** | `font-display: optional` or `swap`; preload critical fonts | |
| 73 | | **Animations** | Use `transform` instead of `top`/`left`/`width` | |
| 74 | |
| 75 | **Reserve space**: For images, ads, embeds—define dimensions before load. Avoid inserting content above existing content without reserved space. |
| 76 | |
| 77 | ## Tools & Monitoring |
| 78 | |
| 79 | | Tool | Use | |
| 80 | |------|-----| |
| 81 | | **GSC** | Core Web Vitals report; URL grouping; field data | |
| 82 | | **PageSpeed Insights** | Lab + field data; mobile + desktop | |
| 83 | | **Chrome DevTools** | Performance panel; LCP element; layout shift overlay | |
| 84 | |
| 85 | ## Output Format |
| 86 | |
| 87 | **Current state**: Which metrics fail (LCP, INP, CLS) |
| 88 | **Prioritized fixes**: By impact |
| 89 | **References**: [Web Vitals], [Page Experience] |
| 90 | |
| 91 | ## Related Skills |
| 92 | |
| 93 | **image-optimization**: LCP image optimization; WebP; lazy loading (below-fold only) |
| 94 | **google-search-console**: CWV report; field data monitoring |
| 95 | **mobile-friendly**: Mobile-first indexing; mobile CWV targets |
| 96 | **rendering-strategies**: SSR/SSG for LCP; content in initial HTML |
| 97 | **site-crawlability**: Redirect chains waste crawl; fix for performance |
| 98 |
Discussion
Alternatives
Agentic Browsing ReadinessAudit and fix agent readiness: the Lighthouse Agentic Browsing fraction, accessibility tree for agents, robots.txt and Content-Signal for AI agents, WAF treatment of agent traffic, llms.txt, Markdown delivery, ai-catalog.json, /.well-known discovery files, and WebMCP tools. Exclude AI citability and brand signals (seo-geo) and commerce protocol depth (seo-ecommerce).Backlink Profile AnalysisBacklink profile analysis: referring domains, anchor text distribution, toxic link detection, competitor gap analysis. Works with free APIs (Moz, Bing Webmaster, Common Crawl) and DataForSEO extension. Use when user says backlinks, link profile, referring domains, anchor text, toxic links, link gap, link building, disavow, or backlink audit.
/setup-cmsConnect a CMS to notfair SEO tools. Guides users through configuring WordPress, Strapi, Contentful, or Ghost — tests the connection, and writes credentials to .env.local. Once set up, seo-analysis automatically cross- references CMS content against Google Search Console data. Use whenever the user says "connect my CMS", "set up WordPress", "configure Strapi", "add Contentful", "connect Ghost", or "CMS setup". Also trigger if the user asks why no CMS data appears in a seo-analysis report.Backlink checkBacklink profile for any domain — referring domains, authority, anchors, new/lost links, and a side-by-side vs a competitor. Use when asked "check my backlinks", "backlink profile of X", "who links to them", or "link gap vs competitor".Browse more free Claude skills or everything in Marketing.