core-web-vitals

Optimize Core Web Vitals (LCP, INP, CLS) with checklists and framework-specific fixes.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Portmeo/rag-chat-project --skill core-web-vitals-portmeo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/Portmeo/rag-chat-project/tree/main/.claude/skills/core-web-vitals
Command: npx skills add https://github.com/Portmeo/rag-chat-project --skill core-web-vitals-portmeo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps optimize your website's performance by addressing the Core Web Vitals (LCP, INP, CLS), which directly impact user experience and search engine rankings.

Core Features & Use Cases

  • LCP Optimization: Identifies and fixes issues slowing down the Largest Contentful Paint.
  • INP Optimization: Improves interactivity by reducing input delay and processing time.
  • CLS Optimization: Minimizes unexpected layout shifts for a stable visual experience.
  • Use Case: When a user asks "How can I improve my website's loading speed and user experience?", this skill provides actionable steps to diagnose and fix LCP, INP, and CLS issues.

Quick Start

Use the core-web-vitals skill to optimize the Largest Contentful Paint for my website.

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 for better search ranking?

Improve Core Web Vitals by diagnosing and fixing LCP, INP, and CLS issues. This skill provides actionable checklists to address slow server response times, render-blocking resources, and layout shifts to boost page speed and search ranking.

What is the best way to optimize Largest Contentful Paint (LCP) on my website?

Optimize Largest Contentful Paint (LCP) by identifying and resolving slow server response times and render-blocking resources. This skill targets these specific bottlenecks to ensure your main page content loads faster.

How can I reduce layout shifts and stabilize visual experience?

Reduce layout shifts and stabilize visual experience by minimizing unexpected CLS (Cumulative Layout Shift). This skill provides specific steps to fix unstable elements, ensuring a smooth user experience.

Does this Core Web Vitals optimization skill work with Next.js and Vue?

Yes, this Core Web Vitals optimization skill works with Next.js and Vue. It provides framework-specific quick fixes for Next.js, React, and Vue to efficiently resolve performance bottlenecks.

Why does my website have high input delay and how do I fix it?

High input delay occurs when long tasks block interactivity, affecting your INP score. Fix it by reducing input delay and processing time using the targeted optimization steps provided by this skill.