skills.rest
tech-leads-club
tech-leads-clubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics across page rendering scenarios.

5.0k|454|Updated Jan 19, 2026
Search Tags:#web-performance#web-vitals#LCP#CLS#INP#frontend-optimization
One-click install
npx skills add https://github.com/tech-leads-club/agent-skills --skill core-web-vitals-tech-leads-club
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/%28performance%29/core-web-vitals
Command: npx skills add https://github.com/tech-leads-club/agent-skills --skill core-web-vitals-tech-leads-club

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Core Web Vitals (LCP, INP, CLS) impact user experience and SEO; this Skill guides teams to quickly identify and remediate these metrics in real-world pages.

Core Features & Use Cases

  • LCP/INP/CLS optimization across common page scenarios (hero images, fonts, layout shifts)
  • Performance auditing with lab tools (Lighthouse, Chrome DevTools) and real-user data
  • Use Case: A product page with a large hero image and custom fonts where optimizing LCP and CLS reduces visible shifts and improves scores.

Quick Start

Start by running a Core Web Vitals assessment on a target page, then implement recommended changes to improve LCP, INP, and CLS and re-measure.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I optimize LCP, INP, and CLS for a client-rendered page?▼

To optimize Core Web Vitals for client-rendered pages, identify bottlenecks in LCP, INP, and CLS metrics, then apply incremental changes to hero images and fonts to reduce layout shifts and improve load speed.

What's the best way to reduce layout shifts from custom fonts?▼

Reducing layout shifts from custom fonts requires implementing safe, incremental changes to font loading strategies, ensuring text remains visible during font swaps to maintain stable CLS scores across your pages.

How do I measure real-user Core Web Vitals data alongside lab tools?▼

Measuring Core Web Vitals combines lab tools like Lighthouse and Chrome DevTools with real-user monitoring data to accurately assess perceived page performance and identify real-world LCP, INP, and CLS issues.

Can I use these web performance optimizations on static pages?▼

Yes, you can optimize web performance on static pages by applying targeted guidance to handle hero images and fonts, effectively improving LCP and CLS metrics using safe, incremental changes compatible with typical frontend toolchains.

Why does my hero image have a poor LCP score?▼

A poor LCP score on a hero image usually happens because the image is not prioritized by the browser, requiring frontend optimization techniques to ensure faster server-rendered or client-rendered delivery for smoother pages.

Related Skills

Explore More Software Engineering Skills→
neverinfamousneverinfamous
19

web-perf

Audit frontend performance by measuring Core Web Vitals and render-blocking resources via Chrome DevTools MCP.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
Mte90Mte90
51

Next.js Optimization

Optimize Next.js image, font, script, and metadata loading.

Community
Intermediate
jpoindexterjpoindexter
1

performance-and-perceived-speed

Optimize web performance metrics like LCP, INP, and CLS.

Community
Advanced