Performance Optimization

---
name: performance-optimization
description: Performance optimization guidelines for web development including server-side rendering, CSS best practices, and JavaScript optimization
---

# Performance Optimization

Apply these performance optimization principles when developing web applications, themes, and frontend interfaces.

## Core Performance Principles

- Prioritize server-side rendering as a first principle, as opposed to client-side JavaScript
- Minimize client-side JavaScript to reduce bundle size and improve Time to Interactive
- Optimize for Core Web Vitals: LCP, FID, and CLS
- Measure performance continuously and establish baselines
- Consider performance impact of every architectural decision

## Server-Side Rendering

- Render content server-side whenever possible
- Use streaming rendering for faster Time to First Byte
- Implement proper caching strategies for rendered content
- Avoid blocking resources that delay rendering
- Pre-render static content where applicable

## CSS Best Practices

### Selector Efficiency
- Avoid ID selectors for styling; use classes instead
- Maintain specificity at 0 1 0 where possible
- Avoid deep nesting of selectors (max 3 levels)
- Use BEM or similar naming conventions for clarity
- Prefer class selectors over element selectors

### CSS Organization
- Use CSS variables for colors, spacing, and repeated values
- Group related styles logically
- Remove unused CSS to reduce payload
- Consider critical CSS inlining for above-the-fold content
- Use CSS containment for complex layouts

### Layout Performance
- Avoid layout thrashing (forced synchronous layouts)
- Use transform and opacity for animations (GPU accelerated)
- Minimize paint and composite operations
- Use will-change sparingly and intentionally
- Prefer flexbox and grid over floats and positioning

## JavaScript Optimization

### Code Organization
- Use the module pattern for code organization
- Prefix private methods with appropriate indicators
- Prefer const over let; avoid var
- Avoid external dependencies when native APIs suffice
- Split code into logical, loadable chunks

### Loading Strategies
- Defer non-critical JavaScript
- Use async loading for independent scripts
- Implement code splitting for large applications
- Lazy load components and routes
- Preload critical resources

### Runtime Performance
- Debounce and throttle event handlers appropriately
- Use requestAnimationFrame for visual updates
- Avoid long-running synchronous operations
- Implement efficient DOM manipulation patterns
- Use Web Workers for CPU-intensive tasks

## Asset Optimization

### Images
- Use modern formats (WebP, AVIF) with fallbacks
- Implement responsive images with srcset
- Lazy load below-the-fold images
- Optimize and compress all images
- Use appropriate image dimensions

### Fonts
- Subset fonts to include only needed characters
- Use font-display: swap for better perceived performance
- Preload critical fonts
- Limit the number of font variations
- Consider system fonts for non-branded text

## Caching Strategies

- Implement appropriate cache headers for static assets
- Use versioned filenames for cache busting
- Configure CDN caching effectively
- Implement service workers for offline support
- Cache API responses where appropriate

## Architecture Patterns

### Theme and Component Architecture
- Organize code into logical sections and blocks
- Use proper folder structure for maintainability
- Implement clear separation of concerns
- Create reusable, composable components
- Document component APIs and usage

### Configuration and Settings
- Organize settings logically with clear groupings
- Use clear, descriptive naming conventions
- Implement conditional logic to reduce complexity
- Provide sensible defaults
- Validate configuration at build time

## Internationalization Performance

- Ensure all text is translatable
- Load translations efficiently (split by locale)
- Use proper locale detection
- Cache translated content appropriately
- Consider right-to-left (RTL) layout implications

## Measurement and Monitoring

- Use Real User Monitoring (RUM) for production insights
- Set up synthetic monitoring for baseline tracking
- Monitor Core Web Vitals continuously
- Track performance budgets in CI/CD
- Analyze and act on performance regressions

## Database Performance

- Optimize queries and use proper indexing
- Implement connection pooling
- Use caching for frequently accessed data
- Paginate large result sets
- Monitor slow queries and optimize regularly