We definitely need to improve the way we are processing and serving JS and CSS in order to increase front-end performance (especially for mobile devices).
- Write media queries into the cached and aggregated CSS files
Write media queries into the cached and aggregated CSS files instead of forcing a new aggregation group for each media query (#1488910: Incorporate media queries in aggregated CSS files, don't create a new group for each new media query)
- Minify JS files
Minify JS files while aggregating / caching them. There already is an issue for that (from 2007) but we might want to think about the possibility of adding a PHP library to core that does that for us. Minifying JS can, in many cases, reduce the file size to about half (even more with gzip compression of course). #119441: Compress JS aggregation
- Turn aggregation of CSS and JS files into a pluggable system
The JS / CSS pre render callback could look up the aggregation handler that it should use by checking something like
$config->get('performance.css_aggregation_handler') // $config->get('performance.js_aggregation_handler'). There already is an issue for that (#352951: Make JS & CSS Preprocessing Pluggable) but the latest patch there is from late 2009.
- Intelligently sort CSS and JS files so that we don't break aggregation groups
This currently happens when CSS or JS that can not be preprocessed (because it is external, inline or conditional) is added in the middle of a group. Possible solution: Move such CSS / JS to the end of their group so that they end up in between 2 aggregates instead of splitting an aggregation group. This slightly changes the order of the CSS / JS output which, in some cases, affects CSS overrides, but with proper documentation that shouldn't be a problem (themers can just use more or less specific CSS rules).
- Remove the CSS_SYSTEM aggregation group
#1490336: Weight the system CSS at the top of the CSS_DEFAULT group instead of placing it in a separate aggregation group (CSS_SYSTEM)