performance

kprsnt2's avatarfrom kprsnt2

Web performance optimization best practices including Core Web Vitals, loading, and caching.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 26, 2025
[Code Review]

When & Why to Use This Skill

This Claude skill serves as a comprehensive guide for Web Performance Optimization, focusing on Core Web Vitals, efficient resource loading, and advanced caching strategies. It provides actionable best practices to help developers identify and resolve performance bottlenecks in JavaScript, CSS, and asset delivery, ensuring lightning-fast user experiences and improved SEO rankings.

Use Cases

  • Core Web Vitals Optimization: Analyze and improve LCP, FID, and CLS metrics to meet Google's search ranking benchmarks and enhance user retention.
  • Resource Loading & Bundle Management: Implement code-splitting, tree-shaking, and lazy loading for images and components to minimize initial load times and bundle sizes.
  • Advanced Caching & Network Efficiency: Configure robust caching headers, Service Workers, and HTTP/3 protocols to ensure rapid repeat visits and reliable performance under varying network conditions.
  • Frontend Rendering Performance: Identify and eliminate layout thrashing, optimize CSS containment, and utilize modern image formats (WebP/AVIF) to streamline browser rendering paths.
nameperformance
descriptionWeb performance optimization best practices including Core Web Vitals, loading, and caching.
globs["**/*.html", "**/*.css", "**/*.js", "**/webpack.config.*", "**/vite.config.*"]
priority75
tags["performance"]

Web Performance Best Practices

Core Web Vitals

  • LCP (Largest Contentful Paint) < 2.5s
  • FID (First Input Delay) < 100ms
  • CLS (Cumulative Layout Shift) < 0.1
  • Measure with Lighthouse/WebPageTest

Loading Performance

  • Minimize bundle size
  • Code split by route
  • Lazy load images/components
  • Use preload for critical resources
  • Enable compression (gzip/brotli)

JavaScript

  • Tree shake unused code
  • Defer non-critical scripts
  • Use Web Workers for heavy computation
  • Debounce/throttle event handlers
  • Avoid memory leaks

CSS

  • Minimize CSS
  • Use critical CSS inline
  • Avoid layout thrashing
  • Use CSS containment
  • Prefer transform over position

Images

  • Use modern formats (WebP, AVIF)
  • Implement responsive images
  • Lazy load below-fold images
  • Use image CDN
  • Compress appropriately

Caching

  • Set proper cache headers
  • Use service workers
  • Cache API responses
  • Use edge caching (CDN)
  • Implement stale-while-revalidate

Network

  • Use HTTP/2 or HTTP/3
  • Reduce DNS lookups
  • Use connection preload/preconnect
  • Minimize redirects
  • Enable HTTPS