Let’s talk ↗
How to

How to Minify CSS and JavaScript in WordPress (Without Breaking Layout)

When web developers write stylesheets and JavaScript, they include spacing, indentation, and comments to keep the code organized and easy for humans to read.

However, web browsers do not need white spaces or comments. Every extra space, line break, and comment bloats your file size, forcing visitors to download unnecessary data and slowing down your page load speed.

Minification is the process of removing whitespace, line breaks, and unnecessary code characters from CSS and JS files without changing how the code actually behaves. Doing this can shrink your asset sizes by 20% to 40%.

In this guide, we will show you how to minify CSS and JavaScript in WordPress safely without breaking your site design or navigation menus.

Method 1: Minify Using LiteSpeed Cache (Best for LiteSpeed Servers)

If your website is hosted on a LiteSpeed web server, you have access to the most powerful native minification engine available.

Related Articles
  1. In your WordPress dashboard, navigate to LiteSpeed Cache > Page Optimization.
  2. Click on the CSS Settings tab:
    • Toggle CSS Minify to ON.
    • Leave CSS Combine OFF initially (combining CSS frequently breaks third-party plugin stylesheets).
  3. Click on the JS Settings tab:
    • Toggle JS Minify to ON.
  4. Click Save Changes and click Purge All from the LiteSpeed top bar.

Method 2: Minify Using Autoptimize (Best for Standard Hosting)

If your host runs Apache or Nginx, the free Autoptimize plugin by Frank Goossens is the gold standard for asset optimization.

  1. Install and activate Autoptimize from Plugins > Add New.
  2. Go to Settings > Autoptimize.
  3. Under JavaScript Options: check Optimize JavaScript Code?
  4. Under CSS Options: check Optimize CSS Code?
  5. Scroll to the bottom and click Save Changes and Empty Cache.

How to Prevent Minification from Breaking Your Website Layout

Occasionally, minifying a complex script (such as jQuery sliders or mobile navigation menus) can trigger JavaScript errors that break your header or layout.

The 3 Golden Rules of Safe Minification:

  1. Never combine files aggressively: Modern HTTP/2 and HTTP/3 protocols can download multiple small files simultaneously faster than one gigantic merged file. Always use Minify Only rather than Combine.
  2. Exclude jQuery: In your minification plugin’s exclusion box, make sure jquery.js and jquery.min.js are listed in the exclude list.
  3. Test in Incognito Mode: Always log out or open an incognito window after enabling minification to verify that your mobile hamburger menu, search bar, and image galleries open properly.

For more site optimization guides, check our tutorials on resolving failed to write file to disk errors and adjusting settings for 413 request entity too large issues.

Wrapping Up

Minifying CSS and JavaScript is a fundamental step toward achieving green 90+ Core Web Vitals scores. Enabling clean minification while excluding core jQuery delivers immediate speed gains without risking visual glitches.

Did minification speed up your PageSpeed score? Let us know in the comments below!

Leave a Reply