npm install postcss-cli cssnano --save-dev
What is CSS Minify And Why Use It.?
Websites keep getting more complex, and being able to deliver the most productive experience possible is essential. The easiest win in improving your page load times when it comes to CSS is minification. Basically, minifying the CSS means stripping out unnecessary characters such as white space, comments and line breaks without affecting how it is read by a browser.
Compile and minify Sass (Syntactically Awesome Style Sheets) files for CSS development. Yes, in this blog we are going to walk through how you can minify Sass-generated CSS files both by using the built-in Sass compiler and npm scripts.
Benefits of Minifying CSS
- Faster Load Times: Any piece of content above-the-fold (first screen visible when the page loads) now doesn’t have to wait for every image on a page to download.
- Technical SEO Help & Better Performance: faster websites lead to a better user experience and can help in your SEO rankings.
- Reduced File Sizes → Less Data Usage → Saves Bandwidth specially useful for mobile device
- Smoother deployment: Our minified CSS files are production-ready, which means they serve lightning fast from the server.
When you compile Sass, it will ask if you want to output minified CSS: scss files. And it can be as simple as passing a compressed in the output style.
Step 1: Install Sass
Let’s add some magic to that promptly, with the first step being them installing sass globally.
npm install -g sass
Step 2: Update Your package.json to Minify CSS
Update your package.json file to add a compressed flag to your Sass script in order to automatically minify your compiled CSS. Set up hierarchy:
{
"scripts": {
"sass": "sass --watch input.scss output.css --style=compressed"
}
}
In this script:
- –watch tells Sass to watch your .sass files.
- Minifies the output version of CSS –style=compressed
Step 3: Run Sass Minification Command
When you add the minification script in at your project, you can use this command to compile and minify your Sass files:
npm run sass
This command will build the input. scss, then output to minified output. minified: the css file without any unnecessary spaces, line breaks or comments. This would result in a CSS file that is more clean and loads faster.
Example of Minified Output
Before Minification:
$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;
body {
font-family: $font-stack;
color: $primary-color;
h1 {
font-size: 24px;
}
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}
}
After Minification:
body{font-family:’Arial’,sans-serif;color:#3498db}body h1{font-size:24px}body a{color:#3498db}body a:hover{color:#2a80b9}
As you can see, the minified CSS reduces the file size and improves efficiency by eliminating spaces, line breaks, and other superfluous characters.
Sass, Minifying with Third Party Plugins
Sass is already equipped with a compressed output option perfect for simple minification, but you can also add other extended tools and plugins to your workflow for even more optimized code.
Using PostCSS and cssnano
If you wish to execute more fine-tuned optimizations, such as combining selectors or reducing repeated code to your file, use PostCSS with the cssnano plugin. Here’s how to set it up:
Step 1: Install PostCSS and cssnano
npm install postcss-cli cssnano --save-dev
Step 2: Set Up Your package.json Script
Update your package.json to include both Sass compilation and cssnano for additional minification:
{
"scripts": {
"sass": "sass input.scss output.css --style=compressed",
"minify": "postcss output.css --use cssnano --replace"
}
}
This setup will compile and minify your CSS with Sass, additionally, it performs optimization on the compiled css through cssnano.
Step 3 : Run the Minification Process
First, compile your Sass file to run this command:
npm run sass
Then, minify the CSS further with:
npm run minify
This will output a highly optimized CSS file, even smaller and more highly efficient than before.
Final Thoughts : One of the most common optimization you would want to do in your website for better performance is Minifying your Sass CSS files. Using the built-in compressed option provided by Sass or with additional tools like PostCSS and cssnano to minimize your CSS files will help you load pages faster, naturally increase SEO rankings, and create a better user experience.
