core-web-vitals

Optimize LCP, INP, and CLS metrics across SSR, CSR, and static sites.

2.6k|238|Updated Jan 18, 2026

Search Tags:#performance #web-vitals #core-web-vitals #lcp #frontend-optimization #inp #cls

Ready to run

npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals-addyosmani

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/addyosmani/web-quality-skills/tree/main/skills/core-web-vitals
Command: npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals-addyosmani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.

Core Features & Use Cases

Guidance on reducing TTFB, preloading key resources, inlining critical CSS, and deferring non-critical CSS/JS.
Strategies to improve LCP, INP, and CLS across SSR, CSR, and static sites with real-world examples.
Use Case: Improve page experience for product landing pages, blogs, and dashboards by stabilizing layout and speeding interactions.

Quick Start

Analyze a page and apply LCP, INP, and CLS optimizations to improve page experience.

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 Core Web Vitals metrics like LCP, INP, and CLS for my website?▼

To improve Core Web Vitals, you optimize LCP, INP, and CLS by applying techniques like inlining critical CSS, preloading key resources, optimizing hero images, and deferring non-critical JS to stabilize layout and speed interactions.

What's the best way to reduce layout shift on pages with dynamic content?▼

To reduce layout shift on dynamic content, you implement progressive rendering with proper fallbacks and stabilize element dimensions. This prevents unexpected visual movement and directly improves your CLS score.

Does this Core Web Vitals optimization approach work for both SSR and static sites?▼

Yes, these optimization strategies apply across SSR, CSR, and static sites. They address slow load times and unresponsive interactions by implementing safe, measurable changes tailored to each rendering architecture.

How do I speed up Largest Contentful Paint when loading hero images and fonts?▼

To speed up Largest Contentful Paint, you optimize hero images, use proper font loading techniques, and apply resource hints. Reducing TTFB and preloading key resources also significantly improves LCP.

Why does my page experience slow interactions and how can I fix Interaction to Next Paint?▼

Slow interactions occur when main thread tasks block user input. To fix INP, you defer non-critical JavaScript and optimize rendering paths, ensuring the page responds quickly to user input.

What techniques help reduce Time to First Byte and defer non-critical CSS?▼

To reduce TTFB and manage non-critical CSS, you preload key resources, inline critical CSS, and defer non-critical stylesheets. This prioritizes rendering essential content for a faster initial page load.