Web Performance Optimization
A solid reference for the full performance optimization stack, from the basics (lazy loading, compression) to 2025 patterns like View Transitions and Speculation Rules. It's organized by time investment with ROI ratings, so you can grab quick wins in an hour or go deep on Core Web Vitals when Lighthouse scores matter for SEO. The framework-specific section covers Next.js, React, Vue, and others. What's useful here is the pragmatism: it leads with measurement first, includes real conversion data (Pinterest's 40% speed improvement drove 15% more signups), and calls out red flags like optimizing without baselines. Good for both emergency fixes and systematic performance work.
- skills.sh installs
- 469
- GitHub stars
- 79
- last updated
- Aug 21, 2026
Install
$ npx -y skills add bobmatnyc/claude-mpm-skills --skill web-performance-optimization --agent claude-codeInstalls into .claude/skills of the current project.
Files
Web Performance Optimization
Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.
When to Use This Skill
- Improving Lighthouse scores (target: 90+)
- Reducing page load times (target: <2.5s LCP)
- Optimizing Core Web Vitals for SEO rankings
- Implementing modern performance patterns (2025)
- Debugging performance bottlenecks
- Setting up continuous performance monitoring
Business Impact: 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.
Start Here: Quick Wins
High-ROI optimizations by time investment:
1 Hour Quick Wins (⭐⭐⭐⭐⭐ ROI):
- Add
loading="lazy"to below-fold images (40-60% weight reduction) - Enable compression (gzip/brotli) (70-80% transfer size reduction)
- Add
rel="preconnect"for critical origins (100-500ms savings)
1 Day Investments (⭐⭐⭐⭐ ROI):
- Implement code splitting (30-50% bundle reduction)
- Optimize LCP image with
fetchpriority="high"(200-400ms improvement) - Add basic service worker (instant repeat visits)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/bobmatnyc/claude-mpm-skills
- Category
- Debugging
- First seen
- Jun 3, 2026
More from bobmatnyc/claude-mpm-skills
All 158- Local Llm Ops464
- Golang Testing Strategies458
- Wordpress Advanced Architecture455
- Golang Http Frameworks453
- Sveltekit452
- Digitalocean Management451
- Hono Rpc450
- Flask449
- Hono Middleware444
- Golang Cli Cobra Viper438
- Dependency Audit434
- Wordpress Plugin Fundamentals434
- Phoenix Liveview432
- Wordpress Testing Qa430
- Digitalocean Compute429
- Database Migration427
- Hono Testing422
- Golang Observability Opentelemetry421
- Shadcn Ui421
- Golang Concurrency Patterns420
- Digitalocean Overview419
- Hono Validation419
- Digitalocean Networking415
- Digitalocean Storage414
Recommended
More Debugging
performance-benchmark-specialistmanutej/luxor-claude-marketplacePerformance benchmarking expertise for shell tools, covering benchmark design, statistical analysis (min/max/mean/median/stddev), performance targets (<100ms, >457skills.sh installs
nansen-wallet-profilernansen-ai/nansen-cliWallet profiler — balance, PnL, labels, transactions, counterparties, related wallets, batch, trace, compare. Use when analysing a specific wallet address or co413skills.sh installs
snyk-fixsnyk/studio-recipesComplete security remediation workflow. Scans code for vulnerabilities using Snyk, fixes them, validates the fix, and optionally creates a PR. Supports both sin408skills.sh installs
ln-653-runtime-performance-auditorlevnikolaevich/claude-code-skillsChecks blocking IO in async, unnecessary allocations, sync sleep, string concat in loops, redundant copies. Use when auditing runtime performance.371skills.sh installs