Minifying CSS and JavaScript without breaking the site

Minifying means taking the spaces, line breaks and comments out of a CSS or JavaScript file so it weighs less. A plugin such as LiteSpeed Cache does it with one click, and it is also one of the options that breaks most sites. The gain is usually small (the server already compresses text files) and the risk is a menu that will not open or a form that will not send. So: one option at a time, with a test and with an escape route.

What each option does, and the risk

Option What it does Risk
Minify CSS or JS Strips spaces and comments. Low. It rarely breaks anything; when it does, it is a badly written file.
Combine CSS or JS Joins several files into one. Medium. With HTTP/2 it gains almost nothing. See HTTP/2 and HTTP/3. It can change the load order and break themes.
Defer JS The script only runs after the page has been drawn. High. Menus, carousels and forms that depend on the script can fail at start-up.
Critical CSS / unused CSS Generates the CSS for what shows first separately, and loads the rest later. High. The page can show unstyled for a moment, or with blocks missing.

The safe order, step by step

1 Take a copy of files and database first (see making and keeping your own backup). If the site matters, rehearse on a test site first.
2 Measure and write down the starting point on two pages: a simple one and one with a form or a cart. See measuring your site speed.
3 Switch on one option only, for example “Minify CSS”, save, and use the plugin’s “Purge All”.
4 Open the site in a private window and walk through it as a visitor: the phone menu, the contact form, search, cart and checkout if there is a shop, and login. Test at two screen widths.
5 If something failed, switch that option off, “Purge All” and confirm it is back to normal. Only then decide whether to exclude it for that one file (the options have fields to name files to leave out) or give it up.
6 Only then go to the next one. Every gain, however small, should come with its “before and after”.
Cannot get into the WordPress dashboard after switching an option on? Deactivate the plugin by renaming its folder in wp-content/plugins, as explained in disabling plugins, including when you cannot get in. The site opens again without the optimisations, and then you can reactivate the plugin and switch off the guilty option.
Do not minify twice. Files whose name already ends in .min.css or .min.js arrive minified. If two plugins both minify, switch one off.
The gain is elsewhere. On many pages the images and third-party scripts weigh more than the CSS and JS themselves. Check what the Network tab’s file list shows as heaviest before spending an afternoon on this. Reading the warnings is covered in PageSpeed Insights warnings explained.

An optimisation option broke the look of the site and you do not know which? Tell us the address and what you changed.

Open a support ticket

SEE ALSO

LiteSpeed Cache: the first settings

PageSpeed Insights warnings explained

Disabling plugins, including when you cannot get in

Common WordPress errors: white screen, critical error and how to find the cause

RECOMMENDED PRODUCT

Web hosting with cPanel

Domain and SSL included, daily backups and the panel you already know. from $10.00/mo

See plans
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to monitor your site performance in cPanel cPanel keeps a record of everything that happens on your hosting - who visited, how much traffic you used, which errors...
The site is slow: what actually makes a difference «The site is slow» means different things depending on who says it: the first page takes ages to appear, the admin panel...
Cloudflare: when it helps, how to switch it on, and the cache that fools you Cloudflare sits in front of your site: visitors reach it first, and it comes to us for what it needs. That brings three...
The site is slow: what to measure before you change plan «The site is slow, I think I need a bigger plan.» It is one of the messages we get most, and most of the time the bigger...
What a CDN is, and when it makes a difference (and when it does not) A CDN (content delivery network) is a set of machines spread around the world that keep copies of your site and hand the...
HTTP/2 and HTTP/3: how to see which one your site uses, and whether it matters HTTP/2 and HTTP/3 are two newer versions of the “conversation” between the browser and the server. Our web server (LiteS...