Reducing HTML, CSS and JavaScript is one of many small adjustments you can make to optimize the loading speed of your website. If you look at various pages on the internet today, you will quickly realize that they are in no way comparable to the websites of 10 years ago. In the early days, a simple HTML code and a little text was all that was needed. Nowadays, however, websites consist of extensive code that often consists of HTML, CSS and JavaScript. This is partly due to the range of functions that are now available for websites, but also to the increasingly extensive designs and templates used in web design. 

It is therefore 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 tools for optimizing loading times. You should therefore 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 therefore also the loading time of the website, you should compress the files and merge them if necessary.

What does minification mean?

Minification means that all elements created for the readability of the code (i.e. line breaks, spaces, indentations, unnecessary semicolons and comments) are removed from the file in order to reduce the file size. This also includes converting 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 naturally varies greatly depending on how many of these elements were included when writing the code, but the file size is usually reduced by between 20 and 40 percent, which can be relevant for your search engine rankings in any case. Minification always makes sense and rarely leads to problems.

What does compressing mean?

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

Here, strings that have already occurred 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 compression is extreme, you can reduce the file size to approx. 20 percent of its original size.

Reduce loading times

If you've ever used a tool like Google's PageSpeed Insights, you're probably familiar with this optimization suggestion: "Minify CSS"

This measure is recommended by PageSpeed Insights if the requests to retrieve the CSS files have a significant impact on the loading time of the website. You can find a detailed explanation and explanations of other messages in the tool in the article "Google Pagespeed - The most important error messages". 

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

Example 1 - Uncompressed:

Example 2 - Compressed (reduced):

When accessing the main domain, you can already see that I was able to 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 merging CSS and JavaScript files? 

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

As a result, the browser you use to access a particular website has to send fewer requests to the server in order to display the website and load any necessary scripts.

An everyday example for understanding

Imagine you go to the supermarket and have 10 products on your shopping list. But they are all in different aisles and on different shelves. 

As a result, it takes an incredible amount of time to find every single product and add it to your 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 all you have to do is put them in the shopping cart and pay at the checkout. 

Result: By grouping all products together on one shelf, you only have to walk one way through the supermarket, saving you an incredible amount of time. It works in a similar way with combining individual codes and scripts on your website. To show you how this works in practice, I would like to show you a few small examples. 

Data economy not only helps with performance optimization.
Conscious use of resources also helps to make your website more sustainable. Read the articles 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. The LCP value or other Web Vitals values can also be negatively affected by this.

In the end, you simply need to test whether merging has a positive effect on your site or leads to problems. 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. It is used to output text, links and images. 

A standard HTML code looks like this, for example: 

 <!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. 

A standard CSS code looks like this, for example: 

 /* 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 that was 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 examples above, you can see very clearly how the minification of HTML, CSS and JavaScript code works. Advanced users and professionals can also perform 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 list, I have listed five popular minification plugins that take the work out of compressing HTML, CSS and JavaScript. 

#1 Autoptimize

The WordPress plugin Autoptimize offers you simple optimization of your website. With just a few simple steps, you can compress HTML, CSS and JavaScript files to 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, as well as many other files such as Google fonts.

As soon as you have installed the plugin in WordPress, you will find various tabs such as "JS, CSS, HTML", "Images" and "Extras" in the settings. The individual possibilities and options are very well described here and easy to understand, even for non-experts.

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

Under the "Extras" menu item, 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 wide range of caching plug-ins

#2 WP Super Minify

With the plugin WP Super Minify plugin, 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. 

The special thing 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 anyone.

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

The most important functions of the WP Super Minify plugin: 

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

#3 Fast Velocity Minify

The plugin Fast 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 minimizes the files with PHP Minify. 

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

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

This plugin also offers a Pro version. This provides you with functions for excluding various CSS and JavaScript files. 

The most important functions of Fast Velocity Minify: 

• Compression / reduction of HTML, CSS and JavaScript files
• PHP Minify
• Exclude files and scripts
• Static cache files
• WP-CLI support
• Compatible with a wide range of caching plug-ins

#4 WP Speed of Light

With the plugin WP Speed of Light is also a WordPress plugin that combines HTML, CSS and JavaScript files. This powerful plugin also features cache and Gzip compression, a database cleanup system and htacces optimization. 

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

In addition, the Pro version of the plugin offers you a few more functions, such as excluding or moving scripts. 

In addition to file compression, WP Speed of Light offers many other functions that you can easily use via the clearly structured backend. 

The most important functions of the plugin: 

• Compression of HTML, CSS and JavaScript files
• Cache and gzip compression
• Group tools
• Database cleanup
• 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	Beginners	Beginners	Advanced + Professionals	Beginners + advanced	Beginners + 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 ensure that you increase the loading time of your website by a few milliseconds. There are some very useful and free plugins available in WordPress 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 will ensure that the loading time of your website is not negatively affected by the above-mentioned files.