Should i minify my css

But they are different, and I want to explain how:. Alters the content of code. This reduces the code file size by removing unwanted spaces, characters and formats, resulting in fewer characters in the code. It can optimize the code by changing the variable securely to use even fewer characters. Doesn't actually change the content of the code - well, unless we consider binary files such as images, which we are not covering in this research. When the browser is requested, it reduces the file size by compressing the files before serving the browser.

This is essentially the same as Manifestation. To 'uglify' a JavaScript file is to minify it using Uglify. Ability improves performance while reducing readability. This is the process of translating data called plain data, into encoded data. This encrypted, or encoded, data is known as zero text, and requires a secret key to decrypt it.

Browser cannot execute encrypted code. Encryption is a security feature, and does not necessarily reduce the size of a file. This process is done to hide the business logic. The code is modified in such a way that it is not readable by humans.

This makes reverse engineering difficult. Unlike advanced encryption, computers are still able to understand and apply code. Obfuscation is accomplished by renaming variables, functions, and members. Stripping out unnecessary spaces, characters, and formatting from CSS is a step in the right direction, but like unnecessary spaces, we need to figure out what portions of the CSS code itself is not totally necessary in the application.

The end goal is not really achieved if the app user has to download CSS albeit minified CSS containing styles for all the components of the Bootstrap library used in building the app when only a tiny subset of the Bootstrap components and CSS is actually used. Code coverage tools can help you identify dead code — code that is not used by the current page or the application.

Such code should be stripped out during the minification process as well, and Chrome DevTools has an inbuilt inspector for detecting unused code. Once there, click on the option to reload and start capturing coverage. Feel free to navigate through the app and do a few things to establish usage if need be.

You will be presented with a list of loaded resources and coverage metrics for that page or usage session. You can instantly see what percentage of the resource entries are used vs unused, and clicking each entry will also show what portions of the code is used marked green vs.

It also reports that 84 percent of the CSS is unused. This is not an absolute truth, as you will soon see, but it gives a clear indication for where to begin investigating areas to clean up the CSS during a minification process.

I must begin by saying removing unused CSS code should be carefully done and tested , or else you could end up removing CSS that was needed for a transient state of the app — for instance, CSS used to display an error message that only comes into play in the UI when such an error occurs.

How about CSS for a logged-in user vs. You can apply the following techniques to begin more safely approaching unused CSS removal to drive more savings for your eventual minified CSS code.

This technique emphasizes the leverage of code splitting and bundling. Just like we can key into code splitting by modularizing JavaScript and importing just the modules, files, or functions within a file we need for a route or component, we should be doing the same for CSS. Following the same philosophy of eliminating unnecessary code — especially for CSS, since it has a huge impact on when the user is able to see content — one can argue that CSS meant for the orders page and the shopping cart page qualifies as unused CSS for a user who is just on the homepage and is yet to log in.

We can even push this notion further to say CSS for portions below the fold of the homepage portions of the homepage the user has to scroll down to see can qualify as unnecessary CSS for such a user. This extra CSS could be the reason a user on 2G most emerging markets or one on slow 3G the rest of the world most of the time has to wait one or two more seconds to see anything on your web app even though you shipped minified code! You can run it as a standalone npm module or add it as a plugin to your bundler.

To try it out in our sample project, we will install it with:. Just like we did for cssnano, add a plugin entry for Purgecss after the one for cssnano in our earlier postcss. Inspecting the new output file, we can see that the. Again, you want to tread carefully with deleting CSS that these tools flag as unused.

Only do so after further investigation shows that they are truly unnecessary. In our sample project, we might have intended to use the. As we just saw, Purgecss helped our CSS minifier remove these styles since it detected they were unused. It turns out that you can do so with CSS attribute selectors. CSS rules for an error message element that is hidden by default and then visible at some point can be created like this:.

CSS attribute selectors help us wave a magic wand to signal the preservation of rules for styling our error message elements that are not available in the DOM at build time. This design construct might not work for all CSS minifiers, so experiment and see if this works in your build process setup. We are building more complex web apps today, and this often means shipping more code to our end users. Code minification helps us lighten the size of code delivered to app users.

Minifying CSS is the least we can do. We can take it further, too, by eliminating dead CSS from our projects. Realizing that CSS has a huge impact on when the user sees any content of our app helps us prioritize optimizing its delivery. Finally, adopting a build process or making sure your existing build process is optimizing CSS code is as trivial as setting up cssnano with Parcel or using a few plugins and configuration for webpack or Rollup.

Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It also helps others who might later work on the assets. While this is a plus in the development phase, it becomes a negative when it comes to serving your pages.

Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit. The minified file version provides the same functionality while reducing the bandwidth of network requests.

Minification has become standard practice for page optimization. Register Now. Minification is a major component of front end optimization FEO , a set of tools and techniques that reduce file sizes and the number of associated web page requests. However, performing and managing minification can be cumbersome. Manual minification is a bad practice and becomes virtually impossible where large files are concerned.

Keeping them in sync is often burdensome. A content delivery network CDN provides automated minification, relieving you of the overhead required to minify your own files. You keep your original, uncompressed files on your main server, while the CDN automatically stores minified variants on its caching servers and PoPs—keeping them in sync with source modifications.

This is done without requiring any server configuration on your end, while at the same time protecting your organization—large or small—from major threats e.