Why to Minify your JS and CSS Files

“It’s all messed up,” I heard an email marketer say frantically as she checked one of her email templates. Looking at the template, I could see that the styling appeared to be off as elements were misaligned and certain text spilled out of containers.

“What happened here?” I asked while wondering how these things always seemed to happen at the beginning of the week.

“Engineering changed the minify file for the template and now we’re missing a bunch of the template”, she responded. Thinking about what she said, I started to wonder about what really happened, and why so many people misunderstood what minifying really is.

What do people mean when they say that they are minifying files? Is it something to do with compression, or maybe getting rid of all of those spaces and tabs in code? Why do we minify files? When it comes to minifying files, the main goal is to decrease file sizes and reduce traffic to and from the server.

Why do we care about these goals? We care for two words: User Experience. One of the most important aspects of a website for users is page load speed. Especially with the turn towards mobile users, page load speed is crucial to keeping customers happy.

There are many elements that go into a quick page load including use of CDN, changing your requests to HTTP2 and ensuring non-blocking code in your HTML, but an important and easy factor for quick page loads is file size and server request frequency.

Both file size and request frequency are directly impacted by minifying files. Minifying at its core is a very simple process that:

1) Decreases file size by changing files from human readable to machine readable form

2) Combines files to decrease calls to the server

These two steps are known as minification or minimization and concatenation. The first step, minification is the process of removing any extra whitespace including spaces, tabs and indentation, comments and shortening variable names.

The modern building blocks of web development: HTML, CSS and Javascript are all written in a human readable format with spaces and (hopefully) clear variable naming. Machines do not need context or comments to be able to understand our code, so web developers use a workflow that minimizes the amount of characters stored in a file. This is done by removing comments, removing tabs, indents, spaces and other whitespace, removing semi-colons and changing variable names to be shorter. All of these can be done for file size reductions of up to 60%!

By minifying files, we solve the issue of unnecessarily large file sizes, but how do we decrease calls to the server? This is done with the second step of the minification process; concatenation. Much like the concatenation process you use to join strings together in Javascript, concatenation of files is the process of combining many files into one. This can be done with CSS or JS, and leads to page load performance improvements as it turns many calls to the server for files to one call.

Combining files leads to fewer files and therefore fewer calls to the server to get resources, but has some potential issues. Minifying can cause issues with page renders and feature functionality by changing the cascading behavior of CSS files, and highlighting a lack of enclosing global variables in proper block or function scope for Javascript files.

If CSS files are concatenated in certain orders, the property values may not be what you expect. If two CSS selectors have the same specificity, then the last declared value ends up being applied. This matters when you switch the order of CSS files when concatenating which may lead to changing the last declared property value. This can cause anything from a difference in font-color to a change in alignment of your page’s layout.

For Javascript, name conflicts with global variables can cause variables to change values or lose their values altogether. Again, you need to make sure that your code is as clean as possible when concatenating files and TEST many times before deploying files created by a minifying workflow.

Are there other benefits for minifying files? Yes, some email services will only allow a certain amount of memory for their emails. Anything over this limit will be “clipped” or removed from the email. This can cause parts of emails to be absent which is not great if you are trying to reach out to potential new customers, or share information with existing customers. Minifying is a great way to avoid clipping as it decreases file sizes, making it less likely to exceed maximum file sizes.

Minifying files is a great tool to have in your web development workflow. It helps decrease file size and strain on your servers while also leading to quicker page loads and less data consumption for users accessing your website. While there are some pitfalls in calling files out of order, with the right testing, minifying is an overall great way to improve your website or app!

Resources

https://www.imperva.com/learn/performance/minification/

https://www.cloudflare.com/learning/performance/why-minify-javascript-code/

https://wp-rocket.me/blog/minification-explained-in-plain-english/

https://blog.logrocket.com/the-complete-best-practices-for-minifying-css/