core-web-vitals

Optimize LCP, INP, and CLS metrics through code and configuration adjustments.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/adrigonz-sfts/softour-fe-components__module --skill core-web-vitals-adrigonz-sfts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/adrigonz-sfts/softour-fe-components__module/tree/main/.cursor/skills/core-web-vitals
Command: npx skills add https://github.com/adrigonz-sfts/softour-fe-components__module --skill core-web-vitals-adrigonz-sfts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses slow loading times, poor interactivity, and visual instability on web pages, directly impacting user satisfaction and search engine rankings.

Core Features & Use Cases

  • LCP Optimization: Identifies and resolves issues causing slow loading of the largest content element.
  • INP Optimization: Improves page responsiveness by reducing interaction delays.
  • CLS Optimization: Minimizes unexpected layout shifts for a smoother visual experience.
  • Use Case: A user reports their e-commerce product page is slow to load and users are experiencing janky scrolling. This Skill can be used to diagnose and fix the underlying Core Web Vitals issues.

Quick Start

Use the core-web-vitals skill to analyze and improve the Largest Contentful Paint for the provided URL.

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 slow loading e-commerce page?

To optimize Core Web Vitals for slow loading pages, you must diagnose and resolve server response delays, render-blocking resources, and long tasks. This process improves the Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift metrics.

What causes poor Largest Contentful Paint and how can I fix it?

Poor Largest Contentful Paint is caused by slow server response times and render-blocking resources. Fixing LCP involves identifying the largest content element and applying code and configuration adjustments to prioritize its loading speed.

Why does my web page have unexpected layout shifts during scrolling?

Unexpected layout shifts occur when page elements move after rendering, causing visual instability. You must analyze frontend rendering behavior and apply configuration adjustments to minimize these shifts and improve the Cumulative Layout Shift score.

How do I fix long tasks causing janky scrolling and poor page responsiveness?

Long tasks blocking the main thread cause janky scrolling and poor page responsiveness. You must analyze frontend performance to identify these interaction delays and apply code adjustments to break up long tasks and improve responsiveness.

Can I improve search engine rankings by optimizing frontend loading speed?

Yes, optimizing frontend loading speed directly improves search engine rankings. By resolving slow server response times, render-blocking resources, and visual instability, you enhance user experience metrics that search engines use for ranking.

What is the best way to reduce interaction delays on a web page?

The best way to reduce interaction delays is to optimize the Interaction to Next Paint metric by analyzing frontend performance. This involves breaking up long tasks and adjusting code to ensure the main thread responds quickly to user input.