How to Minify CSS and Javascript Files in WordPress

If you’ve researched the best ways to optimize your website, you’ve probably come across these terms: shrink or reduction. The term shrink refers to methods used to reduce the size of files on your website. This is accomplished by removing white spaces, lines and unnecessary characters from the source code.

In this article, we’ll explain what downsizing entails, what the benefits are, and some of the most popular downsizing solutions. From here you will be able to decide on the best way to handle performance and speed improvements for your website.

What is minification?

Websites are made up of many different files organized in folders located on the server. These files contain code that determines the look and functionality of your site. The code it uses needs to be optimized to make your site light and fast to load. Especially your JavaScript and CSS code. Shrinking your files is one way to achieve this. If you have tried to test your website speed using GTmetric or Page Speed ​​AnalyticsYou probably received a recommendation to minify some of your site files, namely the CSS and JavaScript files.

When we check the code in a website’s files, we expect it to be written in an understandable way to make it easier to interpret. However computers running this code don’t care if files contain comments, formatting, spaces or newlines. When they encounter unnecessary characters in website files, they ignore them; only the code that needs to be executed matters.

This is when diminution enters the scene. Minification is a computational term this basically means removing unnecessary characters, those that are not necessary to execute written code. Minification works by analyzing and rewriting the code. This reduces the overall size of the files and, in addition, the size of the website itself so that it can load faster in the user’s browser.

For example, if you have a style sheet file that aims to style your website with CSS code that looks a bit like this:

The minified version looks like this:

As you can see the difference is significant—the minified version is in one line and takes up much less space more than the original version of the code.

Minification takes place on the web server before a response is sent to a client’s (web browser) request. After minification, the web server uses smaller, minified and much faster CSS and JavaScript files. instead of the originals. This results in improved page load speed without loss of functionality.

How to Shrink Your WordPress CSS and JavaScript Files

Before you start shrinking your website files, we recommend backing up the entire website or backing up individual files only. Also, if you have a staging site or a local test environment, you’d better shrink your website files there first. you can do it like this check if everything is working properly before making changes to the live site.

Also, you should check Your website page speed before and after shrinking files. Then compare the results and see if shrinking helps improve. You can do this using GTmetrix; It is a very useful testing tool that produces and delivers results. recommendations for website optimization improvements.

You can use a plugin to shrink files or do it manually with an online tool. We will explain both methods in more detail in the following sections.

Shrinking Files Using Plugins

Using a WordPress plugin for minification, The easiest way to minify CSS and JavaScript files on your website. The most commonly used plugins are:

auto optimize

auto optimize It is one of the most popular shrink plugins you can find. It is very easy to use and offers many possibilities and on top of that it is free. This plugin can be combine scripts, minify and cache your code.

Download and install this plugin via WordPress admin panel. When you enable it, find Settings > Auto Optimize optionand optimization options Check the boxes for CSS and JavaScript options.

You will also notice the following additional options for optimizing these files. You can enable them and also customize file shrink. In the end, all you have to do is click Save Changes and Clear Cache button.

Fast Speed ​​Reduce

Fast Speed ​​Reduce is another popular, free and useful plugin. works by Minifying and combining your CSS and JavaScript files to reduce HTTP requests to your server. It combines files into one group and tries to use as few as possible. There is additional optimization options availablebut the default settings are sufficient for most websites.

When you install and activate this plugin, your website files are automatically minified and optimized.

You can use most Settings > Quick Speed ​​Minimize choice in the admin panel to access the plugin settings and check all available options. Under the Status tab, you can: see a list JavaScript and CSS files that Fast Velocity Minify processes.

And you can use Settings tab customize how your files are optimized. Since grouping CSS and JavaScript is enabled by default, after activating the plugin you can use the settings to: set default options or disable shrinking for certain types of code. you even have Option to optimize Google Fonts and Font Awesome icons.

WP Super Minimize

WP Super Minimize is a minification plugin that can minify, combine and cache your website’s CSS and JavaScript files.

After enabling this plugin, it will automatically compress all inline JavaScript and CSS code. Like this file size will be smaller this will help increase the loading speed of your website. use most Settings > WP Super Minimize choiceYou can do choose whether to minify both JavaScript and CSS or just one from these two file types.

To make sure this plugin works properly, just review your website source code. The easiest way to do this is open your site in a browser and press Ctrl + U (for Windows) or Option + Command + U (for Mac). If all is well, you should see the following message at the end of the source code:

In conclusion, no matter which plugin you choose to use, all you have to do is select the files you want to shrink and the plugin will do all the work for you in the background. Every shrinking plugin on the market offers different functions besides minimizingso you should try a few plugins and choose the one that suits you best.

Also, shrinking is almost a standard feature. caching pluginsE.g W3 Total Cache and WP Super Cache. So, you can try using them to minify your website’s CSS and JavaScript files.

Manually Shrink Files

First, manually shrinking files doesn’t mean you have to manually go through every single file on your website and remove any white or blank spaces. Manual shrink actually includes: using one of the popular online tools for this purpose. One of them Minify codewe’ll use it to show you the steps you need to take to minify your code. This tool is beautiful simple and user-friendly interface. And many online tools of this type have similar or the same procedure for shrinking. Here are a few you can try:

If you choose to use the Minify Code tool, first choose the tab you need. Depending on what code you want to minify, there is a tab for CSS minifier and JavaScript minifier. After you decide, paste your code in the current window and Press shrink button.

After a few minutes, you will see minified version of the code you entered. You can simply copy and export to your original file. Just a reminder – be sure backup your files first overwriting the original code with minified code.

Manual shrinking is primarily useful if you only want to minify certain files or some code you wrote. For example, if you are using a child theme to customize your website, a CSS file with your custom code would be a good candidate for minification. In this case, you can make a backup of the original file, then use the online tool to minify the code and replace it directly in the file.

If you later decide to change something, you can always do it. in the backup file you saved. Minify again with the changes made and change the code in the file on the server. in this way you will always have a ready backup file that you can edit and the minified file will be on the server doing its part to optimize your site as much as possible.

final thoughts

If you want to improve the performance of your website and get better page load speeds, minifying CSS and JavaScript files will help you a lot. You can easily minify your website code using minification tools available online. Also, with WordPress websites, you can always install one of the many plugins on the market and automatically minify CSS and JavaScript files with just a few clicks. If you’re already using a caching plugin, you can check its settings for any shrink options and use it instead of adding a bunch of new plugins.

There are multiple options available for minifying CSS and JavaScript files, you just have to decide which one works best for you. We hope you found this article helpful and using our advice, your optimized site will soon rise in the rankings.