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

Sven Scheuerle Last updated on 21.10.2020
9 Min.
css minification
Last updated on 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

Every website owner who has already used a tool like PageSeepd Insights of Google, knows with certainty this suggestion: "Reduce CSS"

This measure is recommended by PageSpeed Insights when the requests to retrieve the CSS files have a strong influence on the loading time of the website. A detailed explanation of further messages in the tool can be found 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.com . 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 to better understand

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 a lot of time to find every single product and put it into the shopping cart. 

Solution: You tell the supermarket in advance which products you need. The supermarket puts all your ordered products on one shelf so that you only have to put them in the shopping cart and pay at the checkout. 

Result: By putting all the products together on one shelf, you only have to walk through the supermarket once and save an incredible amount of time. Minifying individual codes and scripts of your website works in a similar way. To make sure you understand how the whole thing works in practice, I would like to show you the following examples. 

Data economy not only helps to optimise performance.
Because a conscious use of resources also contributes to making your website more sustainable. Feel free to read the following 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 stylesheet 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). Herewith web page operators have today the possibility to use HTML and CSS extended. 

A standard JavaScript code (wiki.selfhtml.org) looks like the following:

 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 miniaturization of HTML, CSS and JavaScript code works. As an advanced and professional user you can also do this compression manually and use a tool like linkcode-generator.com use. As a WordPress user, special "minify plugins" can do the 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

Like the name of the plugins Merge + Minify + Refresh (Merge + Minimize + Refresh) already says, the focus of this tool is entirely on the compression of CSS and 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 installing the plugin in WordPress Merge + Minify + Refresh offers you a number of settings to optimise 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 + Refreshplugins : 

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

#2 WP Super Minify

wp super minify

With the plugin WP Super Minify CSS and JavaScript files can be resized and cached. 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. Only the settings for the compression of JavaScript and CSS are shown here.

wp super minif WordPress

The main functions of the 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 enables loading time optimisation for developers and 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 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 pluginFast Velocity Minify offers many gadgets and optimisation possibilities.

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 most important functions 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 Autoptimize

autoptimize

That WordPress plugin Autoptimize offers you the easy optimisation 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. 

The auto-optimizationPlugin script, for example, moves 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, for example the server RAIDBOXES cache. We therefore strongly advise against using 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 it is also a WordPress extension which merges HTML, CSS and JavaScript files. The powerful plugin also has a cache and gzip compression, a database cleaning system and also a htacces optimisation. 

In the free version of WP Speed of Light-Plugins all standard features for optimizing your website are available. In the plugins ettings 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 a lot more functions besides the pure compression of files, which you can easily access via the neat backend of the plugin. 

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
AutoptimizeWP Speed
of Light
Free of chargeyesyesyesyesyes
Suitable forbeginnersbeginnersadvanced + professionalsbeginners + advanced learnersbeginners + advanced learners
HTML compressionnonoyesyesyes
CSS compressionyesyesyesyesyes
JavaScript compressionyesyesyesyesyes
Evaluation4/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

Write a comment

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