OpenSkillIndex← back to search
claude-code

Learn-skills.dev web-performance

Web and frontend performance optimization. Use when user asks to "optimize performance", "improve loading time", "lazy loading", "code splitting", "bundle size", "Core Web Vitals", "image optimization", "CSS/JS minification", "caching strategies", "performance profiling", or mentions web performance and user experience metrics.

install
source · Clone the upstream repo
git clone https://github.com/NeverSight/learn-skills.dev
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/1mangesh1/dev-skills-collection/web-performance" ~/.claude/skills/neversight-learn-skills-dev-web-performance && rm -rf "$T"
manifest: data/skills-md/1mangesh1/dev-skills-collection/web-performance/SKILL.md
source content

Web Performance Optimization

Strategies and techniques for optimizing web application performance and user experience.

Core Web Vitals

Largest Contentful Paint (LCP)

  • Time to largest content element visible
  • Target: < 2.5 seconds
  • Optimize: image size, server response, render-blocking resources

First Input Delay (FID)

  • Time for page to respond to user input
  • Target: < 100 milliseconds
  • Optimize: reduce JavaScript, break up tasks

Cumulative Layout Shift (CLS)

  • Visual stability of page
  • Target: < 0.1
  • Optimize: reserve space for images/ads, avoid layout disruptions

Performance Metrics

MetricTargetTool
First Contentful Paint (FCP)< 1.8sChrome DevTools
Largest Contentful Paint (LCP)< 2.5sLighthouse
Time to Interactive (TTI)< 3.8sWebPageTest
Total Blocking Time (TBT)< 150msLighthouse

Optimization Techniques

Image Optimization

<!-- Lazy loading -->
<img src="image.jpg" loading="lazy">

<!-- Responsive images -->
<picture>
  <source media="(max-width: 500px)" srcset="small.jpg">
  <img src="large.jpg" alt="Description">
</picture>

<!-- Modern formats -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description">
</picture>

Code Splitting

// Dynamic import
const module = await import('./heavy-module');

// React lazy loading
const Component = React.lazy(() => import('./Component'));

Caching Strategies

  • Browser cache: Set Cache-Control headers
  • Service workers: Offline support and cache control
  • CDN: Distribute content geographically
  • Redis: Server-side caching

Minification & Compression

  • Minify CSS, JavaScript, HTML
  • Gzip compression
  • Brotli for better compression
  • Remove unused code (tree shaking)

Performance Audit Checklist

  • Optimize images (format, size, lazy load)
  • Minify CSS, JS, HTML
  • Enable gzip/brotli compression
  • Implement code splitting
  • Cache static assets
  • Use CDN for assets
  • Optimize critical rendering path
  • Remove unused dependencies
  • Lazy load non-critical routes
  • Optimize fonts (subset, preload)
  • Implement service workers
  • Monitor Core Web Vitals

Tools for Analysis

  • Chrome Lighthouse - Audit performance
  • WebPageTest - Detailed analysis
  • Speedcurve - Continuous monitoring
  • Bundle Analyzer - Webpack/Rollup bundle size
  • Sentry - Error and performance monitoring

Best Practices

  1. Measure First - Establish baseline metrics
  2. Prioritize - Fix biggest issues first
  3. Test Impact - Verify improvements
  4. Monitor Continuously - Track over time
  5. User-Centric - Focus on real user metrics

Example Performance Budget

JavaScript: < 200KB
CSS: < 50KB
Images: < 500KB total
Fonts: < 100KB
Total: < 850KB

References

  • Web Vitals by Google
  • Chrome Developers Performance
  • MDN Web Performance
  • Lighthouse Documentation
  • WebPageTest Blog