WordPress Minification: What It Is and How to Do It

In this article, we’re going to introduce you to minification. Then, we’ll show you two of the best plugins to minify your WordPress files.

As your site grows bigger with more tools and content, the number of files can expand to the point of slowing down your site. Speed matters on the internet, so a slow-loading site is a big problem.

One way you can combat this problem is through minification. This is the process of compressing certain files (such as CSS, JavaScript and HTML files) to shrink their size without impacting their functionality. The best part is that to minify your files, you don’t even need any coding know-how.

What Minification Is (And Why It’s Important)

Every second counts on the internet. As websites become more optimized, people have been primed to expect fast loading times. In fact, almost half of all internet users expect sites to load in two seconds or less.

When a single second delay can result in a 7 percent reduction in conversions, being stuck with a slow site can be a death sentence. Fortunately, there are remedies to help you speed up your site, specifically minification.

This refers to the process of compressing Cascading Style Sheets (CSS), JavaScript, and HTML code to shrink the sizes of your files without affecting their functionality. You may not realize it, but many of the files that keep your site running can also be the reason why your takes longer to load.

The process may sound overly technical on the surface, but it’s very straightforward. It simply involves removing unnecessary characters from the code.

Let’s look at an example. Here’s how a CSS snippet would usually look:

If you were to minify this code, the result might end up looking like this:

If you examine the minified code, you’ll see all of the required information is still there, but that line breaks, spaces, and some characters have been removed. These elements are not necessary for a computer to understand the code and only exist to make the code more readable to humans.

It may not seem like such minor changes would have a big effect, but think about how many lines of code you have running under your site’s hood. Minification can significantly cut down the size of each file, which will, in turn, make your site quicker to load. This is especially true if your site contains a large number of files, scripts, and plugins.

We’re now going to look at two methods you can use to minify code, both manually and with a dedicated plugin.

How to Minify CSS and JavaScript Manually

Manual minification lets you quickly compress CSS and JavaScript code using a dedicated application. This enables you to write code that’s easy to read and interpret first, before minifying it with a tool in seconds.

We recommend using a tool, such as SS Minifier or Clean CSS. Similarly with JavaScript, while Minify is a good starting point, there are alternatives such as JSCompress and JavaScript Minifier.

Fortunately, the tools will all work in the same way. For example, using Clean CSS, you paste your original code into the relevant field and click CSS Minify. You’ll see the results in the other field, ready to copy and paste.

However, we recommend saving both versions of the code separately; otherwise, you risk losing the original code. Of course, the original will be easier to troubleshoot and edit than the minified version.

You should also only use manual minification if you are confident in your coding abilities. If you don’t have a lot of experience, we’d recommend using a WordPress minification plugin instead. We’ll be taking a look at two of the best ones next.

2 Plugins to Help Minify Your WordPress Files

Using a WordPress plugin is an easy way to minify the CSS and JavaScript files that keep your site running. Because of how vulnerable these files are, you should make sure you only use a plugin that’s trusted and safe. Here are two minification plugins we recommend.

1. Fast Velocity Minify

Fast Velocity Minify is a great choice for both novices and experienced users alike. By default, it offers automatic minification of all CSS, JavaScript, and HTML code on your site and requires no additional configuration. However, it also provides a huge amount of additional options if you want to tinker with the specifics.

• Requires minimal configuration and runs automatically in real time.
• Offers extensive options for advanced users.
• Great results and reliable support.

As for the price, Fast Velocity Minify is open-source and completely free.

2. Autoptimize

Autoptimize is one of the more popular minification plugins (for good reason). It will bundle your files together, optimize them, and cache them to create as few requests to the site as possible. While it does offer some additional options, this plugin is ideal for those who want a ‘set and forget’ approach to minification.

• Easy for beginners to grasp.
• Provides additional options for more optimized performance.
• Enables more specific customization using the dedicated API.

The Autoptimize plugin is free, although the developers also provide premium configuration services including personal installation and optimization tailored to your site. These cost €119 and €599 respectively.

How to Minify WordPress Files With a Plugin

Now you’re familiar with the tools available, all that remains to do is to minify your WordPress site’s files. For this example, we’ve chosen to use the Fast Velocity Minify plugin. This is because it’s easy to implement for beginners, while still offering a great deal of optional configuration for advanced users. We even recommend it in our knowledge base!

Once you’ve installed and activated the plugin, you don’t need to do anything else — your site is now ready for minification.

The next time somebody visits your site, the plugin will intercept your files and create a copy of them. It will then group the files to cut down on the number of required requests, then minify the code. These optimized files are then saved in the cache and used whenever the site is accessed again. This means your original files are still saved and unaffected.

If you’re a more experienced user, the plugin does offer some advanced settings. You can access these by going to Settings > Fast Velocity Minify within WordPress.

Among other options, you can disable minification for certain files, exclude specific assets from the process, and determine the cache’s location. Each option is annotated with additional information and recommendations, and you can also refer to the FAQ for more information.

However, we do recommend leaving all the default settings as they are unless you know exactly what you’re doing. The plugin is set to automatically minify all CSS, JavaScript, and HTML code using the standard settings, which will be enough to have a positive effect on most sites.

Conclusion

Minifying your WordPress files is a quick and simple way to improve your site’s performance, which in turn will make sure you don’t lose visitors to long loading times. It may seem like a technical nightmare to accomplish, but as we’ve shown in this article, you don’t actually need to know your CSS from your JavaScript to minify your WordPress files.