How to Minify Website’s CSS / JavaScript in WordPress?

The real reason you want to minify your WordPress files is to improve the performance of your website. Minification is the process of minimizing code and mark-up in your web pages and script files. The term ‘Minify’ is used to describe a method that makes your website file size smaller.

It includes whitespaces, line breaks, comments, and block delimiters which are useful for us humans but unnecessary for machines.

We minify the files of a website containing CSS, HTML, and JavaScript code so your web browser can read them faster.

When the minification process is done, it removes the following things from the code:

  1. Newline characters
  2. Whitespace characters
  3. Block delimiters
  4. Comments

The minification only decreases a few kilobytes of data on most WordPress sites. You can reduce more page load time by simply optimizing images for the web.

Here is an example of normal CSS code:

After minifying the code it will look like this:

Minify CSS/JavaScript in WordPress

Better WordPress Minify Plugin (BWP)

It allows you to combine and minify your CSS and JS files to improve page load time. This plugin uses the PHP library Minify and relies on WordPress’s enqueueing system rather than the output buffer, which respects the order of CSS and JS files as well as their dependencies. BWP Minify is very customizable and easy to use.

The first thing you need to do is install and activate the Better WordPress Minify plugin. Upon activation, the plugin will add a new menu item labeled ‘BWP Minify’ to your WordPress admin bar. Clicking on it will take you to the plugin’s Settings page.

On the settings page, you need to check the first two options to automatically minify JavaScript and CSS files on your WordPress site.

You can now click on the Save Changes button to store your settings.

There are many other advanced options on this page. The default settings will work for most websites, but you can review and change these options on a case by case basis.

Features:

  • Uses an enqueueing system of WordPress which improves compatibility with other plugins and themes
  • Supports inline styles
  • Supports RTL stylesheets
  • Supports media-specific stylesheets (e.g. ‘screen’, ‘print’, etc.)
  • Supports conditional stylesheets (e.g. <!–[if lt IE 7]>)
  • Provides hooks for further customization
  • WordPress Multi-site compatible
  • Allows you to move enqueued files to desired locations (header, footer, oblivion, etc.) via a dedicated management page
  • Allows you to change various Minify settings (cache directory, cache age, debug mode, etc.) directly in admin

Leave a comment