How to Minify CSS and Speed Up Your Website

As a web site owner, CSS is one of your handy tools. With it, you can style your pages and subject to appear precisely as you want. Plus, CSS is relatively easy to get the cling of once you ’ ra well-versed in HTML .
unfortunately, excessively much CSS can sometimes be a regretful thing when it comes to page load times. If used excessively, big 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 web site and a fast web site .
But, worry not : There are many quick wins and best practices to boost warhead times while keeping your purpose 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.

What is CSS minification?

CSS minification is the process of removing unnecessary code from CSS source files, with the goal of reducing file size without changing how the CSS file executes in the browser. By stripping unnecessary data from the CSS code, minification helps the browser download and summons these files more cursorily, increasing page performance and improving exploiter know .
What precisely do we mean by “ unneeded code ” ? With CSS ( and most other gull languages ), developers have introduced format and syntactic best practices in order to make the code more clear by humans. These practices help programmers write, maintain, and debug their programs .
Consider the CSS in the model 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 clear and apprehensible 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 format data makes CSS files larger than they need to be to work vitamin a intended. And, larger files generally mean more time and resources needed to process the files, giving the depression of a slower web site or web application .
here ’ south where CSS minification comes in — it strips out this supernumerary code, resulting in a smaller CSS file that works precisely the lapp as the master. In accession, minification may besides alter the code in diverse ways — ; like shortening varying names and deleting excess or fresh code — to shrink the file size even more .
here ’ s what the CSS model 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 clear to us, but to a computer, it looks ( and works ) the same .
We can apply minification to other languages besides, not barely CSS. For exercise, HTML and JavaScript, the other two foundational languages of the web, besides follow ocular format conventions and can be minified .

Why You Should Minify CSS

today, minification is a coarse practice on websites and web applications for one main reason — it makes them faster. The basic principle is elementary : The less code there is to process, the less time it takes to load the vane page .
To be more particular, there are two main ways that CSS minification reduces load meter. First, smaller files take less time and resources to fetch and compress in the origin waiter, send to the customer, and finally download by the browser, plainly because there ’ mho less information to deal with .
The second reason has to do with how browsers render vane pages. After the browser downloads a vane foliate, it parses the page ’ randomness HTML file top-to-bottom before displaying it. When the browser runs into a connection to an external CSS file, it puts the HTML parse on detention to process this external CSS code. Until the browser has processed all linked CSS, users won ’ t see any page message. For this rationality, CSS is called a “ render blocking ” resource .
If the web page is elementary and there ’ mho entirely a modest amount of CSS, this international relations and security network ’ t a big deal. If the CSS files are bombastic, however, visitors may notice a rise in load time. That ’ sulfur why it ’ randomness best to reduce CSS file sizes with minification, particularly if your locate is visually complex and requires a bunch of CSS. With fewer render-blocking resources to parse, visitors will experience less time to first contentful paint .
CSS minification probably won ’ thyroxine instantaneously make your web site blaze firm. however, the find of a bounce increases 32 % from 1 second to 3 seconds of load fourth dimension, so any little operation improvement makes a dispute. Plus, faster pages besides improve serviceability for mobile visitors and divisor significantly into your search locomotive ranking without altering your page content at all. sol, if you weren ’ thyroxine already sold on minification, I hope you are now .

How to Minify CSS

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

Online Minification Tools

There are respective websites that can minify your CSS ( american samoa well as HTML and JavaScript ) files for complimentary. popular options include CSS Minifier and the Dan ’ sulfur Tools minifier .
These websites all work similarly : spread in your format CSS, toggle any available options, and the web site will output a minified version which you can copy and paste into your own file .

Image source
on-line minifiers are big for demonstrating how minification works and for identical belittled projects, but they don ’ deoxythymidine monophosphate 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 charge you want to minify. besides, these tools require internet access, which you might not constantly have .
consequently, we wouldn ’ t commend this as your go-to method for minification. We ’ ll get into more promote options below if you plan to implement minification in larger projects .

Command Line Tools

Those comfortable with the command line interface can besides 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 software 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 annex .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 option. You can specify a different destination directory with the command :

 
css-minify -d sourcedir -o distdir

alternatively, you might try the decrease 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 web site files for you before shipping them to browsers. This is the most hands-off room to handle minification, since that occupation is placed on the CDN and won ’ triiodothyronine affect your beginning files stored on your beginning servers .

WordPress Plugins

Run a WordPress locate ? 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 ’ randomness files, images, and more by just clicking a couple of buttons .

Software Build Tools

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

Minify your CSS for a better user experience.

I like the word “ minification ” — it makes you sound like a brainsick scientist taking a shrink ray to your bulky code. And your visitors will like it excessively, since it gives them a better experience and a fluent time navigating your web site .
Don ’ metric ton get me improper, CSS is great. Without it, the web would be a pretty boring place. But it is possible to have besides much of a commodity thing, and excessively a lot CSS can ultimately slow your pages and hurt the drug user experience. CSS minification is one valuable workaround that saves everyone time without impacting your work flow or page content.