skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-performance-optimization

Diagnose and optimize website performance including Core Web Vitals, bundle size, and caching.

Updated Jul 7, 2026
Search Tags:#caching#lighthouse#web performance#code splitting#core web vitals#image optimization#bundle optimization
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill web-performance-optimization-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/web-performance-optimization
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill web-performance-optimization-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow websites hurt user experience, SEO rankings, and conversion rates. This Skill provides a systematic workflow to measure, diagnose, and fix performance issues such as slow loading, large JavaScript bundles, unoptimized images, and poor Core Web Vitals scores. ## Core Features & Use Cases - Core Web Vitals Optimization: Diagnose and fix LCP, FID, and CLS issues with concrete code patterns for images, scripts, and layout stability. - Bundle Size Reduction: Analyze bundles with webpack-bundle-analyzer, replace heavy dependencies, implement code splitting, and remove dead code. - Image & Caching Strategy: Convert images to WebP/AVIF, implement responsive and lazy-loaded images, and configure caching headers and CDN delivery. - Use Case: Your Next.js app scores 62 on Lighthouse with a 4.2s LCP. Use this Skill to identify the oversized hero image and 850KB bundle, apply the provided optimization patterns, and verify improvement to a 94 score. ## Quick Start Ask the assistant to audit your website's performance and create an optimization plan for improving Core Web Vitals and reducing bundle size.

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 scores on my website?▼

Improve Core Web Vitals by targeting each metric: optimize hero images and preload critical resources for LCP, reduce JavaScript bundle size and defer scripts for FID, and set explicit image dimensions to prevent CLS. Measure with Lighthouse before and after each change.

How to reduce JavaScript bundle size in Next.js?▼

Reduce bundle size by analyzing composition with webpack-bundle-analyzer, replacing heavy libraries like moment with date-fns, importing lodash functions individually, and using next/dynamic for code splitting. Enabling tree shaking removes unused exports.

What image formats should I use for web performance?▼

Use AVIF for the best compression, WebP as a widely supported fallback, and optimized JPEG as a final fallback via the picture element. Combine with responsive srcset sizes, explicit width and height attributes, and lazy loading for below-the-fold images.

Why is my Lighthouse score good on desktop but poor on mobile?▼

Mobile scores suffer because of slower CPUs and network throttling that desktop audits do not simulate. Test with Chrome DevTools throttling or Lighthouse CPU slowdown multipliers, reduce main-thread JavaScript execution, and optimize for 3G/4G conditions.

What causes high Cumulative Layout Shift and how do I fix it?▼

High CLS is caused by images without dimensions, dynamically injected content, and late-loading fonts. Fix it by setting width and height attributes on images, using the CSS aspect-ratio property, and reserving space with skeleton loaders.

Related Skills

Explore More Software Engineering Skills→
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
dallaydallay

performance

Guide Lighthouse audits and Core Web Vitals optimizations for web performance.

Official
Advanced
sakamoto-family-smilesakamoto-family-smile

frontend-patterns

Provide standardized React and Next.js frontend design patterns for maintainability.

Community
Intermediate
HollowvynHollowvyn

static-rendering

Pre-generate HTML at build time for non-personalized pages and dynamic routes.

Official
Intermediate