CSS und JS tree-shaking

interesting concept for sure. some questions:

1. Do CSS/ JS tree-shaking libraries also exist in PHP?
2. I assume these use the JS/ CSS and also the HTML to understand what can be dropped, right?
3. Does your process take one page into account or multipple or all pages somehow? because -stupid example- I might need jQuery UI core JS on page 1 but not on page 4? same for CSS?

frank

Hi Frank,

thanks for the quick reply.

1.) I’m not sure about that. I haven’t found anything yet. In Angular, JS tree-shaking it’s part of the production build. CSS requires additional attention with webpack. MAybe there is something like a wrapper of NodeJS to PHP to make it happen in PHP. A very very ugly solution for users with root server access would be to have a cron job running on the autoptimize cache folder.

2.) I cannot speak for WordPress but in the Angular context, CSS and JS code is not inlined during development. But for the long run, if such code is present inline, it should be considered, too.

3.) I have a counter-question: how does your plugin do it :-)? The cache folder have several js and css files with hashed postfixes. Is a cache file create for each post/site? Ideally, best performance would be to have common file which covers the minimum requirements for all posts and pages and a delta file adding additional topics on each context.

I came up with it as I have analyzed the coverage of my page with Google Chrome. 92% of my CSS and JS code (1 MByte) in total is not used. And it starts with just basics like inserting all.css from font-awesome by some plugins.

re (2); not talking about inline JS/ CSS as much as about the fact that in order to know what CSS is needed on a page the HTML has to be taken into account?

re (3); for a given page AO aggregates the CSS/ JS and checks if a minified version fo that exists based on the md5sum of the string, so it is perfectly possible (and preferred) that one aggregated CSS/ JS file is used on multiple pages.

Thanks for clearing 2.) up. The answer is yes.

Do you think that this could work? Do you think this is something to be considered for Autoptimize itself? Of course, trying to find a solution how to wrap webpack in php.

re. considering for AO itself; I see 2 major problems
-> (2) implies that the CSS (and JS?) might end up different for each page, which from a efficiency point of view is sub-optimal.
-> for core AO native PHP-based solutions are required, I prefer not do go down the “assuming node js is installed and wrapping PHP around that”-road ??

I totally understand your arguments about not going that road. It’s quite a dirty one and this is something I would only do on a custom setup.

Going for my own, I can just scan the cached html files, analyse the used JS and CSS files, write out the optimized versions and adjust the filenames in the original cached HTML files. Are there any side effects if I do it that way?

I’ll mark that thread as closed ??

Well, you could always hook into the autoptimize_js_after_minify and autoptimize_css_after_minify filters, but you don’t have the context (HTML) available there.