Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Core Web Vitals Optimization

A skill that diagnoses and fixes LCP, INP, and CLS problems with concrete code-level guidance.

Dev & CodingIntermediate★ 2,653⑂ 240AI score 9/10Last updated: Jun 14, 2026

What it does

  • Lays out the Good/Needs-work/Poor thresholds for LCP, INP, and CLS plus Google's 75th-percentile rule.
  • Diagnoses the usual suspects per metric (slow TTFB, render-blocking CSS/JS, heavy event handlers, unsized images, font FOUT) with ❌/✅ code pairs.
  • Ships PerformanceObserver snippets to identify your actual LCP element, slow interactions, and the exact nodes causing layout shifts.
  • Covers modern techniques — Speculation Rules prerendering, scheduler.yield(), requestIdleCallback — including their bandwidth and side-effect caveats.
  • Provides per-metric checklists and framework quick fixes for Next.js, React, and Vue/Nuxt.

Who it's for

  • Web developers seeing Core Web Vitals warnings in Search Console.
  • Frontend engineers chasing better Lighthouse scores or real-user field data.
  • Owners of ad-heavy commerce or media sites fighting layout shift.
  • Technical SEO practitioners managing page experience signals.

Examples

  1. "Our landing page LCP is 4s — fix it" → preload the hero with fetchpriority="high", inline critical CSS, move the LCP element into server-rendered HTML.
  2. "Clicks feel laggy, optimize INP" → chunk the heavy work, await scheduler.yield() after painting visual feedback, defer analytics to idle time.
  3. "The page jumps when ads load" → wrap embeds in min-height/aspect-ratio containers and verify with the layout-shift observer.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/core-web-vitals/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/core-web-vitals folder from the GitHub repo addyosmani/web-quality-skills into my ~/.claude/skills/core-web-vitals/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/addyosmani/web-quality-skills.git && mkdir -p ~/.claude/skills && cp -r web-quality-skills/skills/core-web-vitals ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Create the skills directory: mkdir -p ~/.claude/skills
  3. Clone the repo: git clone https://github.com/addyosmani/web-quality-skills.git
  4. Copy just this skill: cp -r web-quality-skills/skills/core-web-vitals ~/.claude/skills/
  5. Restart Claude Code and confirm core-web-vitals shows up in your skill list.
  6. Trigger it with prompts like "improve Core Web Vitals", "fix LCP", or "reduce CLS". Having Node.js available lets you also run npx lighthouse <url> for real measurements.
View source on GitHub ↗License: MIT