skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Analyze LCP, INP, and CLS issues and propose concrete fixes.

Updated May 12, 2026
Search Tags:#web-performance#core-web-vitals#lcp#frontend-performance#inp#cls#page-optimization
One-click install
npx skills add https://github.com/YeomanYe/skills --skill core-web-vitals-yeomanye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/YeomanYe/skills/tree/main/core-web-vitals
Command: npx skills add https://github.com/YeomanYe/skills --skill core-web-vitals-yeomanye

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Improve Core Web Vitals (LCP, INP, CLS) to enhance page speed, interactivity, and visual stability.

Core Features & Use Cases

  • Improve LCP by optimizing images, server response times, and critical CSS
  • Improve INP by reducing main-thread work and deferring non-critical scripts
  • Improve CLS by reserving space for media and avoiding layout shifts
  • Use case: A landing page with heavy hero image is loaded on a 3G connection and needs to meet Core Web Vitals thresholds.

Quick Start

Ask me to optimize Core Web Vitals on your page and I will begin by analyzing LCP, INP, and CLS issues and proposing concrete 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 optimize Core Web Vitals for a single-page app with slow network connections?▼

Optimize Core Web Vitals on single-page apps by reducing TTFB, preloading critical assets, and deferring non-critical scripts to improve LCP, INP, and CLS metrics across slow networks.

What is the best way to improve LCP when a landing page has a heavy hero image?▼

Improve LCP by optimizing large images, reducing server response times, and inlining critical CSS to ensure the largest contentful paint loads faster on your landing page.

Why does my page have a high CLS and how can I fix layout shifts from dynamic content?▼

Fix high CLS by reserving space for media elements and avoiding layout shifts caused by dynamic content loading, ensuring visual stability for your web pages.

How do I reduce INP to improve page interactivity on frontend web applications?▼

Reduce INP by minimizing main-thread work and deferring non-critical JavaScript scripts, which enhances overall page interactivity and responsiveness for users.

Can I use page optimization techniques to meet Core Web Vitals thresholds on 3G connections?▼

Page optimization techniques effectively meet Core Web Vitals thresholds on 3G connections by optimizing fonts, reducing server response times, and preloading critical assets.

What are the limitations of frontend performance optimization for dynamic content and large images?▼

Frontend performance optimization limitations include managing dynamic content layout shifts and large image payloads, requiring techniques like reserving media space and inlining critical CSS.

Related Skills

Explore More Software Engineering Skills→
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
rjit1rjit1
1

seo-google

Analyze Google Search Console, PageSpeed Insights, and GA4 data for SEO audits.

Community
Advanced
tdcaretdcare
1

salvo-caching

Implement HTTP caching headers and moka in-memory caches for Salvo REST endpoints.

Community
Intermediate
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced