Frontend · Skill

Fix Core Web Vitals

fix-core-web-vitals

Finds and fixes the cause of poor Core Web Vitals - slow LCP, laggy INP and layout shift (CLS) - starting from real-user field data, then applying targeted fixes to images, fonts, scripts and layout. Use when PageSpeed or Search Console flags Core Web Vitals, the page loads slowly, clicks feel laggy, or content jumps around.

Works with: Any AI Not yet model-tested; testing Jan 2027

View raw SKILL.mdInstall

Paste it into ChatGPT, Claude, Gemini or any AI chat, then tell it about your project. How it works

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/raw' -o ~/'.claude/skills/fix-core-web-vitals/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/files/LICENSE.txt' -o ~/'.claude/skills/fix-core-web-vitals/LICENSE.txt'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/raw' -o '.cursor/skills/fix-core-web-vitals/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/files/LICENSE.txt' -o '.cursor/skills/fix-core-web-vitals/LICENSE.txt'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/raw' -o '.agents/skills/fix-core-web-vitals/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/fix-core-web-vitals/files/LICENSE.txt' -o '.agents/skills/fix-core-web-vitals/LICENSE.txt'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Core Web Vitals are three numbers Google reads from real visitors. Fix the one that fails, on the pages that matter, and prove it with data.

When to use

  • Search Console or PageSpeed Insights says a page is "Poor" or "Needs improvement".
  • The main image or heading appears late, taps feel slow, or the layout jumps.

When not to use

  • You want a broad accessibility and speed audit. Use audit-accessibility-and-performance first, then come back here for fixes.

The three targets

| Metric | Measures | Good |
| --- | --- | --- |
| LCP | When the biggest thing on screen appears | 2.5 s or less |
| INP | How fast the page reacts to taps and keys | 200 ms or less |
| CLS | How much the layout jumps | 0.1 or less |

Steps

  1. Get field data first: PageSpeed Insights (top section) or the Search Console report. Note which metric fails, on which page and on mobile or desktop.
  2. Reproduce in the lab with Lighthouse or the browser Performance panel, using mobile throttling.
  3. For LCP, find the LCP element in the trace. Then fix in this order:
  • serve that image at the right size in AVIF or WebP;
  • remove loading="lazy" from it and add fetchpriority="high";
  • preload its font or image if it is found late;
  • cut server response time with caching or a CDN.
  1. For INP, record a slow interaction. Split long tasks, delay non-urgent work, and drop or defer heavy third-party scripts.
  2. For CLS, give images, videos, ads and embeds a fixed width and height or aspect-ratio. Reserve space for banners. Use font-display: optional or matched fallback fonts.
  3. Change one thing at a time and re-run the lab test after each change.
  4. Deploy, then watch field data. It takes up to 28 days to fully update.

Gotchas

  • A perfect Lighthouse score can still fail in the field. Real phones and networks are slower.
  • Lazy-loading the hero image is the most common LCP mistake.
  • Cookie banners and late-loading ads are common CLS causes.
  • Third-party tags often need a privacy review too. Do not paste analytics or API keys into public test tools.

Portability

Works with any framework or host. If you use Next.js, next/image with priority covers most LCP image fixes; other stacks have an equivalent image component or plain <img> attributes.

Example prompt

"Search Console says my homepage has poor LCP and CLS on mobile. Find the cause and fix it."

Done when

  • The failing metric passes in a mobile lab run on each affected page.
  • Each fix is linked to a measured before and after number.
  • Field data is being watched, with a date to re-check.

---

Adapted from "core-web-vitals" in addyosmani/web-quality-skills (MIT, Copyright (c) 2026 Addy Osmani). See LICENSE.txt.

Bundled files

Licence

Adapted from Addy Osmani (addyosmani/web-quality-skills, core-web-vitals) (Copyright (c) 2026 Addy Osmani), MIT License. Adapted by TheSkillVault: rewritten as a measure-fix-verify loop for beginners with one fix list per metric; dropped the long framework sections and reference links; added gotchas and done-when.

Licence: MIT License. Attribution when you reuse it: Based on work by Addy Osmani (addyosmani/web-quality-skills, core-web-vitals) (Copyright (c) 2026 Addy Osmani, MIT License), https://github.com/addyosmani/web-quality-skills/tree/afa8da942115f2961fdbfa80807ea0b232ff6c00/skills/core-web-vitals; adapted by TheSkillVault, https://theskillvault.ai