Page MenuHomePhabricator

Zebra causes 3kb CSS spike (@todo) and @wikimedia/codex and codex-styles AND codex-search-styles on page load (now fixed)
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT

Description

NOTE: This looks like it should be addressed by T347712. Please sign off or unstall if the issue is not addressed.

https://grafana.wikimedia.org/d/000000205/reading-web-performance?orgId=1&from=now-30d&to=now&viewPanel=144

There was a spike in render blocking CSS by 3kb on 13th:

Screenshot 2023-12-08 at 7.05.21 AM.png (912×1 px, 196 KB)

and JS:

Screenshot 2023-12-08 at 7.15.48 AM.png (1×2 px, 273 KB)

And Pixel flagged this regression to hint at the cause (T350069)

image.png (900×1 px, 147 KB)

Steps to replicate the issue (include links if applicable):

  • Go to any page in an incognito window
  • Check mw.loader.getState('codex-styles')

What happens?:
'ready'

What should have happened instead?:
'registered' (T248718)

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

Jdlrobson renamed this task from Vector loading codex-styles AND codex-search-styles on page load to Vector loading @wikimedia/codex and codex-styles AND codex-search-styles on page load .Dec 8 2023, 5:12 PM
Jdlrobson added a project: Design-System-Team.
Jdlrobson added a subscriber: abi_.

codex-styles seems to be loaded via JavaScript via @wikimedia/codex. That would mean this is subject to a flash of unstyled content in the display. @abi_ I think this might relate to the changes made in UniversalLanguageSelector to make the build compatible with MLEB.

Jdlrobson renamed this task from Vector loading @wikimedia/codex and codex-styles AND codex-search-styles on page load to @wikimedia/codex and codex-styles AND codex-search-styles on page load .Dec 8 2023, 5:16 PM
Jdlrobson updated the task description. (Show Details)

Change 981572 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/UniversalLanguageSelector@master] Delay loading of Codex styles until they are needed

https://gerrit.wikimedia.org/r/981572

I haven't fully tested https://gerrit.wikimedia.org/r/981572 yet and am not 100% sure if this is the root of the problem. It doesn't explain the 3kb of extra CSS that is being loaded. @Catrope is it possible Codex-search bundle increased in size with the last release?

@Jdlrobson how urgent is this? We have a number of engineers out and may not be able to investigate until Monday.

Change 981198 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/UniversalLanguageSelector@master] Revert "Use Codex styles for buttons in language overlay"

https://gerrit.wikimedia.org/r/981198

Change 981198 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Revert "Use Codex styles for buttons in language overlay"

https://gerrit.wikimedia.org/r/981198

Jdlrobson added subscribers: Mabualruz, Jdrewniak.

With the revert this is no longer a deploy blocker but it is a concern going into the next part of our sprint.

@Jdrewniak the 3kb increase in CSS on the beta cluster seems to aligns with https://gerrit.wikimedia.org/r/c/operations/mediawiki-config/+/973865 (the Zebra deploy). This is a pretty significant increase. Is this temporary? Will this be regained once non-Zebra's styles are removed from the codebase? If we are going to enable Zebra everywhere it would be good to talk to @Mabualruz about running some synthetic tests on Zebra VS non Zebra to check we are not increasing first paint for users.

Jdlrobson renamed this task from @wikimedia/codex and codex-styles AND codex-search-styles on page load to Zebra causes 3kb CSS spike (@todo) and @wikimedia/codex and codex-styles AND codex-search-styles on page load (now fixed).Dec 8 2023, 10:14 PM

@Catrope is it possible Codex-search bundle increased in size with the last release?

The codex-search-styles module did increase slightly in size with the last release (1.0.1 -> 1.1.1), but the increase was only 140 bytes (29,053 -> 29,193).

@Jdlrobson yes I think the 3kB increase on beta can be attributed to Zebra. This is temporary. The way the Zebra module was constructed is that it is loaded on top of the default skins.vector.styles module.
I'm pretty confident that this performance loss will be regained when Zebra is merged into the default styles.

With the Vector master branch checked out, running a quick test on my local

$> curl "http://localhost:8080/w/load.php?lang=en&only=styles&skin=vector-2022&modules=skins.vector.styles" -so /dev/null -w '%{size_download}' | awk '{print $1/1024}'
> 66.125
$> curl "http://localhost:8080/w/load.php?lang=en&only=styles&skin=vector-2022&modules=skins.vector.styles" -so /dev/null -H 'Accept-Encoding: gzip,deflate' -w '%{size_download}' | awk '{print $1/1024}'
> 10.5869

shows that the current size of the skins.vector.styles module is 66.125 kB or 10.5 kB gzipped.

Running the same test with the WIP merge patch checked out, those curl commands show that the skins.vector.styles module is 52.94 kB or 9.97461 kB gzipped.
(Real world results will vary).

Change 981572 abandoned by Jdlrobson:

[mediawiki/extensions/UniversalLanguageSelector@master] Delay loading of Codex styles until they are needed

Reason:

Working on https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/+/981199 now the patch has been reverted.

https://gerrit.wikimedia.org/r/981572

I'm keeping an eye on the Grafana boards this week. So far I'm not seeing anything worrisome.

Jdlrobson changed the task status from Open to Stalled.Dec 14 2023, 10:41 PM

the first paint is pretty static so far.
Speed index spiked a little on the 7th December which is presumably unrelated.
https://grafana.wikimedia.org/d/000000205/reading-web-performance?orgId=1&from=now-30d&to=now

I'm going to monitor this and stall it until Zebra clean up has occurred.

Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 0.