How to remove unused css/js

[synerdb]

how to remove unused css and js in static site, tried some online remover but didnt worked well, have issue on mobile and ipad.
use: bootstrap, fontawesome, owl carsouel , jquery and so on CND

[PaulOB]

@synerdb

how to remove unused css and js in static site,

This article explains in detail what needs to be done.

How Do You Remove Unused CSS From a Site? | CSS-Tricks

As the author mentions in the first line:

Here’s what I’d like you to know upfront: this is a hard problem.

@synerdb

use: bootstrap, fontawesome, owl carsouel , jquery and so on CND

Here’s an idea? Don’t use any of those and save yourself thousands of lines of code.

That remark sounds a bit glib but if you really want control over your code then you have to start coding only the code that you need and not rely on massive libraries to help/hinder you. Asking your question after a site had been built is already too late.

I know some of us may inherit or take on already built sites and it is a major problem to work with undocumented and illogical structures. I’ve found that on static simple sites it’s sometimes easier to bite the bullet, chuck out the old code and rebuild from scratch in less time than it takes to decode a bunch of spaghetti code.

However on very large sites you can’t have that luxury and it really is a matter of working through slowly on one section at a time to clean up what you can. There is not really much automation you can use apart from what is mentioned in that article above.

[SamA74]

@synerdb

use: bootstrap, fontawesome, owl carsouel , jquery and so on CND

I imagine there will be more unused code than used code with these.
So possibly a bigger job to weed out all that code than to write just the code you need.

@PaulOB

Here’s what I’d like you to know upfront: this is a hard problem.

Probably even harder when dealing with frameworks. When you start pulling them apart, they are likely to be broken.

[olan140582]

Hello, thank you for the link, are there any plugins that automatically identify elements to be optimized in the code?

[PaulOB]

@olan140582

are there any plugins that automatically identify elements to be optimized in the code?

They are all mentioned in the article I posted to and you won’t really find any better information that what is posted in that article.

There really is no quick fix or plugin and all have drawbacks. They only work if you are expert at managing css and can identify areas that are not harmed by the code that you remove or tidy up.

[olan140582]

thank you for your reply, i willl deepdive a little more

[flowzai]

Use tools like PurifyCSS or UnCSS integrated with your build process to remove unused CSS and JS from static sites. Ensure correct CDN links and resource loading for better performance by manually reviewing and optimizing critical rendering paths for mobile and iPad devices. If this process is working well, you can confirm me.

[m_hutley]

@SamA74

Probably even harder when dealing with frameworks. When you start pulling them apart, they are likely to be broken.

Not to mention that when you start getting into frameworks, unknown and unspecified dynamic elements become a thing. An “unused” CSS rule can suddenly become used depending on a button click, or a load time, or…

The user says their site is static, but they also use jQuery. Which… generally those two things dont… need to coexist…