Having a fast website is no longer a luxury. It is an essential feature of your website, even if you are a smaller website.
Did you know that the majority of people will leave a website if it loads slower than 3 seconds?
Many companies see a remarkable improvement in their visitor metrics if they optimize the speed of their websites.
But let’s get back on topic. You’re probably here because you are using WordPress. And you probably want to have a faster WordPress website too. Actually, it’s not hard to minify WordPress. Lucky you! Let me explain.
Since the WordPress community is big and there are many plugins for optimization, there are many options out there to make your website faster. You don’t even need to be a professional web developer to make your WordPress website screamingly fast.
Yes, you read that right, you can do this! In this article, I hope to guide you through one aspect of the topic called optimization. This aspect is called Minification.
By the way, if you want to have a full-blown guide on how to optimize your WordPress website and make it blazingly fast, check out my guide on How to speed up WordPress in 6 Steps.
What is Minification?
Before we dive into Minification, I’ve to give a small explanation of how the software and programming behind WordPress works.
A small introduction to languages used in WordPress
WordPress, as all software and websites, is created using programming languages. There are many programming languages out there, but WordPress is built using the following ones:
- PHP: PHP is the language that is run on the server, and allows WordPress to have dynamic parts. For example, adding posts or having people send a form on your website.
- JavaScript: JavaScript is a language that is run on the browser, and enhances the interaction on a website. For example, have you seen this fancy FAQ sections on websites? Where you click on a FAQ and it slides open? JavaScript makes this sliding functionality possible.
- HTML and CSS: These are technically not programming languages, but mainly determine the structure, layout, colours, typography and looks of the website. These are used by any website.
As you know, WordPress can have plugins and themes which determine extra functionality and the looks of a website. These plugins and themes often have many PHP, CSS and JavaScript files.
Why are you telling me this?
You may be wondering why I am telling this. The reason for it is simple. because with minification we are dealing with CSS, HTML and JavaScript files.
It’s actually easy to minify WordPress, but it’s also important to understand what these files do.
Many plugins and themes use CSS and JavaScript files to style a webpage (colours, layout, typography, and so forth) and add functionality. Once you enter a website in your browser, these files need to be loaded from the server.
And here comes the caveat. If you have many of them and they are big, it will impact how fast a website will load. Negatively, of course.
Later on, I will share a simple trick how you can see the number of files loaded.
Getting back to minification. Let’s minify WordPress!
So what is minification? It’s pretty simple! Minification is making the JavaScript, CSS and HTML files smaller.
And because these files are smaller, your browser needs to download less from the server. Literally fewer kilobytes. And that makes your website faster!
Often, minification is also used to combine files, but technically this is called concatenation. You may find them difficult words, but sometimes the technical verbiage can’t be avoided.
If you combine files, your (or any visitors) browser also has to make fewer requests to the server where a website is located. And you may guess it, this may also make the website load faster.
Now, modern websites are better in handling multiple requests at the same time. But that is a topic for another time.
A WordPress Minify Plugin: Autoptimize
Now, you may be using a nice WordPress theme and a couple of plugins on your WordPress website. It all looks nice, but your WordPress website is a bit slow.
That’s because a lot of these themes and plugins put under-optimized JavaScript and CSS files out there. And the worst plugins and themes out there also have a lot of these files!
And they all need to be downloaded by your website visitors….
Luckily, there are a couple of WordPress plugins which can solve this problem in a matter of minutes. I’ve tried many of them, and there is one plugin which really stands-out.
This plugin is called Autoptimize. It works on most sites out of the box, without any errors. Yay! Let’s minify WordPress!
Using Autoptimize
Installing and setting up Autoptimize is easy. Let’s go for it!
1. Installing Autoptimize
Login to your WordPress, then go to plugins. Click add new and search for Autoptimize.
Install and activate the Autoptimize plugin by clicking Install Now, and then Activate after some waiting. That was easy sofar.
2. The Best Settings for Autoptimize
Once you activated the plugin, a new setting screen will be added. It’s in your WordPress Admin Menu, under Settings, Autoptimize. Let’s go there!
From here, it is really simple:
- Enable the Optimize JavaScript Code checkbox.
- Do the same for the Optimize CSS Code checkbox.
- Scroll down, and again the same for the Optimize HTML Code checkbox.
- Scroll even further down, and hit Save Changes and Empty Caches.
- And you are done! You did minify WordPress! It was that easy.
As you see, Autoptimize also has some other tabs. These are outside the scope of this article, but feel free to have a look at them.
Now let’s look how we can measure the impact of using Autoptimize in your very own browser.
A developers trick to examine your website files
Okay, I must admit something. I used to work for many years as a professional WordPress Developer. And I want to share one of the tricks from my toolbelt. It’s called the developer tools and most browsers have it.
1. Open the Developer Tools
Go to the website you wan to analyse. Using Chrome or Firefox, you can hit F12 (on Windows) or do a right mouse click, and click on Inspect, or Inspect Element.
A screen will pop-up which may look overwhelming to you first. It’s a screen where you can examine the public code of a website.
2. Go the network tab
Both in Firefox and Chrome, you will have several tabs. There is one tab called Network. Click on that tab.
You will see a list with some files (or urls) that your browser needs to request, or better said, needs to load.
By the way, for this example, I am using Enfold, a very popular theme on ThemeForest (a marketplace for WordPress Themes). And the perfect example of a bloated theme that pushes too many CSS and JavaScript files.
3. Reload the website
Before we can analyse, we need to reload the Network tab. This will fill-up this tab with all files that the browser needs to download.
As you can see, now a list of many different files is visible under the Network Tab. You even can see what kind of files they are, such as CSS or JavaScript (JS).
In the bottom, you can see how many requests the browser needs to make and how big the files are in total.
So, there are way too many files (125) and we need to download 1.63 MB! Uuugh, this WordPress theme is the opposite of optimized. Let’s see the difference if I turn Autoptimize on as we did before.
4. Turn on Autoptimize and compare the difference.
In this example, to minify WordPress files we still need to change some Autoptimize settings.
I went to the back-end and enabled the Optimization of HTML, JavaScript and CSS in the settings of Autoptimize. Let’s now go back to the front-end and reload the page.
As you can see, we see that many of the files from the screens before are removed, and a couple of combined files with names like autoptimize_124erqwe.css are there. Looks like Autoptimize did its magic!
And this is much better, huh? We’re only requesting 23 files now and we shaved over 200kb from the website. The website also loads slightly faster.
If you want to have more information and a speed score for your website, you can also use the fantastic tools from Pingdom. It’s like the network tab, but much better.
What Autoptimize is doing under the hood
So, all this writing may have made you curious. For those who live on curiosity, I’ll explain what minification does into more detail.
Combining and minifying code
As we saw in the above example, Autoptimize combines code into fewer files. But it also makes the actual code smaller. The process is pretty simple.
Autoptimize takes code like the example below (the code may look difficult to you, but just ignore that for now):
var Waterfall = {
init: function () {
this.lightbox();
this.woocommerceGallery();
},
// Set-up the lightbox
lightbox: function () {
jQuery('.waterfall-lightbox').find('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"], a[href$=".svg"], a[href$=".webp"]').swipebox();
}
}And compresses it to the code below (it’s much more condensed now):
var Waterfall={init:function(){this.lightbox(),this.woocommerceGallery()},lightbox:function(){jQuery(".waterfall-lightbox").find('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"], a[href$=".svg"], a[href$=".webp"]').swipebox()}};Additionally, when Autoptimize is doing its thing to minify WordPress, it combines the code from all these files into a few files. As you can imagine, these files are a lot smaller than the original files.
What is Empty Cache?
By the way, are wondering what Save Changes and Empty Cache means (within the Settings Screen of Autoptimize)?
It actually means that Autoptimize will rebuild your minified files. In other words, minify them again. Autoptimize minifies the CSS, JS and HTML files and stores them in a so called cache, which is then loaded instead of the original files.
But when do you think you need to use this function? The answer is simple: each time new files are added to your WordPress website. And that is happening each time you add a new plugin, add a new theme or switch from theme.
In order to minify WordPress again, just hit the Save Changes and Empty Cache button and you’re all good.
You made it!
Congratulations, hopefully, you have grown a lot wiser concerning minification, developer tools, the programming languages used in WordPress and how to minify WordPress.
And probably your website is faster too.
If minification made you curious, check out my complete guide on How to speed up WordPress in 6 Steps. You’ll learn about many other techniques for speeding up your website.
If you have any questions, comments or anything else to say, I’d love to hear you. You can leave your comments below.