MINIFICATION OF CSS FOR PERFORANCE OPTIMIZATION

In this article I will explain to you in a very clear and concise. manner on how you can improve the performance of your web applications by minifying CSS .

• WHAT IS MINIFICATION
• OPTIMIZE CSS ASSET WEB PLUGIN
• USE NEXTJS

As engineers , we write code in ways that makes it easier for us to read and , other to read . So we indent out code , write comments and use spaces a lot . This are very good pratices for readiblity , but it affects the performance . These spaces , comment etc , accumulates data , the more robust our code base is , the more such data it will consume , cause a lag or perfomance drag . Computer does not need readable code to work , minifying the css , that is removes these spaces .Greatly improving performance .

MINIFICATION OF CSS

This is the removal of white spaces , indentition and comments in the code sent to production , when we run the npm build command . These two code samples are the same thing but the first , causes a performance drag.

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

The second is the best way to provide our code to the browser . I cant write code in my laptop like this, it would not take long before i get confused . There are online tools that can help us write remove these unnecesary spaces and indentation and commenrs .

EXAMPLE

https://www.cleancss.com/css-minify/

This , however can only work on small code bases , that would be easier to just copy and paste, to get the minified version . However , it would not be scalable way to write code , when working on large code bases. There is a more efficient way to do this , which minifies our code intuitively

Let me show you to method to do this !

OPTIMIZE CSS ASSETS WEBPACK PLUGIN

This plugin is very helpful to minify out code in our react web based applications . It will search for CSS assets during the Webpack build and will optimize \ minimize the CSS. Read more https://github.com/NMFR/optimize-css-assets-webpack-plugin

STEPS

1. Install optimize css assets

 npm install --save-dev optimize-css-assets-webpack-plugin

2. Open the webpack.config.js file, and make the following modifications:

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"}),
    new MiniCssExtractPlugin({filename: "[name].css"}),
    new FixStyleOnlyEntriesPlugin(),
    new OptimizeCSSAssetsPlugin({})
  ]

THATS ALL!

When you run “npm run build”, the code will be minified , and this will greatly reduce the size of the css file .

JUST WRITE YOUR CODE IN NEXT JS

Nextsjs offers out of the box , features that just make the developer experene a pleasure and optimizes for a gretaer performance

1. Code splitting: Next.js automatically splits your code into smaller chunks, which are loaded on demand as needed. This can improve the performance of your application by reducing the amount of code that needs to be downloaded and parsed by the browser.
2. Tree shaking: Next.js uses webpack’s tree shaking capabilities to eliminate dead code and optimize your application bundle size.
3. Minification: Next.js applies minification to your application code, including CSS, to reduce the size of the files that need to be downloaded by the browser.**
4. Automatic polyfilling: Next.js automatically detects which features of modern JavaScript are supported by the user’s browser, and includes polyfills for unsupported features as needed.

MINIFICATION is a tool done out of the box with nextjs , you dont need to install an extra package , it just minifies your css out of the box.

WE CAN ALWAYS MAKE THINGS FASTER AN BETTER

Nextjs greatly reduces the size of css file , the screenshot attached , shows the size of the css file which is 3.8kb

This is great, but the code is minified to just one big giant file . When we work on project , it is advisible to write out code in modules , using preprocessors like SASS or SCSS. For the following reasons

1. Reusability: By keeping your CSS code in separate files, you can more easily reuse it across different pages or components of your website. This can save you time and effort, as you don’t need to duplicate code or make the same changes in multiple places.
2. 2. Organization: By separating your CSS code into different files, you can keep your code more organized and easier to understand. This can be particularly helpful for larger websites or projects where the CSS code can become quite complex.
3. 3. Caching: Separating your CSS code into different files can also make it easier for web browsers to cache the files. This can improve your website’s loading speed, as the browser can retrieve the CSS files from its cache rather than having to download them again.

However on further observation , if you double click on the css file, it is just one gaint file

How can we fix this ?

In my next article I will discuss how you can use MINI-CSS-EXTRACT-PLUGIN to fix this