Claude MarketplacesSubmit
davila7 avatar

Web Performance Optimization

davila7/claude-code-templates

If your Lighthouse scores are in the red or users are bouncing because pages feel sluggish, this walks you through the full optimization cycle. It covers the usual suspects: bloated JavaScript bundles, unoptimized images, missing cache headers, and Core Web Vitals issues like layout shift and slow LCP. The examples are thorough, showing before and after code for things like replacing Moment.js with date-fns, implementing lazy loading, and adding proper image dimensions to prevent CLS. What's helpful is the structured approach: measure with Lighthouse, identify bottlenecks, prioritize fixes, then verify improvements. It's practical stuff for when you need to get a site from a 62 performance score to something you won't be embarrassed to ship.

skills.sh installs
518
GitHub stars
33.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill web-performance-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Performance Optimization

Overview

Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.

When to Use This Skill

  • Use when website or app is loading slowly
  • Use when optimizing for Core Web Vitals (LCP, FID, CLS)
  • Use when reducing JavaScript bundle size
  • Use when improving Time to Interactive (TTI)
  • Use when optimizing images and assets
  • Use when implementing caching strategies
  • Use when debugging performance bottlenecks
  • Use when preparing for performance audits

How It Works

Step 1: Measure Current Performance

I'll help you establish baseline metrics:

  • Run Lighthouse audits
  • Measure Core Web Vitals (LCP, FID, CLS)
  • Check bundle sizes
  • Analyze network waterfall
  • Identify performance bottlenecks

Step 2: Identify Issues

Analyze performance problems:

  • Large JavaScript bundles
  • Unoptimized images
  • Render-blocking resources
  • Slow server response times
  • Missing caching headers
  • Layout shifts
  • Long tasks blocking main thread
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/davila7/claude-code-templates
Category
Debugging
First seen
Jun 3, 2026

More from davila7/claude-code-templates

All 618

Recommended

More Debugging
1longbridge avatarlongbridge-performance-attributionlongbridge/skillsPortfolio performance attribution via Longbridge Securities — Brinson industry attribution (allocation / selection / interaction effects), factor alpha/beta dec497skills.sh installs
2aj-geddes avatarweb-performance-optimizationaj-geddes/useful-ai-promptsOptimize web application performance using code splitting, lazy loading, caching, compression, and monitoring. Use when improving Core Web Vitals and user exper487skills.sh installs
3bobmatnyc avatarweb-performance-optimizationbobmatnyc/claude-mpm-skillsOptimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques469skills.sh installs
4manutej avatarperformance-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
5nansen-ai avatarnansen-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
6snyk avatarsnyk-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