CSS and JavaScript Optimization Guide

This document explains how to eliminate unused CSS and JavaScript from the ShowerLoop website.

Quick Start

The build script optimizes CSS in two ways:

CSSO Optimization: Uses CSSO to remove unused selectors, merge similar rules, and minify the CSS.
- Typically reduces CSS by 5-30% depending on the file
- Maintains full functionality while eliminating bloat
- Works without requiring a running website
File Path Updates: Automatically updates all HTML files to reference the optimized CSS versions.

JavaScript optimization happens through:

Tree Shaking: Rollup analyzes your code to detect which parts are actually used and removes dead code.
- Eliminates unused imports and functions
- Reduces JavaScript file sizes significantly
Code Splitting: JavaScript is split into separate bundles:
- app.modern.min.js - Main application code
- video-init.modern.min.js - Video player initialization
- skip-to-content.modern.min.js - Accessibility features
Minification: All JavaScript is minified to reduce file size.

In our tests, the optimization achieves:

File Type	Size Reduction
CSS	5-30%
JavaScript	30-60%

Maintain Source Files: Keep original JavaScript source files in src/js/
Run Build Before Deployment: Always run ./build-production.sh before deploying to production
Add New Components Wisely: When adding new CSS/JS, consider if it's truly needed or if existing code can be reused

Missing Styles: If elements look unstyled after optimization, check the original CSS files and update your HTML accordingly.
JavaScript Errors: If functionality breaks, check the browser console for errors and ensure all required code is in your source files.
Build Errors: Make sure all dependencies are installed with npm install --legacy-peer-deps before running the build scripts.