Websites are created with code in a format that humans can read. This formatting makes the code more readable to the human eye, but it introduces spaces that, well, take up space that a web browser doesn’t need. Computers don’t need the code in a human readable format.

One popular practice is to minify that code. Minifying your code is usually safe, but if you’re not careful it can cause problems. In this article we’ll discuss minification and learn why it is wreaking havoc on so many websites.

What is Minification?

Minification is a process to reduce the file size of your websites with the intention of speeding up the loading time. It removes whitespace and unnecessary characters from your HTML, CSS, and Javascript code (the files that are sent to your visitor’s browsers). This includes removing unneeded line-breaks, code such as comments, and even shortens variables and function names.

Regular files include spaces to make the code readable to the person writing the code, like you see in the image above. This is the source code from my test site (I’ve blurred it on purpose, in case anyone is wondering).

This is the same test site with the source code minified. All of those extra spaces are gone, but it’s more difficult for the programmer to read the code.

This reduces the size of your web page, which reduces the number of external requests and improves your website’s loading speed, which is important for your site’s SEO. Faster loading also improves the user experience (UX) of your website and helps keep your readers happy.

Minifying is different from compression. The files are not compressed, so they don’t have to be decompressed by the user’s browser. Instead, they run as they are with no issues.

The process looks like this:

1. A page or post is created
2. Files of the page or post are minified
3. A visitor’s browser requests files to display the page or post
4. Minified files are sent to the requesting browser
5. Minified files are displayed within the browser

Some feel that the improved performance is too small to be worth the trouble. Other efforts, such as optimizing images, can see far greater gains in your page performance. However, it can make enough of an improvement to be worth it. Even if the gain is small, minification will reduce your file size, making it worth considering. (caveat; As previously mentioned, make sure you optimize images, have robust hosting and ensure that you don’t mix up your caching plugins to such a degree that minification is being performed by multiple solutions – especially in the case of the latest versions of Divi Theme)

Advantages of minification include:

• Fewer unnecessary files to retrieve and download means the website will load faster
• Less data is transmitted over the network reduces bandwidth cost
• Minified content can be reused, so it only needs to be minified once which lowers resource usage
• Files do not need to be decompressed before using
• Faster loading improves UX and SEO

We often hear about the benefits, but we rarely hear about the problems. Sometimes the minification process can wreak havoc on your website.

What Usually Breaks?

If all minification did was remove whitespace it wouldn’t be that beneficial. The whitespace is miniscule if a server uses Gzip compression. Fortunately, and sometimes unfortunately, minification can concatenate your files.

Concatenation is when files are combined. HTML, CSS, and Javascript are combined as single HTML, CSS, and JS files. The files are delivered in bundles and then unpacked by the browser.

This doesn’t affect offsite code such as Google ads and Google fonts, but concatenation is the largest space savings that minification plugins perform and makes them worth using. Combined with Gzip, minification/concatenation create a speed gain that some feel makes it worth the trouble.

Unfortunately, concatenation can break your website if it’s not done correctly. Here are some of the problems that can occur if your site is broken by concatenation:

• Responsive navigation elements disappear
• Email or other signups stop working
• Page shows no HTML stylization
• Delayed pages rebuild slowly
• Page elements, such as menus, disappear
• White screen instead of the website (typically known as the white screen of death)

It’s still worth minifying your files because these kinds of problems can be avoided. Let’s take a look at some tools you can use to minify your files without breaking your website.

How to Minify Your Files without Breaking Your Website

There are lots of reasons why minification would not work. Websites have a lot of components including your content, plugins, theme, and even your server. Each of these are unique, meaning that minification with not automatically work for every website every time. Because of this, minification requires trial and error.

The interactions between CSS and JavaScript can become complex. Themes and plugins are created by various developers and can be combined in millions of combinations. Plugins or other minification tools cannot take all of those possibilities into account. This means you have to tune the site and test the results manually and carefully.

Here are a few tips for minifying your files without breaking your site:

• Always backup your website before making changes.
• When using plugins, don’t turn everything on at once. Try the features one at a time and test the site before trying the next feature.
• Don’t use multiple plugins to minify your files.
• When using tools such as PageSpeed Insights, be careful about implementing everything. For example, it might not be possible to eliminate all render-blocking resources.
• If specific files are causing problems with minification, add those files to the ignore list within the plugin’s settings.
• Start with minifying for your CSS. If you’re using a plugin use its automatic mode first. If automatic mode doesn’t work, check the web browsers error console to confirm that the optimization isn’t working. You’ll need to adjust the plugin’s settings or minify manually. Try minifying first without concatenation.
• Once CSS is optimized, then try JavaScript minification. If you have errors with JavaScript, try the “combine only” option if the plugin has it. If it continues to generate errors, there could be bugs or an incompatibility with your theme or plugins that’s keeping your JavaScript from minifying.

Here are several ways you can safely minify your files.

Manually

You can perform minification manually. Here are a few apps to help:

• HTML – HTMLMinifier
• CSS – CSS Minifier, CSSNano, csso,
• JavaScript – Closure Compiler, UglifyJS
• Multiple – Minify, Refresh-SF
• Server – PageSpeed Module

How Do You Know What to Minify?

Tools such as Google’s PageSpeed Insights give you a list of problems to solve in order to speed up your website. This almost always includes minification.

Enter your website’s address and click the button to have PageSpeed Insights to analyze your website. Once it’s complete it will give you a list like the one in the image above. Click on each element to see more information. It will show you the exact files to minify.

Plugins

The easiest way to minify your files is with a plugin. They usually have automatic settings and can be customized for your specific needs. Some are specifically minification plugins while others are optimization plugins. Here are the most popular:

• Autoptimize
• Fast Velocity Minify
• W3 Total Cache
• WP Super Cache
• WP Fastest Cache

Divi Minifies Automatically

Some WordPress themes have minification built in. As seen in the image above, Divi minifies your CSS and Javascript files automatically. The advantage of Divi controlling the minification is it can ensure there are no errors after the minification process. Divi’s minifying feature reduces file sizes by around 13%, which can make quite a bit of difference to loading times. Its combining feature reduces file sizes by around 60%.

Disable Minification

If you run into any of the issues we’ve discussed you’ll need to disable minification. If you want to disable minification completely then you’ll need to first clear the cache that the plugin has created and then deactivate the plugin. You can disable it for one file at a time by adding the file to the list. Many plugins have these features. The image above is W3 Total Cache, which includes a place to add pages or files to ignore when minifying.

It’s possible to minify just CSS, JavaScript, etc. while ignoring the other file-types. It’s also possible to just combine and not minify. The settings for W3 Total Cache give you these options.

Disable Minification and Static CSS in Divi Theme

If you want to disable minification or clear the caching in divi theme navigate to Divi>theme options>builder

Then go to the General Tab in the same page and scroll to the bottom you will see minification options. Just hit the buttons to disable them.

Ending Thoughts

Minification is a fast and easy way to help speed up your website. Done incorrectly, minifying your website can break it. The key is to slow down and take it a few steps at a time. Done correctly you can avoid the issues that concatenation and compatibility issues can cause, and the benefits can far outweigh the effort. If you are having issues around Managing the Divi Theme, updating or just general Divi Theme issues around memory, caching or server errors, take a  moment to read these solutions. Remember, every theme has its issues and as a community, we are here to help solve them as best we can.

We want to hear from you. Have you run into issues minifying your website? Let us know about your experience in the comments below.

Randy A Brown

Randy is a freelance WordPress and eCommerce writer from east TN. If he's not reading or writing, then he's probably picking out tunes on his Strat.