PurgeCSS - Remove unused CSS from Web Pages

It is generally a good practice to remove unused CSS from web pages. As mentioned earlier, removing unused CSS can provide several benefits, including faster page loading times, improved website performance, reduced page weight, and better code maintainability.

it is generally a good practice to remove unused CSS from web pages. As mentioned earlier, removing unused CSS can provide several benefits, including faster page loading times, improved website performance, reduced page weight, and better code maintainability.
When there is unused CSS on a web page, the browser still needs to download and parse it, which can slow down the page loading time and decrease the website's overall performance. Additionally, unused CSS can make the stylesheet larger than it needs to be, which can increase the page weight and cause issues for users on slow internet connections or mobile devices with limited data plans.
Furthermore, removing unused CSS can make the code more maintainable and easier to work with in the long term, which can help to improve the website's stability and reliability over time. Overall, removing unused CSS is a best practice that can help to improve the user experience and website performance.

Why to remove unused css from web pages?

1. Faster page loading: Unused CSS code still needs to be downloaded by the browser, which can slow down the page loading speed. By removing unused CSS, the page can load faster, which can improve the user experience and reduce bounce rates.
2. Improved website performance: Removing unused CSS can help to reduce the amount of code that needs to be parsed by the browser, which can improve website performance and make the website more responsive.
3. Reduced page weight: Unused CSS contributes to the overall size of the web page, which can increase the page weight. This can be a problem for users on slow internet connections or for mobile users who may have limited data plans. By removing unused CSS, the page weight can be reduced, which can improve the overall performance and user experience.
4. Better code maintainability: Removing unused CSS can also make the code more maintainable. It can make it easier to find and fix issues with the code, and it can reduce the amount of code that needs to be maintained over time. This can help to improve the long-term stability and reliability of the website.

Overall, removing unused CSS can provide several benefits that can improve the user experience, website performance, and code maintainability.

Using PurgeCSS to Remove unused CSS from Web Pages

to use PurgeCSS, we need to have NodeJs installed in our system. Here is the simple simple example.

 
 purgecss --css ./style.css --content ./*.php ./assets/all.js --output ./output
 

Example Explained

• purgecss --css it is command of purgecss. we assume that you are running this command in the root directory of your application where all your .php files are stored
• ./style.css this is the .css file from which we will remove unused class. in my case, this is present in the root directory
• ./*.php all the php file where we are using css class
• ./assets/all.js path of javascript file in which you may be using the css class
• --output ./output path of output folder. here, we will get the fresh css file which contain the only used css class

for more info, please see purgecss.com/