Difference between x.js and cs-classic.xxx.js

[TheOwnplay]

I’m currently trying to optimize the actual js files that are loaded on our page. I’ve realized that both the x.js and the cs-classic.xxx.js file are loaded with every page. That led me to the following questions:

1. What are the purpose of each of them? I’m aiming to minimize the payload as much as I can.
2. Is that something that will be minimized with the new blank stack?

Furthermore: I’ve seen that the JS file often contains a lot of unused Javascript as a lot of the elements are not used. Is there any way to further enhance that to load specific JS only when those elements are used on a page?
This is a far-fetched feature, but I guess if the JS file is build on a per-post basis, this could be incredibly beneficial for web vitals and simplicity, as well as for compatibility with other caching plugins.

Thank you already very much!

[charlie]

x.js sets up theme specific stuff. Like non pro headers, footers and some stack features. If you have custom headers, footers, and layouts you probably don’t need this at all. You’ll notice it’s the smallest as well.
cs-classic.js pretty much everything else. Does not usually need jQuery.

2. Not really. New stacks aim to cut CSS and uneeded templating logic.

We’re going to start code splitting after 6.3.0, starting with sliders because I know that’s one of the larger elements. Newer elements like lottie will already do this. Would love to have a system that builds on per-post basis and it’s a thought I’ve had as well. Assuming we didn’t have 100 js libraries it wouldn’t be creating too many files. It is more or less what some other plugins already do though.

Thank you, have a great weekend.

[TheOwnplay]

Thanks, @charlie

I’ll give it a try to remove the file and see the impact. At least it’s something that can be saved (size-wise), which hopefully gives me a couple more performance points.

As for the separate files: It might be nice to have the option to generate them as an inline output. Then you don’t need to worry about the number of files, and I could use a custom snippet to combine and minify them all together. This will also make things easy in combination with plugins like WP Rocket.

If you have some insights on how I can modify the cs-classic file using some of your internal hooks, I will play around with a custom solution to see what’s possible.
Thanks!

[christian]

Glad to hear that, @TheOwnplay