How to remove unnecessary CSS from webpage

If we talk about the performance of any web page then the first point that comes to our mind is that it should open instantly. So basically, we need very less page load time. Page load time of any web page totally depends on the size of your web page and server response time. Server response time is not in our hands as it depends on the host server we are using.

So what we can do is we can reduce the page size. As we know we use bootstrap and font awesome and various other libraries for designing our websites and it happens most of the time that we use very small part of these libraries but we include complete bootstrap or font awesome files. Which increases our page size drastically. So, what we can do to reduce the page size is to use only necessary CSS for the web page.

But the problem is how to identify which part of the library you need and which part you don't. Even if you have identified it will take a lot of time to remove unnecessary CSS manually. Here we will talk about a website which provides a great tool to remove unnecessary CSS.

Here is step by step tutorial on -

How to remove unnecessary CSS?

STEP 1-

Here we will discuss only for bootstrap but in a similar way, we can do this for other libraries.As we know it is better to write CSS on the page rather than including external CSS because external CSS increases the load time. So, we will create an HTML file and also write CSS for that HTML in the same page. For the bootstrap code, you can simply follow the link-

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

you will see-

copy all the code and paste inside the style tag of your webpage.

 STEP 2-

We have an HTML file below in the image in which we are creating a webpage in which we are dividing a web[age in three parts using bootstrap library col-lg-3 but for this only we are including whole bootstrap file which is not good for performance.

webpage for this code appears like this in the browser-

STEP 3-

Follow the link given below-

https://uncss-online.com/

copy and paste the link into your web browser. and you see a window appearing in the browser-

STEP 4-

Now go to your editor and copy all the CSS written inside style tag

and paste in the Your CSS of the page above and remove that CSS from your code. Now copy you remaining code and paste in the Your HTML section. Now click on the UNCSS MY STYLE! button shown in the image.

You will see that you are left with very few lines of CSS.

STEP 5-

Now copy the remaining code and paste inside the style tag of your code and you will see the code size is reduced. 

Save the code and refresh the browser and you will see that your code is still producing the same result.

Congratulations you have successfully reduced the size of your code.

If you are still facing some problem. comment the same I will be happy to help you.