As a website owner, CSS is one of your handiest tools. With it, you can style your pages and content to appear exactly as you want. Plus, CSS is relatively easy to get the hang of once you’re well-versed in HTML.

Unfortunately, too much CSS can sometimes be a bad thing when it comes to page load times. If used excessively, large CSS files can weigh down your site, slowing performance and sending visitors elsewhere.

Still, to compete with the growing number of impressive technical websites, you might think you need to choose between an engaging website and a fast website.

But, worry not: There are many quick wins and best practices to boost load times while keeping your design vision intact, including minifying your CSS. In this post, you’ll learn what it means to minify your CSS, why it matters, and how to do so efficiently.

Download Now: Free Intro Guide to HTML & CSS

What exactly do we mean by “unneeded code”? With CSS (and most other coding languages), developers have introduced formatting and syntactic best practices in order to make the code more readable by humans. These practices help programmers write, maintain, and debug their programs.

Consider the CSS in the example below:

 
/* heading elements */

body {
    color: #33475b
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.75rem
}

h2 {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 2.25rem
}

h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.125rem
}

/* other elements */

p, span {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem
}

blockquote {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.375rem
}

ol, ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

button {
    appearance: none;
    font: inherit;
    margin: 0
}

As you can see, this code contains line breaks, spaces, indents, and comments to make things more readable and understandable for us. However, the browser doesn’t need any of this information to run the CSS code — while parsing the files, it ignores these extra whitespaces and comments.

The issue here is that this extra formatting data makes CSS files larger than they need to be to work as intended. And, larger files generally mean more time and resources needed to process the files, giving the impression of a slower website or web application.

Here’s where CSS minification comes in — it strips out this extra code, resulting in a smaller CSS file that works exactly the same as the original. In addition, minification may also alter the code in various ways — ;like shortening variable names and deleting redundant or unused code — to shrink the file size even more.

Here’s what the CSS example above looks like after minification:

 
body{color:#33475b}h1{font-size:2rem;font-weight:700;line-height:2.75rem}h2{font-size:1.625rem;font-weight:700;line-height:2.25rem}h3{font-size:1.5rem;font-weight:500;line-height:2.125rem}p,span{font-size:1rem;font-weight:400;line-height:1.75rem}blockquote{font-size:1.5rem;font-weight:400;line-height:2.375rem}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button{appearance:none;font:inherit;margin:0}

It may be less readable to us, but to a computer, it looks (and works) the same.

We can apply minification to other languages too, not just CSS. For example, HTML and JavaScript, the other two foundational languages of the web, also follow visual formatting conventions and can be minified.

Why You Should Minify CSS

Today, minification is a common practice on websites and web applications for one main reason — it makes them faster. The basic principle is simple: The less code there is to process, the less time it takes to load the web page.

To be more specific, there are two main ways that CSS minification reduces load time. First, smaller files take less time and resources to fetch and compress in the origin server, send to the client, and finally download by the browser, simply because there’s less information to deal with.

The second reason has to do with how browsers render web pages. After the browser downloads a web page, it parses the page’s HTML file top-to-bottom before displaying it. When the browser runs into a link to an external CSS file, it puts the HTML parsing on hold to process this external CSS code. Until the browser has processed all linked CSS, users won’t see any page content. For this reason, CSS is called a “render blocking” resource.

If the web page is simple and there’s only a small amount of CSS, this isn’t a big deal. If the CSS files are large, however, visitors may notice a rise in load time. That’s why it’s best to reduce CSS file sizes with minification, especially if your site is visually complex and requires a lot of CSS. With fewer render-blocking resources to parse, visitors will experience less time to first contentful paint.

CSS minification probably won’t instantly make your website blazing fast. Still, the chance of a bounce increases 32% from 1 second to 3 seconds of load time, so any small performance improvement makes a difference. Plus, faster pages also improve usability for mobile visitors and factor significantly into your search engine ranking without altering your page content at all. So, if you weren’t already sold on minification, I hope you are now.

How to Minify CSS

There are several ways to minify your CSS that vary in technicality. In this section, we’ll cover some different methods, starting with the simplest:

Online Minification Tools

There are several websites that can minify your CSS (as well as HTML and JavaScript) files for free. Popular options include CSS Minifier and the Dan’s Tools minifier.

These websites all work similarly: Paste in your formatted CSS, toggle any available options, and the website will output a minified version which you can copy and paste into your own file.

an online tool to minify CSS

Image Source

Online minifiers are great for demonstrating how minification works and for very small projects, but they don’t scale up to larger projects with many files. You’ll have to manually copy the code and paste it into your code editor for each file you want to minify. Also, these tools require internet access, which you might not always have.

Therefore, we wouldn’t recommend this as your go-to method for minification. We’ll get into more advanced options below if you plan to implement minification in larger projects.

Command Line Tools

Those comfortable with the command line interface can also use a command-line minifier. These work similarly to online tools with the advantage of running locally, so you don’t need an internet connection.

One option is to use an npm package for minifying CSS. If you already have npm installed on your machine, you can download the css-minify package with the command:

 
npm install css-minify -g

You can then minify a single file with the command:

 
css-minify --file filename

… where filename is your file, ending with the extension .css. Or, minify all CSS files inside a directory with the command:

 
css-minify -d sourcedir

… where sourcedir is the directory name. All minified CSS files are stored in a directory called css-dist by default. You can specify a different destination directory with the command:

 
css-minify -d sourcedir -o distdir

Alternatively, you might try the minify package, which works on HTML, CSS, and JavaScript.

CDN

If you use or are considering a content delivery network (CDN), know that these services can minify your website files for you before shipping them to browsers. This is the most hands-off way to handle minification, since that job is placed on the CDN and won’t affect your source files stored on your origin servers.

WordPress Plugins

Run a WordPress site? Optimization plugins can minify your code, including W3 Total Cache, Hummingbird, and Autoptimize. These plugins are all made to be codeless and easy, letting you optimize your site’s files, images, and more by just clicking a couple of buttons.

Software Build Tools

If you’re using a build tool for your project, it likely has a native minification function or an integration that you can leverage to regularly minify your project files. Review your tool’s documentation or integration library to work minification into your process.

Minify your CSS for a better user experience.

I like the word “minification” — it makes you sound like a mad scientist taking a shrink ray to your bulky code. And your visitors will like it too, since it gives them a better experience and a smoother time navigating your website.

Don’t get me wrong, CSS is great. Without it, the web would be a pretty boring place. But it is possible to have too much of a good thing, and too much CSS can ultimately slow your pages and hurt the user experience. CSS minification is one valuable workaround that saves everyone time without impacting your workflow or page content.

New Call-to-action

 css introduction

Originally published Nov 8, 2021 7:00:00 AM, updated November 08 2021

Topics:

Bootstrap & CSS