[META] Improving CSS and JS preprocessing

Created on 19 March 2012, over 12 years ago
Updated 20 August 2023, over 1 year ago

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).

Tasks

  • 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 ( 📌 Incorporate media queries in aggregated CSS files, don't create a new group for each new media query Closed: outdated )
  • 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)

Related Issues

🌱 Plan
Status

Closed: outdated

Version

11.0 🔥

Component
Other 

Last updated about 9 hours ago

Created by

🇦🇹Austria fubhy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇬🇧United Kingdom catch

    Everything in the issue summary has been done now, except for:

    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).

    However I don't think we can do that - for example ckeditor5 explicitly relies on this behaviour.

    We have other aggregation issues still open that aren't in the issue summary, but closing this one as outdated.

Production build 0.71.5 2024