ElkArte Community

Title: CSS and JS minification
Post by: emanuele on February 26, 2015, 05:51:58 am
I know there is already another discussion, but I can't find it... >:( [1]
Well, whatever.

After a question on an Italian board, I started thinking (again) at this stuff.

One of the limitations of the current approach is that we may potentially end up loading different files for each different "type" of pages.
For example: a pair for board index, one for message indexes, one for topics, one for search, one for ... etc.

I tried to track down all the different hives a guest downloads at the moment, and I found 7 files (talking only about javascript), for a total of ~400 KiB.
Then I measured the size of the hives for browsing: board index + message index + topics and the size is ~282 KiB.

So, I did some test.

Of course it's just a preliminary test, but based on that I would consider worth (in the future, probably 2.0) explore the possibility to create "groups" of javascript and css files (and maybe code in general, I'm not sure on that part now) and minify them with a scheduled task in advance.
It may work somehow that way:
a table in the db with schema | group | filename | type (js/css) | defer (true/false) |
each js/css is added to the table (for example by an addon) and when added the scheduled task is run to rebuild the hives.
from time to time the hives are rebuild "just in case" (or maybe not)
each group would remain a different file (so in the admin panel we'd be served at least two/three files: an hive for "guests", one for "registered users" and one for "admins")
The biggest problem I can see at the moment is how to bind the groups of javascript/css to permissions. I'm thinking about posting, for example: a forum may want to have guests able to post, but that would require the "post" group to be presented to guests as well and not only to registered members.

Dunno. Some food for thought.
Unless I wrote it as a draft some time ago and then I forgot to publish it... that already happened twice, so it's a possibility worth consideration. xD
I didn't spend time separating defer and not-defer, I just put everything together[(footnote], this gives a file of about 700 KiB. Quite big.
Title: Re: CSS and JS minification
Post by: Spuds on February 26, 2015, 01:18:53 pm
Good summary of the state of affairs.

I've gone back and forth on whats the most efficient approach as well, and I'm still have not come to any conclusions.  What is good about today's way is that is very flexible, especially for addons etc. 

The downside is a member may have several various hive packages they need to retrieve when the only difference between on and the other is a couple of bits, so they get hit with another 200KiB file ... once the browser cache is loaded its invisible, but the first page loads do carry the payload.

I suppose doing it feature based or member group based holds some merit, in an ideal world the member would download maybe a single 250KiB file and be done for all pages vs say 2 to 3 200KiB ones, just not sure how to get there.