{"name":"fix-core-web-vitals","description":"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.","category":"frontend","tags":["web-vitals","performance","seo"],"models":["any"],"proven":false,"passing_families":0,"model_testing":"Not yet model-tested; testing Jan 2027","url":"https://theskillvault.ai/skills/fix-core-web-vitals","api_url":"https://theskillvault.ai/api/skills/fix-core-web-vitals","raw_url":"https://theskillvault.ai/api/skills/fix-core-web-vitals/raw","body":"# Fix Core Web Vitals\n\nCore 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.\n\n## When to use\n- Search Console or PageSpeed Insights says a page is \"Poor\" or \"Needs improvement\".\n- The main image or heading appears late, taps feel slow, or the layout jumps.\n\n## When not to use\n- You want a broad accessibility and speed audit. Use audit-accessibility-and-performance first, then come back here for fixes.\n\n## The three targets\n| Metric | Measures | Good |\n| --- | --- | --- |\n| LCP | When the biggest thing on screen appears | 2.5 s or less |\n| INP | How fast the page reacts to taps and keys | 200 ms or less |\n| CLS | How much the layout jumps | 0.1 or less |\n\n## Steps\n1. 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.\n2. Reproduce in the lab with Lighthouse or the browser Performance panel, using mobile throttling.\n3. For LCP, find the LCP element in the trace. Then fix in this order:\n   - serve that image at the right size in AVIF or WebP;\n   - remove `loading=\"lazy\"` from it and add `fetchpriority=\"high\"`;\n   - preload its font or image if it is found late;\n   - cut server response time with caching or a CDN.\n4. For INP, record a slow interaction. Split long tasks, delay non-urgent work, and drop or defer heavy third-party scripts.\n5. 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.\n6. Change one thing at a time and re-run the lab test after each change.\n7. Deploy, then watch field data. It takes up to 28 days to fully update.\n\n## Gotchas\n- A perfect Lighthouse score can still fail in the field. Real phones and networks are slower.\n- Lazy-loading the hero image is the most common LCP mistake.\n- Cookie banners and late-loading ads are common CLS causes.\n- Third-party tags often need a privacy review too. Do not paste analytics or API keys into public test tools.\n\n## Portability\nWorks 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.\n\n## Example prompt\n\"Search Console says my homepage has poor LCP and CLS on mobile. Find the cause and fix it.\"\n\n## Done when\n- The failing metric passes in a mobile lab run on each affected page.\n- Each fix is linked to a measured before and after number.\n- Field data is being watched, with a date to re-check.\n\n---\nAdapted from \"core-web-vitals\" in addyosmani/web-quality-skills (MIT, Copyright (c) 2026 Addy Osmani). See LICENSE.txt.","files":["LICENSE.txt"],"license":"MIT","license_name":"MIT License","license_url":"https://opensource.org/license/mit","attribution":"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","install":{"claude_code":"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":"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'","agents":"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'","mcp_url":"https://theskillvault.ai/mcp","cursor_mcp_deeplink":"cursor://anysphere.cursor-deeplink/mcp/install?name=theskillvault&config=eyJ1cmwiOiJodHRwczovL3RoZXNraWxsdmF1bHQuYWkvbWNwIn0%3D","mcp_config":{"mcpServers":{"theskillvault":{"url":"https://theskillvault.ai/mcp"}}}},"bundles":[],"tested_on":[{"family":"chatgpt","name":"ChatGPT","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"claude","name":"Claude","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"gemini","name":"Gemini","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"grok","name":"Grok","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"llama","name":"Llama","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"deepseek","name":"DeepSeek","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"mistral","name":"Mistral","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"qwen","name":"Qwen","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"kimi","name":"Kimi K","outcome":null,"date":null,"source":null,"counts":false,"stale":false}],"proven_rule":{"threshold":5,"window_days":365,"computed_at":"2026-11-02T03:20:33.817Z"}}