skills.rest
tan-yong-sheng
tan-yong-shengCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Identify and optimize LCP, INP, and CLS targets for web pages.

72|15|Updated Oct 5, 2025
Search Tags:#web-performance#core-web-vitals#lcp#frontend-optimization#inp#cls
One-click install
npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill core-web-vitals-tan-yong-sheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/tan-yong-sheng/ai-vision-mcp/tree/main/.claude/skills/core-web-vitals
Command: npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill core-web-vitals-tan-yong-sheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix Core Web Vitals bottlenecks to improve user experience and search rankings.

Core Features & Use Cases

  • LCP optimization through resource prioritization, image optimization, and SSR/SSG strategies.
  • INP improvements by reducing main-thread work and deferring non-critical tasks.
  • CLS stabilization via reserved space, font handling, and non-shifting animations.
  • Use Case: Apply to marketing pages, product dashboards, and content-heavy articles to balance performance with rich UI.

Quick Start

Run a quick audit on a sample page, identify the top culprit for LCP/INP/CLS, and implement the suggested fixes.

Frequently Asked Questions about core-web-vitals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve LCP and reduce main-thread work for web performance?▼

Optimize LCP through resource prioritization, image optimization, and SSR/SSG strategies. Improve INP by reducing main-thread work and deferring non-critical tasks on marketing pages and content-heavy articles.

What causes CLS layout shifts and how can I stabilize page elements?▼

Stabilize CLS layout shifts by reserving space for media, handling web fonts properly, and using non-shifting animations to prevent unexpected visual movements on content-heavy articles.

How do I audit and fix Core Web Vitals bottlenecks for better search rankings?▼

Audit Core Web Vitals bottlenecks by running a page audit to identify top LCP, INP, or CLS culprits, then implement concrete optimization steps to improve user experience and search rankings.

Can I apply Core Web Vitals optimization strategies to product dashboards?▼

Apply Core Web Vitals optimization to product dashboards to balance performance with rich UI, ensuring fast user-perceived performance alongside interactive data visualizations.

When do I need to optimize Core Web Vitals for my web pages?▼

Optimize Core Web Vitals when user-perceived performance matters most, such as on marketing landing pages, product dashboards, and content-heavy articles requiring fast loading and visual stability.

Related Skills

Explore More Software Engineering Skills→
lehoangphuc747lehoangphuc747

performance-profiling

Profile web application runtime behavior and resource usage to identify performance bottlenecks.

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

perf-web-optimization

Audit Core Web Vitals and implement image, caching, and code-splitting fixes.

Official
Advanced
rnavarychrnavarych
14

role-frontend:frontend-performance

Diagnoses and improves Core Web Vitals and reduces bundle sizes via code splitting.

Community
Advanced
rlagycksrlagycks
3

benchmark

Measure web, API, and build performance metrics and compare results.

Community
Intermediate