Some tools to perform the compression

Fortunately, you don't necessarily have to be a developer or know one of the programming languages ​​to reduce your website's file sizes. Minification has become a common practice in the web design world. So you shouldn't be surprised to learn that there are many wonderful (and free) tools out there to do the job for you.

See also our 6 WordPress plugins to breathe new life into your articles

Here is a list of useful tools to get started. Since many of these can minimize multiple types of code, I have included the code type options in parentheses.

• • cssminifier.com et javascript-minifier.com (CSS and JS) - These two minifiers by Andrew Chilton are easy to use. You just need to paste your code, then click on the button Minify to display the compressed code. You can even download the exit code as a file for convenience.
  • htmlcompressor.com (HTML, CSS & JS) - This online compression / minification tool supports HTML, CSS, and JS code types. It even supports different combinations of code types such as CSS + PHP and JavaScript + PHP. And you can even check the compressed code for errors.

• • csscompressor.net (CSS only) - This online CSS compressor is fast, easy, and free to use.

• • jscompress.com (JS only) - This JavaScript compression tool allows you to compress JavaScript code by copy and paste, but you can also download multiple JavaScript files at a time. This is ideal for combining JavaScript files into a single file for better page loading speed.
  • Dan's Tools - Dan's Tools proposes a minify CSS and to minify JavaScript . Both tools have a really clean, easy to use user interface. They don't offer any advanced options, but they are great for common minification purposes.

• • refresh-sf.com (HTML, CSS, and JS) - This compressor will reduce JavaScript, CSS, and HTML code types. It also includes all the compression options for each type of code if you need them.
  • Closure Compiler (JS only) - Closure Compiler is part of Closure Tools , a suite of tools from Google Developers. It allows you to minify your JavaScript along with other useful optimizations. You can use your Javascript code by entering the URL of the js file location and then choose how you want the code to be optimized and formatted. 

For example, you choose to optimize your code to remove only the blanks if you want. Once you've clicked on the compile button, it will reduce the code (or compile it) for you.

• • minifycode.com (HTML, CSS and JS) - This website offers minifiers for JavaScript , CSS et HTML with a simple and clean user interface that compresses your code with a single click. It also offers an "beautifier" tool to decompress the minified code in order to make it more readable (the opposite of minification).

If you are looking for offline tools to minimize your CSS or JavaScript HTML locally, here are some options:

• phpied.com/cssmin-js/ (CSS only)
• yui.github.io/yuicompressor (JS and CSS)

How to reduce the size of your HTML, CSS, and JavaScript using an online tool

Many of these online tools have a similar process that involves the following steps:

• Paste your source code or download the source code file. 
• Optimize settings for a specific output (if options are available)
• Click a button to compress the code.
• Copy the minified code result or download the minified code file.

For this example, I'm going to use the minify tools from minifycode.com.

See also: How to Add a CSS Code Safely to WordPress by consulting this link.

First, locate the CSS file (commonly called style.css) in your website files and open it using a page editor. Then copy all the CSS code to your clipboard.

Go to minifycode.com and click on the CSS minifier tab. Then paste the CSS code in the input box and click on the button Minify CSS.

Once the new minified code is generated, copy it.

Then go back to your website's CSS file and replace the code with the new simplified version.

That's all !

Repeat the same process to also reduce the JavaScript and HTML file (s) of your website.

How to Minimize HTML, CSS, and JavaScript in WordPress Using Plugins

The easiest way to minimize your HTML, CSS, and JavaScript in WordPress is to use a plugin. This allows you to automatically optimize your WordPress website files to reduce page load time with just a few button clicks.

There are a lot of plugins that will get the job done, but I'll briefly mention a few examples.

Autoptimize (FREE)

Autoptimize is probably the WordPress Plugin of the most popular minify. It is popular because it is easy to use and packed with powerful features. It can bundle (combine scripts), minify and cache your code. As a bonus, you have additional options to optimize Google Fonts, images, etc.

To use Autoptimize, you can download, install and activate the plug-in from the WordPress dashboard under Plugin> Add new.

For more information, see our guide on:  How to install a plugin in WordPress

Once the plugin is activated, go to Settings> Automatic optimization. Then, under the Main parameters tab, check the code you want to optimize (HTML, CSS and / or JavaScript) and click Esave changes.

You can also click on the button Show advanced settings at the top of the page to further customize your code optimization.

It is more or less that ! Quite simple and powerful.

W3 Total Cache (FREE)

W3 Total Cache is an excellent caching plugin that offers the ability to minimize your HTML, JS and CSS files.

WP Fastest Cache (FREE)

WP Fastest Cache - This plugin WordPress caching is extremely popular with high reviews. It performs various performance optimizations, including combining and reducing your HTML CSS and JavaScript for better performance.

Read also our article on 8 WordPress plugins to add a live chat to your blog

Once the plugin is installed, simply click on the tab WP Fastest Cache in the WordPress dashboard sidebar. Under the tab Settings, you will find options for combining and reducing HTML and CSS files. Although minifying JavaScript is only available in the pro version.

To summarize

If you want to make your blog faster and have better performance, you need to reduce the size of your HTML, CSS, and JavaScript files. With all the online tools available, you can easily reduce the code of any website. 

9 WordPress plugins to hide the content of your Blog to discover absolutely

For those who use WordPress, you have at your disposal powerful plugins to minify these files automatically with a few clicks.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion