Removed unused css/js

[synerdb]

im trying to remove unused css/js in site. Purged css work fine with my own css (like style.css) and bootstrap.css, fontawesome but doesnt work with owl-carsouel.css, fancybox 3. and how can i remove on unused js from sites.

guide on how to remove unused css (like owlcarsouel, fancybox 3) and js lik jquery(like js used by owlcarsouel, fancybox js)

[m_hutley]

Anything with conditional loads isnt going to be ‘solvable’, because the answer of “is this used” is not a boolean true/false. For example:

function doSomething(thethingtodo) {
   if(thethingtodo == 'joke' && document.getElementsByClassName("jokebox")[0].selectedIndex > 0) {
      makeAJoke();
   }
}

function makeAJoke() {
      console.log("Wakka wakka");
}

doSomething("joke");

is makeAJoke ‘used’ or not? Well, it depends on if there’s a value in the jokebox. So the answer is “It depends”.

You’ve excised CSS from files. Which is fine, until your site changes, or loads a new element that should have used the rule, but you’ve deleted it.

[synerdb]

but purged css says that if any css is generated by js it will include generated css too, as owl carousel load when site is fully load not click on.
is there any others way to remove unused css generate by js…??

[m_hutley]

“unused” is a misnomer for CSS. CSS is always “unused”, unless there is an element on the page that currently is using it. a:hover is unused…unless someone’s hovering over a link. .thisisadiv is unused…until javascript creates an element with that class.

So you’d only be able to remove things you’re guaranteeing WILL NEVER be in your page. Can you guarantee that the CSS generated by js wont be used? Ever?

[synerdb]

purged css says that if you include js path in command if css is generated through js then it will not remove css class, let say if have css in style.css and js used this css class when some action is perform then it will be not remove

[kevin_cooper]

To remove unused CSS and JS, follow these steps:

Use Tools: Start with tools like Chrome DevTools or PurifyCSS to identify unused CSS/JS. They scan your site and show which parts of the code aren’t being used.

Manually Remove: For specific libraries like Owl Carousel and Fancybox, you can manually remove their CSS/JS files if they’re not being used on any pages. If only parts are unused, consider customizing the files to keep only what’s needed.

Code Splitting: Implement code splitting to load only the necessary JS/CSS on specific pages.

Plugins: Consider using WordPress plugins like Asset CleanUp or Perfmatters, which allow you to disable unnecessary CSS/JS on a per-page basis.

Always test your site after making changes to ensure everything works as expected.