# Optimization & Cleanup Guide This document outlines the strategies and processes used to optimize the theme for production, addressing key performance requirements such as critical CSS, asset preloading, and render-blocking resources. ## 1. Production Build & Tailwind Optimization **Goal:** Optimize the loading of the Tailwind CSS file for production. We use `npm` scripts to handle the build pipeline, ensuring assets are minified and ready for deployment. ### Steps to Build 1. Open your terminal and navigate to the theme directory (`wp-content/themes/wp-scratch`). 2. Ensure dependencies are installed: `npm install`. 3. Run the build command: ```bash npm run build ``` ### What it does: 1. **Tailwind Compilation**: Compiles `src/input.css` to `style.css`. 2. **Minification**: Uses the `--minify` flag to compress the CSS, removing whitespace and comments. 3. **Purging**: Tailwind's JIT engine automatically removes unused utility classes based on the `content` configuration in `tailwind.config.js`. 4. **Critical CSS Generation**: Triggers the `scripts/generate-critical.mjs` script. ### Build Configuration Files There isn't a single "build config" file; rather, the process is controlled by a few key files: * package.json: Defines the build script command (tailwindcss ... && node ...). * tailwind.config.js: Configures the CSS compilation, including the content paths for purging unused styles. * scripts/generate-critical.mjs: Configures the Critical CSS generation (viewport size, source URL, etc.). --- ## 2. Critical CSS Strategy To improve "First Contentful Paint" (FCP) and Core Web Vitals, we generate and inline the CSS required for above-the-fold content. ### Generation **Installation:** ```bash npm install --save-dev critical ``` The script `scripts/generate-critical.mjs` uses the `critical` NPM package. - **Source**: Fetches the local homepage URL defined in the script. - **Output**: Writes to `critical.css` in the theme root. - **Dimensions**: Targets a standard desktop viewport (1300x900) to determine what is "critical". ### Implementation (`functions.php`) - **Inlining**: The `wp_scratch_inline_critical_css` function reads `critical.css` and prints it within `