# CSS and JavaScript Optimization Guide

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

## Quick Start

1. Install dependencies:
   ```bash
   npm install --legacy-peer-deps
   ```

2. Build the production version with optimizations:
   ```bash
   ./build-production.sh
   ```

## What This Does

### CSS Optimization

The build script optimizes CSS in two ways:

1. **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

2. **File Path Updates**: Automatically updates all HTML files to reference the optimized CSS versions.

### JavaScript Optimization

JavaScript optimization happens through:

1. **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

2. **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

3. **Minification**: All JavaScript is minified to reduce file size.

## Optimization Results

In our tests, the optimization achieves:

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

## How to Keep It Optimized

1. **Maintain Source Files**: Keep original JavaScript source files in `src/js/`
   
2. **Run Build Before Deployment**: Always run `./build-production.sh` before deploying to production

3. **Add New Components Wisely**: When adding new CSS/JS, consider if it's truly needed or if existing code can be reused

## Troubleshooting

- **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.