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.
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.
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!