How to Minify JavaScript, CSS, and HTML Files in WordPress?

Do you want to minify JavaScript, CSS, and HTML Files in WordPress website?

The code minification can reduce the size of the file up to 40%. And in some cases, even 50%.

Reducing the file size affects the site’s loading speed, and your WordPress site gets a little speed boost.

In this article, I will tell you how to minify JavaScript, CSS, and HTML files in WordPress.

• What is Minification?
• Importance of Minification
• Code minification in Speed Test
• Ways to Minify JavaScript, CSS, and HTML

Jump directly to Minifying the Java, CSS and HTML.

What is Minification?

Minification means deleting the unnecessary parts of JavaScript, CSS, and HTML files to be more compact. The developer writes the code for the computer and the humans as well. They have to make the code readable.

There are line breaks, white space, comments, extra characters, etc., in the code to understand it. But the browser does not need all the unnecessary elements of the code to execute it. 

Minification means removing all the white space and extra characters from the code. Now, the human may not understand the code, but for computers, it is the same as before.

However, the size of the file has reduced due to the deletion of all unneeded extra parts. Means faster loading of the website.

Javascript Minification

Minification of Javascript deletes all the Javascript comments (//…) and the white space from the code.

A clean Javascript code written by a coder look like this:

let wrapper
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))

async function writingAll (stringTarget, container){
  wrapper = document.querySelector('['+container+']')
  const stringsContainer = document.getElementsByClassName(stringTarget)
     
  while(wrapper){
    for (i=0; i < stringsContainer.length ; i++){
      const string = stringsContainer[i].textContent
      await write(string)
      await sleep(1000)
      await erase()
      await sleep(1000)
    };
  }
};
async function write(text){    
  let index = 0
  while(index < text.length){
    const timeout = 100
    await sleep(timeout)
    index++
    wrapper.innerHTML = text.substring(0, index)
  }
};
async function erase() {
  while(wrapper.textContent.length){
    const timeout = 100
    await sleep(timeout)
    wrapper.textContent = wrapper.textContent.substring(0, wrapper.textContent.length - 2)
  }
};
writingAll('item', 'data-text');

After minification, the same code will look like this:

let wrapper;const sleep=e=>new Promise(t=>setTimeout(t,e));async function writingAll(e,t){wrapper=document.querySelector("["+t+"]");const n=document.getElementsByClassName(e);for(;wrapper;)for(i=0;i<n.length;i++){const e=n[i].textContent;await write(e),await sleep(1e3),await erase(),await sleep(1e3)}}async function write(e){let t=0;for(;t<e.length;){const n=100;await sleep(n),t++,wrapper.innerHTML=e.substring(0,t)}}async function erase(){for(;wrapper.textContent.length;){const e=100;await sleep(e),wrapper.textContent=wrapper.textContent.substring(0,wrapper.textContent.length-2)}}writingAll("item","data-text");

CSS Minification

CSS minification strips all the extra spaces and comments from the CSS files.

A clean CSS code by a developer look like this:

.wrapper {
  padding: 10px;
  margin: 0 auto;
  width: 500px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .item {
    visibility: hidden;
    display: none;
  }

  h2 {
    font-size: 50px;
    margin: 0;
    color: #3a3a3a;
    text-align: left;
  }

  > div {
    min-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: flex-end;
    font-weight: bold;
    color: orange;

    &:after {
content: "";
    width: 10px;
    height: 4px;
    display: block;
    background: black;
    color: orange;
    margin-bottom: 4px;
    margin-left: 2px;
    animation-duration: 350ms;
    animation-name: fade;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    }
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

After minification, it gets short.

.wrapper{padding:10px;margin:0 auto;width:500px;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}h2{font-size:50px;margin:0;color:#3a3a3a;text-align:left}to{opacity:0}

HTML Minification

HTML minification removes the extra space, formatting, line breaks, and similar content.

A HTML code look like this:

<div class="wrapper">
 
  <div data-text></div>
  <span class="item">UI & UX designer</span>
  <span class="item">Webdesigner</span>
  <span class="item">Frontend developer</span>

  <h2>I'm John Doe</h2>
 
</div>

After minification, the same HTML code look like this:

<div class=wrapper>
<div data-text></div>
<span class=item>UI & UX designer</span>
<span class=item>Webdesigner</span>
<span class=item>Frontend developer</span>
<h2>I'm John Doe</h2>
</div>

I have taken the code from this Codepen Project to explain the minification.

Importance of Minification

As you can see, the minification of code is removing a lot of space from the files. The size reduces, and the page becomes lighter than before.

That improves the loading speed of the site.

Though many experts say that this made a little difference to the speed, that difference is negligible.

But if it can make a difference, then it is worth doing it. And it is very simple to do it, and there is no risk involved.

Code minification in Speed Test

Let’s run the GTmetrix speed test to check if they suggest the Minification of code or not.

To test, I am taking the HarperCollins India site.

GTmetrix gives this result regarding the Javascript minification.

As we can see, there are many scripts of whom we can reduce the file size by minifying them.

Test the speed of your website and check if you are getting the Code Minification issue.

Ways to Minify JavaScript, CSS, and HTML

There are two easy ways to minify JavaScript, CSS, and HTML in WordPress.

1. Manual Method
2. Using Plugin

#1 Manual Method

Manually does not mean you are going to remove all the characters from the code yourself. Many tools will help you in minifying the code files.

But you have to replace the code files with the minified code files manually.

Step 1: Find all the code that needs minification.

This can be done via the GTmetrix speed test.

We did the text before, and we can see in the result that it gives you the list of all the files.

Step 2: Download the optimized version.

Click on the “optimized version.” This is the minified code that GTmetrix is giving to you.

Step 3: Upload the files

Now upload the downloaded minified Javascript, CSS, and HTML files into WordPress directory. 

You have to replace source code files with the minified version. That can be don’t by FTP client, or you can replace the files with the cPanel.

Alternatively:

You do not have to download the “optimized version” provided by GTmetrix. Download the code files from your WordPress site, and then minify them using the online tools.

Tools to Minify JavaScript

• JavaScript Minifier
• Google Closure Compiler
• Uglify.js

Tools to Minify CSS

• CSS Minifier
• Coveloping
• CleanCSS
• CSSTidy
• CSS Minify by OnlineDomainTools
• Debugger CSS Minifier

Tools to Minify HTML

• Minify Code
• HTML compressor
• Text Fixer
• HTML minify 

#2 Use a WordPress Minify Plugin

Installing a Minify plugin is much more comfortable, as the tool will automatically minify the files. You do not have to download and upload files manually.

Many quality plugins can do this task. Even, popular caching plugins do have this function.

But here are the best WordPress Minify Plugins:

Autoptimize

Autoptimize is one of the most popular WordPress plugins. 

This lightweight plugin gives you the option of selecting what code you want to optimize. It can minify HTML, CSS, and JavaScript. 

It can also work with CDN to reduce the file size with the plugin, and serve them via CDN.

WP Super Minify

WP Super Minify does what it says.

The plugins combine and minify the JavaScript, CSS, and HTML files in a few clicks.

WP Super Minify has more than 10,000 active installations, and it is working fine. There are not many features in this plugin, as its only task is to minify the code.

Fast Velocity Minify

If you want an advanced Minifying Plugin for WordPress, then Fast Velocity is the one.

It does more than just Minifying the code.

With Fast Velocity Minify, you can merge the CSS and Java files into one, which will reduce the HTTP requests. 

There is a “Pro Optimization” setting for the developers, with advanced options. However, if you are a beginner, let it be on default.

Must Read: Top 10 Best WordPress Plugins for Event Registration

FAQ

What is the Difference Between Minification & Compression?

People often get confused between Minification and Compression.

The difference between Minification and Compression is that in Minification, we remove the unnecessary characters from the code. While, in compression, we remove the repetitive strings from the code and point them to the string’s first instance.

Both methods reduce the size of the file and are essential for the fast loading speed of WordPress.

Does Minified JavaScript run faster?

No. But it improves the overall performance of the website. The minification reduces the size of the file, and then the browser takes less time to download the files from the server.

Hence, the HTTP request-response cycle works faster, and the loading speed improves.

Wrap Up

In this article, we learn about how to minify JavaScript, CSS, and HTML files in WordPress. 

I mentioned the manual method and the plugin method. It is up to you which one you choose to minify the code on your WordPress site.

However, if there is any problem in any process, tell me in the comment section.