web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

1|Updated Jun 30, 2026
One-click install
npx skills add https://github.com/Itinerant18/Urban-assist --skill web-performance-optimization-itinerant18
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/Itinerant18/Urban-assist/tree/main/.cursor/skills/web-performance-optimization
Command: npx skills add https://github.com/Itinerant18/Urban-assist --skill web-performance-optimization-itinerant18

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses slow loading times, poor SEO rankings, and suboptimal user experiences caused by inefficient resource loading, heavy JavaScript bundles, and layout shifts.

Core Features & Use Cases

  • Performance Auditing: Systematic measurement of Core Web Vitals (LCP, FID, CLS) and Lighthouse scores.
  • Asset Optimization: Automated strategies for image compression, modern format conversion (WebP/AVIF), and lazy loading.
  • Bundle Management: Techniques for code splitting, tree shaking, and replacing heavy dependencies to reduce main thread blocking.
  • Use Case: Optimize a high-traffic landing page by identifying render-blocking resources and implementing code splitting to improve the Largest Contentful Paint (LCP) score.

Quick Start

Use the web-performance-optimization skill to audit the current page and provide a prioritized list of improvements for Core Web Vitals.

Frequently Asked Questions about web-performance-optimization

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

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

You can improve Core Web Vitals by auditing LCP, FID, and CLS metrics, then implementing asset optimization and critical rendering path improvements. This skill systematically measures Lighthouse scores to identify render-blocking resources and layout shifts.

What is the best way to reduce JavaScript bundle size and prevent main thread blocking?

The best way to reduce JavaScript bundle size is applying code splitting, tree shaking, and replacing heavy dependencies. This skill provides bundle management techniques to minimize main thread blocking and optimize runtime execution.

How do I optimize images and assets to speed up frontend loading speed?

To optimize images and assets for faster frontend loading speed, apply automated strategies for image compression, modern format conversion like WebP or AVIF, and lazy loading. This reduces inefficient resource loading on high-traffic pages.

Can I use this approach to fix poor SEO rankings caused by slow loading times?

Yes, you can fix poor SEO rankings caused by slow loading times by profiling web performance and optimizing resource delivery. This skill targets suboptimal user experiences caused by heavy JavaScript bundles and inefficient loading.

When do I need to analyze the critical rendering path for frontend optimization?

You need to analyze the critical rendering path when a high-traffic landing page suffers from suboptimal user experiences or poor Largest Contentful Paint scores. This skill identifies render-blocking resources and prioritizes improvements.

Does optimizing web vitals require standard performance profiling tools?

Yes, optimizing web vitals requires standard web performance profiling tools and modern JavaScript optimization techniques. This skill uses these tools to measure Lighthouse scores and ensure high-performance user experiences.