Skip to Main Content

How to compress your CSS, HTML and Javascript files

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

When you compress your website's CSS, HTML, and Javascript files, you can save valuable time on your website's page load speed. Now, we're not talking about cutting your page load speed in half or anything, but when it comes to your website speed, any little bit counts.

The loading speed of your website is not only important for new visitors, but also for search engine rankings.

The term "minifyIn programming language describes the process of removing unnecessary characters from source code. These characters include spaces, line breaks, comments and block delimiters which are useful for us humans but useless for machines.

We minify a website's files that contain CSS, HTML, and JavaScript code so that your web browser can read them faster.

Read also our article on 10 WordPress plugins to improve the speed of your blog

Here is an example of CSS minification.

CSS before the minification

/ * An example CSS file ---------------------------------- * / .user-profile-card { margin: 0px; background: #33E43} .user-profile-description {border: 0; position: absolute; width: auto; margin-top: 20px; }

CSS after minification

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Obviously, this is just a small example using a CSS snippet, but you can imagine how much space it would save when shrinking thousands of lines of code. 

How to increase the time spent on your WordPress blog? Find out by consulting this article.

So if you want to do it manually, technically you can. But you will run a high risk of error and waste precious time of your life unnecessarily!

Follow these tips and use the tools at your disposal.

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 one 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 with other useful optimizations. You can use your javascript code by entering the url for the location of the js file and then choosing 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:

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.

css style divi.jpg

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.

minification css.jpg

Once the new minified code is generated, copy it.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

copy a compressed code.jpg

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)

autooptimize wp.png
Autoptimize is probably the most popular minify WordPress plugin. It is popular because it is easy to use and is packed with powerful features. It can bundle (combine scripts), minimize, 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

autoptimize.jpg

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.

optimization css.jpg

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

css options advanced.jpg

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

W3 Total Cache (FREE)

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

general parameters w3 total cache.jpg

WP Fastest Cache (FREE)

wp fastest cache.png
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.

wp faster cache settings.png

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 look and optimize the grip of your blog or website.

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

1. 404 Error Page Redirect to Homepage or Custom Page

Here is one of the best ways to easily add a 404 error page which will redirect the visitor to the home page or the personalized page, after the activation of this plugin. WordPress premium.

All 404 error pages will be redirected to the home page or to a custom URL. Using this WordPress plugin, you will allow Google to reduce the pagerank of your website if it has many 404 error pages.

See also How to fix 413 error on WordPress

This WordPress plugin does not just redirect but it can also be a suitable solution to improve the ranking of your website in the results of search engines.

Download | Demo | Web hosting

2. Borlabs Cache

WordPress is a platform powered by a database that generates content dynamically. The more content and plugins you have, the more database queries are executed. This can slow down the performance of your website, especially when your database is located on a different server.

The WordPress Borlabs Cache plugin saves dynamically generated content as a static file on your server memory. When the page is requested, this static file is loaded and sent to the visitor, which is considerably faster than usual database queries. But that's not all.

See also our 5 WordPress plugins to clean the database of your website

Your pages contain a lot of unnecessary white space or HTML comments, which increases the overall page size. Borlabs Cache removes them all and uses GZIP to compress your pages.

Discover How to display all your WordPress publications on a single page

Many plugins have their own JavaScript and CSS files, which results in more requests on your server. Borlabs Cache combines all these JavaScript and CSS files so that, in the best of cases, your visitor only needs to load one JavaScript file and one CSS file.

Download Demo | Web hosting

3. Multilingual Press

Multilingual Press works with a multisite installation of WordPress and allows you to link translations. The plugin comes with 174 languages ​​built into the language manager, and it supports and unlimited number of websites, so you can create and link as many translations as you want.

That's good for SEO because it will allow you to keep your languages ​​on separate posts and pages, and if you ever decide to use a translation different from the plugin your content remains intact (even after disabling or removing the Multilingual Press plugin). Additionally, you can add a translation widget to switch between translations easily.

Discover How to add a code snippet using Gutenberg on WordPress

Multilingual Press is a great free option for adding translations to your WordPress site via multisite. In addition, if you ever find that you need more options, you can opt for the pro version which costs $ 75.

Download Demo Web hosting

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

This article features 1 comment

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
2 shares
Share2
tweet
Save