skills.rest
nimadorostkar
nimadorostkarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-performance

Analyze Core Web Vitals and resource delivery to optimize page load performance.

25|3|Updated Jul 14, 2026
Search Tags:#performance#optimization#bundle#core-web-vitals#lcp#inp
One-click install
npx skills add https://github.com/nimadorostkar/Claude-Skills-collection --skill web-performance-nimadorostkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-performance
Source: https://github.com/nimadorostkar/Claude-Skills-collection/tree/main/skills/frontend/web-performance
Command: npx skills add https://github.com/nimadorostkar/Claude-Skills-collection --skill web-performance-nimadorostkar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses slow page load times and poor runtime performance by providing a structured, data-driven approach to diagnosing and fixing Core Web Vitals and resource bottlenecks.

Core Features & Use Cases

  • Core Web Vitals Remediation: Provides actionable strategies to improve LCP, INP, and CLS metrics based on real-world field data.
  • Resource Optimization: Offers guidance on bundle analysis, code splitting, and efficient asset delivery (images, fonts, scripts).
  • Runtime Profiling: Helps identify and resolve main-thread blocking tasks, layout thrashing, and memory growth issues.

Quick Start

Use the web-performance skill to analyze the current bundle and identify the primary causes of high interaction latency on the landing page.

Frequently Asked Questions about web-performance

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

FAQPage Schema
How do I improve Core Web Vitals like LCP and INP for my web application?▼

To improve Core Web Vitals, you must analyze real-user monitoring data to identify specific LCP and INP bottlenecks. Applying resource delivery strategies like bundle splitting and asset optimization directly remediates these interaction latency issues.

What is the best way to reduce JavaScript bundle size and optimize asset delivery?▼

The best way to reduce bundle size is performing bundle analysis to identify heavy scripts, followed by code splitting and efficient asset delivery. This optimizes resource loading and significantly improves overall page load speed.

How do I fix main-thread blocking tasks and layout thrashing affecting runtime performance?▼

To fix main-thread blocking and layout thrashing, use runtime profiling to identify long tasks blocking the main thread. Resolving these execution bottlenecks improves runtime responsiveness and stabilizes the user experience.

Can I use browser profiling tools to measure performance improvements on representative hardware?▼

Yes, you can and should use browser profiling tools to measure performance improvements. Validating Core Web Vitals remediation on representative hardware ensures that bundle optimization and latency fixes work under real-world conditions.

Why does my landing page have high interaction latency despite optimized images?▼

High interaction latency persists when main-thread blocking tasks or unoptimized script execution delay event handling. You must profile runtime responsiveness and apply bundle splitting to mitigate INP issues effectively.

Related Skills

Explore More Software Engineering Skills→
yocxy2yocxy2

benchmark

Measure page load times, Core Web Vitals, and resource sizes to detect performance regressions.

Community
Advanced
tankpkgtankpkg
1

@tank/web-performance

Diagnose slow web applications and identify performance bottlenecks across Core Web Vitals.

Official
Advanced
irizqiirizqi

react-vite-best-practices

Optimize React application builds with Vite configuration for bundle size reduction.

Community
Advanced
quanngynxquanngynx

js-performance-patterns

Apply JavaScript performance patterns to hot paths and DOM workflows.

Community
Intermediate