How to Minify CSS and JavaScript in WordPress

Minification removes unnecessary whitespace, comments, and formatting from CSS and JavaScript files, reducing their file size and speeding up how quickly your pages load. It's a straightforward optimization step that most WordPress caching plugins handle automatically.

What Minification Does

A developer-friendly CSS file might be 50KB with comments and indentation. The minified version of the same file could be 30KB - the same functionality, just compressed. Multiply that across several stylesheets and scripts, and the savings add up quickly.

Option 1: LiteSpeed Cache (Recommended for dotCanada)

Since dotCanada runs LiteSpeed Web Server, the LiteSpeed Cache plugin is your best option:

1. Install and activate LiteSpeed Cache from Plugins > Add New.
2. Go to LiteSpeed Cache > Page Optimization.
3. Under the CSS tab, enable CSS Minify and optionally CSS Combine.
4. Under the JS tab, enable JS Minify and optionally JS Combine and JS Defer.
5. Save your changes and clear your cache.

Option 2: W3 Total Cache

In W3 Total Cache, go to Performance > Minify and enable minification for CSS and JavaScript. You can configure each file type separately and choose between combining files or keeping them separate.

Option 3: WP Rocket

WP Rocket is a premium plugin with an easy-to-use interface for minification. Under File Optimization, toggle on minify options for CSS and JavaScript with a single click.

Testing After Minification

Always test your site thoroughly after enabling minification. Occasionally, JavaScript combining can break functionality - if something stops working, try disabling JS combine while keeping minify enabled.

If you run into issues with minification on your dotCanada site, contact our support team and we'll help you troubleshoot.