How To Minify Your WordPress Styles and Scripts

Minification is an important part of running a website. It ensures that visitors to your WordPress site always download the smallest possible files. Without any minification, you’re wasting precious bandwidth and sacrificing page load times.

• If you want to minify styles and scripts used by a WordPress plugin that you have written, see this section.
• If you want to minify styles and scripts using a WordPress plugin, see this section.

Minifying Your Own Custom Styles and Scripts

If you need to minify your own assets located within a custom theme or plugin, your best option is to minify your assets each time a change is made to the underlying code.

Minifying your code is especially simple if you’re using a build tool such as Grunt, Gulp, or Webpack. If not, don’t worry. You can still manually minify your files using a standard CLI tool like PostCSS.

Minifying Your CSS

There are a multitude of tools out there for minifying your CSS and many of them work quite well. One of the tools out there is cssnano, which runs as a PostCSS plugin.

Your individual setup requirements may vary depending on your development workflow, so we won’t go too deep into how to use it, but the cssnano getting started guide will get you moving in the right direction.

Minifying Your JavaScript

Minifying your JavaScript is largely the same process as minifying your CSS, but just with different tools. For JavaScript minification, the go-to solution the the majority of people out there is UglifyJS.

Due to the wide adoption of UglifyJS, integrating with most build tools is quite simple. Of course, if you’re not using a tool like Grunt, Gulp, or Webpack to build your assets, you can always use the CLI to run it manually.

For information on using UglifyJS to minify your JavaScript files, take a look at the following:

• UglifyJS Installation and Usage
• UglifyJS for Gulp
• UglifyJS for Grunt
• UglifyJS for Webpack

Minifying Styles and Scripts From 3rd-Party WordPress Plugins

If you’re using a WordPress plugin that’s not already using minified CSS and JavaScript, you may want to consider minifying those assets. Of course, directly modifying a 3rd-party plugin is usually a bad idea since updates would cause your changes to become overwritten, but there are still solutions out there for you.

Using a Minification Plugin

There are several WordPress plugins that can be used to automatically minify your styles and scripts.

While they often do a great job in optimizing content that needs to be minified, they can sometimes increase the amount of server resources being used, since minification is happening as a PHP process.

Note: If you’re on one of Pagely’s high-availability plans, please be sure to contact support when considering a minification plugin. Due to how data is stored and served from multiple locations, additional modifications may be required.

If you want to use a plugin to minify your content, here are a few well-known plugins to get the job done:

• Autoptimize
• Fast Velocity Minify

Manual Minification (Advanced)

If you don’t want to use a plugin to minify styles and scripts within 3rd-party plugins, there’s another solution for you. Essentially, you’ll want to perform the following steps:

1. Identify the style/script that needs to be minified.
2. Manually minify the file using the same methods you would to minify your own styles as scripts, as described earlier in this article.
3. Use the wp_dequeue_script or wp_dequeue_style function inside a custom WordPress plugin to de-queue the offending 3rd-party plugin’s un-minified script or style.
4. Enqueue your own minified script or style using the wp_enqueue_script or wp_enqueue_style function.

The upside to this method is that it doesn’t require an additional plugin, allows fine-tuning of how the file is minified, and can work properly with high-availability plans. Unfortunately, it also comes with the cost of needing to develop a custom plugin and maintain it if a 3rd-party script/style is updated.