{"id":9848,"date":"2020-07-29T15:00:50","date_gmt":"2020-07-29T13:00:50","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=9848"},"modified":"2022-02-17T11:04:10","modified_gmt":"2022-02-17T10:04:10","slug":"minify-css-javascript-files-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/minify-css-javascript-files-in-wordpress\/","title":{"rendered":"How to Minify CSS and Javascript Files in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]If you ever explored the best ways to optimize your website, you have probably come across the terms minify<\/em> or minification<\/em>. The term minify refers to methods used to reduce the size of the files on your website. This is accomplished by removing white spaces, lines, and unnecessary characters from the source code.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this article, we will explain what minification encompasses, what its benefits are, and some of the most popular minification solutions. From there you will be able to decide the best way to tackle performance and speed improvements for your website.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

<\/a>What is Minification?<\/h2>\n

[\/vc_column_text][vc_column_text]Websites are made up of many different files arranged in folders located on the server. Those files contain code that determines the appearance and functionality of your site. In order to make your site light-weight and fast-loading, the code it\u2019s using needs to be optimized. Specifically, your JavaScript and CSS code. Minifying your files is one way to accomplish that. If you ever tried testing the speed of your website using GTmetrix<\/a> or PageSpeed \u200b\u200bInsights<\/a>, you likely got a recommendation to minify some of your site files\u2014namely, the CSS and JavaScript ones.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When we check the code in a website\u2019s files we all expect that it\u2019s written in an understandable way to make it easier to interpret. However, the computers that execute that code don\u2019t care if the files contain comments, formatting, white space, or new lines<\/strong>. When they come across any unnecessary characters in the website files, they just ignore them\u2014only the code that needs to be executed matters.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This is when minification enters the scene. Minification is a computing term<\/strong> that basically means removing superfluous characters<\/strong>, those that aren\u2019t needed to execute the written code. Minification works by analyzing and rewriting the code. This reduces the overall size of the files<\/strong> and, by extension, the size of the website itself, so it can load faster in the user’s browser.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, if you have a stylesheet file intended to style your website with CSS code that looks a bit like this:[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Stylesheet <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Its minified version would look like this:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Minified <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]As you can see the difference is significant\u2014the minified version is in one line and takes up far less space<\/strong> than the original version of the code.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Minification takes place on the web server before a response to a client’s (web browser’s) request is sent. After minification, the web server uses smaller, minified, and much faster CSS and JavaScript files<\/strong> instead of the original ones. This results in improved page loading speed without losses to functionality.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Minify Your WordPress CSS and JavaScript Files<\/h2>\n

[\/vc_column_text][vc_column_text]Before you start minifying your website files, we recommend that you first back up the entire website<\/a> or just make a backup of individual files<\/a>. Also, if you have a staging site<\/a> or a local test environment, it would be good to first minify your website files there. That way you can check if everything is working properly before you make changes to the live site<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Moreover, you should check the page speed of your website before and after minifying the files<\/strong>. Then compare the results and see if the minification has helped with improvement. You can do this using GTmetrix; it\u2019s a very useful testing tool that generates results and gives recommendations for website optimization<\/strong> improvements.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To minify files, you can use a plugin or do it manually with an online tool. We\u2019re going to explain both those methods in more detail in the sections below.[\/vc_column_text][vc_empty_space height=”72px”][vc_column_text]<\/p>\n

Minifying Files Using Plugins<\/h3>\n

[\/vc_column_text][vc_column_text]Using a WordPress plugin for minification is the easiest way to minify CSS and JavaScript<\/a> files<\/strong> on your website. The most commonly used plugins are:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Autoptimize<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Autoptimize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Autoptimize<\/a> is one of the more popular plugins for minification that you can find. It is very easy to use and offers a lot of possibilities, and on top of that, it\u2019s free. This plugin can combine scripts, minify, and cache your code<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Download and install this plugin via the WordPress admin panel. When you activate it, find the Settings > Autoptimize option<\/strong>, and in the optimization options tick the boxes for the CSS and JavaScript options<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Autoptimize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will also notice additional options below for optimizing these files. You can activate them and additionally customize file minification<\/strong>. In the end, all you have to do is click the Save Changes and Clear Cache<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]Fast Velocity Minify<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Fast <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Fast Velocity Minify<\/a> is another popular, free, and useful plugin. It works by minifying and combining your CSS and JavaScript files<\/strong> to reduce the HTTP requests to your server. It merges the files into a group and tries to use as few of them as possible. There are additional optimization options available<\/strong>, but the default settings are enough for most websites.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you install and activate this plugin, your website files will automatically be minified and optimized<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can use the Settings > Fast Velocity Minify<\/em> option<\/strong> in the admin panel to access the plugin settings and check all available options<\/strong>. Under the Status tab, you can see a list<\/strong> of JavaScript and CSS files that Fast Velocity Minify processed.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Fast <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And you can use the Settings<\/em> tab to tailor how your files will be optimized<\/strong>. Since grouping CSS and JavaScript is enabled by default, after activating the plugin you can use the settings to adjust the default options or disable minification<\/strong> for certain types of code. You even have the option to optimize Google Fonts and Font Awesome icons<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Optimize <\/div>\n<\/div>[vc_empty_space height=”38px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]WP Super Minify<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]WP Super Minify<\/a> is a minification plugin that can minify, combine, and cache your website\u2019s CSS and JavaScript files.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After activating this plugin, it will automatically compress all inline JavaScript and CSS code. So the file size will be smaller<\/strong> which will help to improve the loading speed of your website. Using the Settings > WP Super Minify<\/em> option<\/strong>, you can choose whether to minify both JavaScript and CSS or just one<\/strong> of those two file types.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To make sure this plugin is working properly, simply examine your website\u2019s source code<\/strong>. The easiest way to do this is by opening your site in a browser<\/strong> and pressing Ctrl + U (for Windows) or Option + Command + U (for Mac). If everything is alright, you should see the following message at the end of the source code:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Message <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Ultimately, whichever plugin you choose to use, all you need to do is select the files you want to minify and the plugin will do all the work for you<\/strong> in the background. Every minification plugin on the market offers different functions in addition to minification<\/strong>, so you should try several plugins and choose the one that suits you best.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Furthermore, minification is a virtually standard feature of caching plugins<\/strong>, such as W3 Total Cache<\/a> and WP Super Cache<\/a>. So you can try using them as well to minify your website\u2019s CSS and JavaScript files.[\/vc_column_text][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Minifying Files Manually<\/h2>\n

[\/vc_column_text][vc_column_text]Firstly, manually minifying files does not mean that you manually go through every file on your website and remove white or empty spaces. Manual minification actually involves using one of the popular online tools<\/strong> for this purpose. One of them is Minify Code<\/a>, which we\u2019re going to use to show the steps you\u2019d need to take to minify your code. This tool has a pretty simple and user-friendly interface<\/strong>. And many online tools of this type have a similar, or same, procedure for minification. Here are a few you can try out:[\/vc_column_text][vc_empty_space height=”22px”]