m.css icon indicating copy to clipboard operation
m.css copied to clipboard

Try to put size of (uncompressed) CSS back under 50 kB

Open mosra opened this issue 7 years ago • 2 comments

Google's AMP dictates that CSS stylesheets should be no larger than 50 kB (along with other requirements such as having everything inline and/or async loaded using JS, which doesn't apply here). I think that could be a good thing to try to achieve here as well -- while the compressed version is now at ~10.0 kB, the uncompressed one is ~70 kB.

Most responsible for this growth are the recent plugin additions (plots and graphs), which add a lot of extra SVG styling. What could be done:

  • [ ] Improve the postprocess.py script to reduce file size even more (no indentation at all? no newlines?)
  • [ ] Manually compress the CSS (use a single margin property instead of separate margin-top, margin-bottom etc.)
  • [ ] Reduce the amount of repeated lists of long selectors with a single selector containing more properties (e.g., repeating color: #ff3366 five times is better than repeating table.m-table tr.m-danger td a:hover five times)
  • [ ] Port to the native CSS grids (#31), which could make the majority of m-grid.css obsolete (it's 13 kB now)
  • [ ] Use the :is() selector (#208)

Any further ideas?

mosra avatar Sep 19 '18 15:09 mosra

is that still an issue? i mean, ive see some tools to reduce CSS but it often requires the accompanied HTML template files to anchor “used and active CSS” element from being eliminated.

egberts avatar Feb 25 '22 14:02 egberts

Yes it is, I don't like bloat :) A recent, quite significant work is in #208 linked above, I just didn't get to merging it yet.

mosra avatar Feb 25 '22 15:02 mosra