Vector 2022, even without icons is 3kb more of CSS than old Vector. More CSS usually results in increased time to first paint (when reader actually sees something). I suspect a lot of this relates to all the feature flags and different variants of the skin we have.
Given we are ramping up to deployment, I think a performance review (either with performance team or without) is going to be a requirement before enabling everywhere.
Questions to answer
- How many bytes of CSS will be freed up by removal of a each of our feature flags. (described in #4)
- How many bytes of CSS will be freed up by removal of A/B test code
- How many bytes of CSS will be freed up by removal of legacy table of contents CSS code? Remove tablet specific styles for collapsed TOC, and misc CSS clean up 0.5kb
- Any CSS that is outdated due to changed browser support requirements? (described in #3)
- How much of our CSS could be scoped to logged in users only?
- How much of our CSS could be scoped to JavaScript modules?
- Is there anything that can be upstream to ResourceLoaderSkinModule to reduce overrides?
CSS Audit
The easiest way to compare legacy vs new Vector CSS is on a per module basis. Uncompressed, Vector 2022 styles are 23.45 kB larger than legacy (a 76.5% increase). After compression however, the difference is only 3.47 kB (still a 49% increase, but a relatively small number of bytes).
| Vector ResourceLoader Module | Uncompressed | Gzipped |
|---|---|---|
| skins.vector.styles.legacy | 30.64 kB | 7.04 kB |
| skins.vector.styles | 54.09 kB | 10.51 kB |
| skins.vector.icons.js | 2.62 kB | 0.31 kB |
| skins.vector.icons | 13.41 kB | 0.75 kB |
[x] 1.Code marked for deletion
There's at least a dozen markers in the code related to either feature-flagging, AB tests, or caching, via this codesearch query. Most seem related to the VectorTitleAboveTabs feature, but there are usages of .vector-layout-legacy which relate to the CSS Grid layout as well. Removing this code could save us some bytes (how many? well... we'll see after we remove them).
| Comment | location |
|---|---|
| MenuDropdown.less#103 | |
| ArticleToolbar.less#33 | |
| ArticleToolbar.less#66 | |
| LanguageButton.less#5 | |
| Sidebar.less#31 | |
| TableOfContents.less#144 | |
| screen.less#337 | |
| screen.less#350 | |
| screen.less#357 | |
| screen.less#396 | |
| screen.less#399 | |
| skin-legacy.less#22 | |
[] 2. Duplicative rules in skins.vector.styles
Using a CSS analyser like Wallace, we can see if there are any properties that could be consolidated. Using the skins.vector.styles module on beta as input, reveals that there are probably some colors that could be combined, and the amount of font-sizes we use can be reduced.
There is duplication around the black and white color values (#fff, #ffffff, #ffffff7, #000, #000000) as well as some others like blue and red. There are also lots of light-grey colors that could be consolidated.
27 unique font sizes. 6 for print, 21 for screen.
[x] 3. Removing Browser specific hacks
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/815752
[x] 4. Removing feature flags
- Remove Table of Contents feature flag -3.26kb
- Remove user links feature flag -1.04kB
[x] 4. Consolidation of components
Chevrons: There are 4 unique chevron implementations in new Vector that could be consolidated.
 |  |  |  | |
| Language menu | "more" menu | User menu (reused in sticky header) | sticky header language menu | |
Dropdowns Dropdown styles can be consolidated for various menus
Tabs The tabs in Vector need to accommodate different HTML because some are dropdowns, others are links, or icons,
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/815323
5. Reducing layout code by adopting CSS Grid
Conclusions
As of this writing, the size of the skins.vector.styles modules in Vector has been reduced by 8.2kB uncompressed, or 1kB after gzipped. This is significant as this code is loaded on every pageload and is render-blocking.
| Vector ResourceLoader Module | Uncompressed | Gzipped |
|---|---|---|
| skins.vector.styles.legacy | 30.5947 | 7.13965 |
| skins.vector.styles | 45.8984 | 9.53418 |
| skins.vector.icons.js | 7.13672 | 0.481445 |
| skins.vector.icons | 13.4141 | 0.750977 |
Measurements were run using this gist and comparing the module size before and after various commits.