storyden: Skill for Claude Code

Identify and fix performance issues to create faster, smoother user experiences.

Assess Performance Issues

Understand current performance and identify problems:

1. Measure current state:

   • Core Web Vitals: LCP, FID/INP, CLS scores
   • Load time: Time to interactive, first contentful paint
   • Bundle size: JavaScript, CSS, image sizes
   • Runtime performance: Frame rate, memory usage, CPU usage
   • Network: Request count, payload sizes, waterfall

2. Identify bottlenecks:

   • What's slow? (Initial load? Interactions? Animations?)
   • What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
   • How bad is it? (Perceivable? Annoying? Blocking?)
   • Who's affected? (All users? Mobile only? Slow connections?)

CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.

Optimization Strategy

Create systematic improvement plan:

Loading Performance

Optimize Images:

• Use modern formats (WebP, AVIF)
• Proper sizing (don't load 3000px image for 300px display)
• Lazy loading for below-fold images
• Responsive images (srcset, picture element)
• Compress images (80-85% quality is usually imperceptible)
• Use CDN for faster delivery

<img 
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  loading="lazy"
  alt="Hero image"
/>

Reduce JavaScript Bundle:

• Code splitting (route-based, component-based)
• Tree shaking (remove unused code)
• Remove unused dependencies
• Lazy load non-critical code
• Use dynamic imports for large components

// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));

Optimize CSS:

• Remove unused CSS
• Critical CSS inline, rest async
• Minimize CSS files
• Use CSS containment for independent regions

Optimize Fonts:

• Use font-display: swap or optional
• Subset fonts (only characters you need)
• Preload critical fonts
• Use system fonts when appropriate
• Limit font weights loaded