Minify HTML, CSS and JavaScript: Here's How It Works in WordPress

Sven Scheuerle Last updated 21.10.2020
9 Min.
css minification
Last updated 21.10.2020

Minifying HTML, CSS and JavaScript files is one of many small adjustments to optimize the loading speed of your website. In this article, Sven Scheuerle explains to you what downsizing CSS, HTML and co. is all about, how much loading time you save by using lean code and which WordPress plugins can help you with the implementation.

If you look at the websites on the World Wide Web today, you will quickly realize that they are in no way comparable to sites 10 years ago. In the beginning, a simple HTML code and a little text was enough. Nowadays, however, websites are made up of extensive code, often consisting 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 that are used in web design.  

So it is not uncommon for HTML, CSS or JavaScript files to quickly grow to hundreds of kilobytes. In order to process all these codes in the files and to be able to display the website, the web browser sends numerous requests (so-called HTTP requests) to the server. 

The more "requests" are sent, the longer the loading time. In order to keep the number of queries as low as possible, and thus the loading time of the website, you should merge and compress the files.  

What does minification of HTML, CSS and JavaScript mean?

Minification – i.e. reducing the file size of HTML, CSS, etc. as much as possible – is part of every good on-page optimisation. Although it only accounts for a small part of the loading times, it can also be decisive for your rankings in the search engines.  

Especially WordPress is not known to have inherent tools for optimising load time. Therefore you should check the performance of your WordPress site regularly.

Reduce loading times

Any website owner who has used a tool like Google's PageSeepd Insights is almost certainly familiar with this optimization suggestion: "Reduce 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, you can find in the article "Google Pagespeed - The most important error messages". 

How the reduction of CSS can influence the loading time of your website, I would like to show you with 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 (not reduced):

css recompressed
Waterfall diagram – without compression of HTML, CSS and JavaScript files

Example 2 – Compressed (reduced):

css compressed
Waterfall diagram – with compression of HTML, CSS and JavaScript files

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 compressing HTML, CSS, and JavaScript files?  

As mentioned briefly in the article, when files such as HTML, CSS, and JavaScript are compressed, individual files are combined into a single file.  

As a result, the browser you are using to access a particular web page has to send fewer requests to the server to display the web page and to load any necessary scripts.

An everyday example for understanding

Imagine you go to the supermarket and you have 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 cart and pay at the checkout. 

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

Data economy not only helps with performance optimization.
Because a conscious use of resources also contributes to making your website more sustainable. Read the articles on the topics How green is WordPress ? and Green Hosting.

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>

Compressed: 

 <!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;
}

Compressed:

 /* 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). With this, website operators today have the possibility to use HTML and CSS in an extended way. 

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);

Compressed: 

 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 nicely how the minification of HTML, CSS and JavaScript code works. As an advanced and professional user, you can also perform this compression manually and use a tool such as linkcode-generator.de. As a WordPress user, special "Minify Plugins" can do this work for you. This not only saves time, but also works fully automatically.

5 Minify plugins for WordPress

In the following list, I have listed five popular miniaturizations plugins that do the work of compressing HTML, CSS and JavaScript for you.  

#1 Merge + Minify + Refresh

merge minify refresh

As the name of the Plugins Merge + Minify + Refresh (Merge + Minify + Refresh) says, the focus of this tool is entirely on compressing CSS as well as JavaScript code. 

This plugin combines Cascading Style Sheets (CSS) and JavaScript files into individual groups. These, in turn, are minimized with Minify for CSS and Google Closure for JavaScript.  

After the installation in WordPress the Plugin Merge + Minify + Refresh offers you some settings to optimize the loading time of your website.

merge minify refresh wordpresspng

Among other things, you can choose here whether CSS files and JS files should be merged or not. In addition, whether the compression should be done via WP-Cron and whether the data should be cached outside or compressed inside a gzip file. 

A very useful function is the so-called "HTTP2 Server Push". The server sends several answers for one query to the corresponding browser. 

The 3 most important functions of Merge + Minify + Refresh Plugins: 

  • Merging / compression of CSS and JavaScript
  • HTTP2 server push
  • Multisite

#2 WP Super Minify

wp super minify

With the Plugin WP Super Minify can be used to shrink and cache CSS and JavaScript files. The accelerated loading of these files is subsequently enabled via Minify PHP Framework. 

The special thing about this plugin is that it is open source. This means the source code of the tool is open and can be used and further developed by any user.

In the settings of WP Super Minify there is not much choice for users. You can only see the settings for the compression of JavaScript and CSS.

wp super minif wordpress

Key features of WP Super Minify Plugins: 

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

#3 Fast Velocity Minify

fast velocity minify

The Plugin Fast Velocity Minify allows load time optimization for developers and advanced users. It reduces HTTP requests by merging CSS and javascript files on the one hand, and minimizes files with PHP Minify on the other. 

After installing Minify plugins, you will find numerous settings in the WordPress backend, which may be a bit overwhelming for some users. The good thing is: Many default settings are already predefined, so it's enough for non-experts to plugin activate it.  

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

fast velocity minify wordpress

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
  • Exclude files and scripts
  • static cache files
  • WP CLI Support
  • Compatible with a variety of caching plugins

#4 Autoptimize

autoptimize

The WordPress -Plugin Autoptimize 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 site . 

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

Important for RAIDBOXES customers

Autoptimize is not compatible with other caches, such as the RAIDBOXES server cache. We therefore strongly advise against the use of Autoptimize on our system!

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.

autoptimize wordpress

In the tab "JS, CSS & HTML" you can choose between different optimisation 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-optimisations, e.g. for Google Fonts, for Emojis as well as for loading files via third party domains, can be made.  

The most important functions of Autoptimize

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

#5 WP Speed of Light

wp speed of light

The Plugin WP Speed of Light is also a WordPress -Plugin, which combines HTML, CSS and JavaScript files. The powerful Plugin also has cache and gzip compression, database cleanup system and also htacces optimization. 

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

wp speed of light wordpress

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 optimisation

The plugins in direct comparison

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
Autoptimize WP Speed
of Light
Free of chargeyesyesyesyesyes
Suitable forBeginnerBeginnerAdvanced + ProfessionalsBeginner + AdvancedBeginner + Advanced
HTML compression nonoyesyesyes
CSS compression yesyesyesyesyes
JavaScript compressionyesyesyesyesyes
Rating4/53/54/55/54/5

Final thoughts

Reducing HTML, CSS or JavaScript files can increase the load time of your website by a few milliseconds. You can choose from a number WordPress of very useful and free plugins options.  

Even if this adjustment screw is only a small part of your on-page optimisation, 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.

Picture: Paula Schmidt | Unsplash

Sven Scheuerle - Independent freelancer and passionate affiliate marketer - has been working in online marketing for many years. He is also a blogger and regularly posts on his blog BLOGGiraffe.de about self-employment in online business.

Comments on this article

Minification is really a great way to reduce loading time. I found the two plugins that do this very well:
1. Wp-Optimize
2. hummingbird

As I know, WP Rocket is also a good plugin but never used it myself so I can't tell how good it is for minification.
But sometimes minification makes break something on your website. So be careful.

Post a comment

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