Back in Sept 2015, CSS for mobile was only 6.4kb for an anonymous user (T97289) with JS disabled.
Since then it's been steadily increasing and it's not 9.3kb.
After a brief investigation, we can remove up to 2-3kb (20-30%) of CSS from the critical path. This should improve the time to first paint for all our users, meaning they can access our content quicker (how much quicker I'm not sure, but we can find out and I suspect it's noticeable)
To do so we'd make the following changes
* Restrict gallery styles to only pages which need it - we currently load all styles for galleries on all pages. We should use mediawiki.page.gallery.styles instead.[] Simplify #page-actions rules which are unnecessarily verbose
* Separate styles for logged in users from anons - this is a huge saving and mostly focuses around the notification icon[] Restrict gallery styles to only pages which need it - we currently load all styles for galleries on all pages. We should use mediawiki.page.gallery.styles instead.
* Do not load overlay styles on page load. For some reason we do this a[] Separate styles for logged in users from anons - this is a huge saving and mostly focuses around there is no need. notification icon
* L[] Do not load mw-ui-button-group only on special pages which need itoverlay styles on page load. For some reason we do this and there is no need.
* Do not load mw-ui-button on page load - this is a large stylesheet and we should look to load a minimal version on the critical path. This should cover basic padding/colors for a neutral button. We do not use progressive buttons anywhere in the main UI.[] Load mw-ui-button-group only on special pages which need it
* Load touch-events,[] Do not load mw-ui-button on page load - this is a large stylesheet and we should look to load a minimal version on the critical path. This should cover basic padding/colors for a neutral button. position-fixed rules via JavaScriptWe do not use progressive buttons anywhere in the main UI.
* Remove unused/redundant rules - we've picked up a lot of cruft over the years. multi-line and two-line, .mw-mf-banner, .mw-mf-image-replacement, .no-js-edit, .no-js-only[] Load touch-events, #mw-mf-last-modified seleectorsposition-fixed rules via JavaScript
*[] Remove unused/redundant rules - we've picked up a lot of cruft over the years. multi-line and two-line, .mw-mf-banner, .mw-mf-image-replacement, .no-js-edit, .no-js-only, #mw-mf-last-modified seleectors
[] Limit #secondary-action . language-selector rule to main page - this is the only place it can be used
After these changes, when loading page with JS disabled, I see unused CSS rules drop from 60% unused to 30% unused.