Reducing HTML, CSS and JavaScript is one of many small levers to optimize the loading speed of your website. If you look at various pages on the web today, you quickly realize that they are in no way comparable to the websites of 10 years ago. In the early days, simple HTML code and a short text was enough. Today, however, websites consist of extensive code, often including HTML, CSS and JavaScript. This is due on the one hand to the range of functions that are now available for websites, but also to the increasingly extensive designs and templates that are used in web design. 

It is not uncommon for HTML, CSS or JavaScript files to be hundreds of kilobytes in size. In order to process all this code in the files and display the website, the web browser sends numerous requests (so-called HTTP requests) to the server. 

WordPress in particular is not known for its inherent load time optimization tools. Therefore, you should regularly check the performance of your WordPress website.

The more "requests" are sent, the longer the loading time. To keep the number of requests as low as possible, and thus also the loading time of the website, you should compress the files and merge them if necessary.

What does minify mean?

Minification means that all elements created for the readability of the code (i.e. line breaks, spaces, indentations, unnecessary semicolons and comments) are taken out of the file to reduce the file size. It also includes rebuilding more complex expressions into simpler expressions. Even the identifiers of variables can be shortened, for example by replacing the variable numberOfButtons with n.

The effect of minification varies greatly, of course, depending on how many of these elements were included when writing the code, but the file size is usually reduced by a value between 20 and 40 percent, which can be relevant for your search engine rankings in any case. Minifying is always useful and rarely leads to problems.

What does compress mean?

Code is compressed by using gzip coding on the server side. 

Here, strings that have already appeared in advance are replaced by a pointer. These pointers consist of much less content than the actual string. This is because is no longer a string for the browser, but a reference to the previous string. The header of the HTTP response will then contain "content-encoding: gzip". The effect of the compression is extreme; you can reduce the file size to about 20 percent of its original size.

Reduce loading times

If you have ever used a tool like PageSpeed Insights from Google, you will certainly know this optimization suggestion: "Minify CSS".

This measure is recommended by PageSpeed Insights if the requests to retrieve the CSS files strongly influence the loading time of the website. A detailed explanation and explanations of other messages in the tool can be found in the article "Google Pagespeed - The most important error messages". 

I would like to show you how reducing CSS can influence the loading time of your website using a waterfall diagram from my blog bloggiraffe.de. The examples are only small sections, but they clearly show how the loading time can be reduced.

Example 1 - Uncompressed:

Example 2 – Compressed (reduced):

Already when looking at the main domain you can see that I could reduce the loading time from 1233 milliseconds to 860 milliseconds. The loading times of the individual files could also be minimally reduced in some cases.

What happens when CSS and JavaScript files are merged? 

As already briefly mentioned in the article, when merging CSS and JS files, individual files are combined into a single file. 

This means that the browser - through which you call up a particular website - has to send fewer requests to the server in order to be able to display the website and load any necessary scripts.

An everyday example for understanding

Imagine you go to the supermarket having 10 products on your shopping list. But these are located in different aisles and shelves. 

Consequence: It takes an incredible amount of time until you have found every single product and put it into the shopping cart. 

Solution: You tell the supermarket in advance which products you need. The supermarket provides you with your products on a shelf so that you only have to put them in the shopping trolley and pay at the checkout. 

Result: By grouping all products within one shelf, you only have to walk one way through the supermarket and thus save an incredible amount of time. It works in a similar way with the combination of individual codes and scripts on your website. So that you can see how the whole thing works in practice, I would like to show you some small examples. 

Saving data not only helps optimize performance.
A conscious use of resources also contributes to making your website more sustainable. You can read more about this at posts on the topics of How green is WordPress? and Sustainable web design.

With some setups - i.e. combinations of plugins and themes - merging CSS files and especially JavaScript files can unfortunately also lead to problems. Also the LCP value or other Web Vitals values can be negatively influenced by this.

Whether merging has a positive effect on your site or leads to problems is something you simply have to test in the end. Don't worry, you can undo the setting at any time.

HTML

HTML (Hypertext Markup Language) is necessary for the basic structure of a website. So the texts, links or even images are output via this. 

For example, a standard HTML code looks like this: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Minified:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) is not a real programming language. However, the so-called style sheet language is used to change the appearance of individual website elements. 

For example, a standard CSS code looks like this: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Minified:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript is a pure scripting language originally developed for the output of dynamic HTML in web browsers(wikipedia.org).

A standard JavaScript code (wiki.selfhtml.org) looks like this, for example:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Minified:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

With the help of the above examples, you can see very clearly how the minification of HTML, CSS and JavaScript code works. Advanced and professional users can also carry out this compression manually using a tool such as linkcode-generator.de. Special "minify plugins" or minifiers can do this work for you. This not only saves time, but also works fully automatically.

4 Minify Plugins for WordPress

In the following, I have listed five popular minification plugins that take the work out of compressing HTML, CSS and JavaScript. 

#1 Autoptimize

The WordPress pluginAutoptimize offers you the simple optimization of your website. With just a few simple steps, you can compress HTML, CSS and JavaScript files and thus speed up the loading time of your website. 

Autoptimize moves scripts to the footer, for example, and delays the loading of files such as HTML, CSS and JavaScript, or many other files such as Google Fonts.

Once you have the plugin installed in WordPress, you will find several tabs in the settings like "JS, CSS, HTML", "Images" and "Extras". The individual possibilities and options are very well described here and are also very easy to understand for laymen.

In the tab "JS, CSS & HTML" you can choose between different optimization options for the files JavaScript, CSS and HTML. The "Images" tab allows you to automatically optimise images and delay the loading of image files. 

Under the menu item "Extras", further auto-optimizations can be made, for example for Google Fonts, for emojis and for loading files via third-party domains. 

The most important functions of Autoptimize: 

• Minimization / caching of HTML, CSS and JavaScript files
• optimization of images
• Remove Google fonts
• Remove emojis
• Synchronize JavaScript
• Compatible with a variety of caching plugins

#2 WP Super Minify

With the pluginWP Super Minify CSS and JavaScript files can be reduced in size and cached. The accelerated loading of these files is then made possible via the Minify PHP framework. 

What is special about this plugin is that it is open source software. The source code of the tool is therefore open and can be further developed by everyone.

There are not many options in the WP Super Minify settings. You can only see the settings for the compression of JavaScript and CSS.

Key features of WP Super Minify Plugins: 

• Compression / reduction of CSS and JavaScript files
• Minify PHP Framework

#3 Fast Velocity Minify

The pluginFast Velocity Minify enables load time optimization for advanced users. On the one hand, it reduces HTTP requests by merging CSS and JavaScript files, and on the other hand, it minimises the files with PHP Minify. 

After installing the Minify plugin, you will find numerous setting options in the WordPress backend, which may be a bit overwhelming for some. The good thing is that many default settings are already predefined, so that it is sufficient for non-professionals to activate the plugin. 

For advanced users, the pluginFast Velocity Minify offers many gimmicks and optimization options.

In addition, this plugin also offers a Pro version. In this version, you have functions for excluding various CSS and JavaScript files. 

The main features of Fast Velocity Minify: 

• Compression / reduction of HTML, CSS and JavaScript files
• PHP Minify
• excluding files and scripts
• static cache files
• WP-CLI Support
• Compatible with a variety of caching plugins

#4 WP Speed of Light

The pluginWP Speed of Light is also a WordPress plugin, which combines HTML, CSS and JavaScript files. The powerful pluginalso has cache and Gzip compression, a database cleaning system and also htacces optimization. 

In the free version of WP Speed of Light, all standard features for optimizing your website are available. In the plugin settings, you can select the individual groups (HTML, CSS, JavaScript) that you want to minimize and combine.

In addition, the Pro version of the plugins has a few more features, such as the exclusion or moving of scripts. 

WP Speed of Light offers besides the pure compression of files many more functions, which you can use in an easy way via the clearly arranged backend. 

The most important functions of the plugins: 

• compression of HTML, CSS and JavaScript files
• cache and gzip compression
• group tools
• database cleaning
• image optimization

The plugins in direct comparison

	Merge + Minify + Refresh	WP Super Minify	Fast Velocity Minify	Autoptimize	WP Speed of Light
Free of charge	yes	yes	yes	yes	yes
Suitable for	Beginner	Beginner	Advanced + Professionals	Beginner + Advanced	Beginner + Advanced
HTML compression	no	no	yes	yes	yes
CSS compression	yes	yes	yes	yes	yes
JavaScript compression	yes	yes	yes	yes	yes
Rating	4/5	3/5	4/5	5/5	4/5

Conclusion

Reducing HTML, CSS or JavaScript files can increase the loading time of your website by a few milliseconds. WordPress offers a number of very useful and free plugins for this purpose. 

Even if this adjustment screw is only a small part of your on-page optimization, it should always be checked again. This way you can make sure that the loading time of your website is not negatively affected by the above mentioned files.