performance-optimization

•

6155 months ago

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

Quick Install

npxskills add mindrally/skills--skill performance-optimization

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360