Non-minified CSS and JS
Problem Summary
Non-minified CSS and JS contain extra whitespace, comments, and sometimes development-oriented code that browsers do not need in production.
Performance Impact
- Larger transfers: More bytes must be downloaded
- Slower parsing: Browsers process bigger CSS and JavaScript files
- Cache inefficiency: Development files can change more often than optimized builds
How to Detect
- Network tab: Inspect CSS and JS file sizes
- PageSpeed Insights: Review minification opportunities
- Build output: Confirm production mode is enabled
Solutions
1. Use a Production Build
Theme and app assets should be compiled for production before deployment.
2. Enable Minification Carefully
Optimization plugins can minify assets, but test forms, menus, checkout, and interactive components.
3. Keep Source Maps Out of Critical Paths
Source maps are useful for debugging but should not be required for page rendering.
4. Combine With Better Loading
Minification helps, but unused or render-blocking assets still need to be addressed.