Page MenuHomePhabricator

Flash of MinervaNeue empty main menu animation on page load
Closed, ResolvedPublic

Description

We got an alert earlier today with increased SpeedIndex on beta.

Here:s what it looked like before:
http://synthetic-tests-result-wikimedia.s3-website-us-east-1.amazonaws.com/en.m.wikipedia.beta.wmflabs.org/2019-10-03-14-46-31/pages/en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama/index.html#filmstrip

And after:
http://synthetic-tests-result-wikimedia.s3-website-us-east-1.amazonaws.com/en.m.wikipedia.beta.wmflabs.org/2019-10-03-21-39-57/pages/en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama/index.html#filmstrip

See what it looks like to users in the videos: http://webpagereplay-wikimedia.s3-website-us-east-1.amazonaws.com/?prefix=beta/mobile/chrome/100/Diabetes_in_dogs/2019-10-03-22-33/video/

There's a big grey area, I can see it myself when I access https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama multiple times.

Based on the synthetic test videos, it started happening between 2019-10-03-20-14 and 2019-10-03-22-31 GMT

The grey box is the animation of the main menu that flashes when some of the earlier CSS is loaded by the browser.

This commit looks like the culprit: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/534888/

It was merged exactly during that timeframe and shifts some code around related to the menu's animation: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/534888/35/resources/skins.minerva.mainMenu.styles/MainMenu.less

Making this a UBN because it should be a train blocker if it's not addressed quickly.

Details

Related Gerrit Patches:

Event Timeline

Peter created this task.Oct 4 2019, 7:05 AM
Gilles renamed this task from Increased SpeedIndex on beta to Flash of MinervaNeue empty main menu animation.Oct 4 2019, 8:27 AM
Gilles reassigned this task from Peter to Jdlrobson.
Gilles triaged this task as Unbreak Now! priority.
Gilles updated the task description. (Show Details)
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptOct 4 2019, 8:28 AM
Gilles renamed this task from Flash of MinervaNeue empty main menu animation to Flash of MinervaNeue empty main menu animation on page load.Oct 4 2019, 8:29 AM
Gilles updated the task description. (Show Details)
Gilles updated the task description. (Show Details)
Peter added a comment.Oct 4 2019, 9:41 AM

FYI: I could reproduce this in both Safari and Chrome. Using devtools in Chrome I could record a timeline and then see the grey box in the screenshots in the trace.

Change 540892 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Revert "MainMenu is a controller not a View and server rendered"

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

Change 540892 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Revert "MainMenu is a controller not a View and server rendered"

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

Jdlrobson lowered the priority of this task from Unbreak Now! to Normal.Oct 4 2019, 3:27 PM

I wasn't able to see the gray pane on page load, but I did see it when I opened the main menu and that's bad, so I've reverted it. Given this never went out, I'm guessing that solves the problem but let me know if not.

Krinkle moved this task from Limbo to Watching on the Performance-Team (Radar) board.
Krinkle added a subscriber: Krinkle.

Thanks for the quick action! Signing back to confirm.

@Peter I'm curious through which dashboard you found this?

Krinkle reassigned this task from Jdlrobson to Peter.Oct 4 2019, 4:06 PM
Krinkle added a subscriber: Jdlrobson.
Peter added a comment.Oct 4 2019, 9:45 PM

It looks good now, thank you @Jdlrobson for fixing it so fast!

@Krinkle There was an alert fired for SpeedIndex on mobile, see https://grafana.wikimedia.org/d/000000490/webpagereplay-mobile-alerts?panelId=19&fullscreen&orgId=1 and https://grafana.wikimedia.org/d/000000490/webpagereplay-mobile-alerts?panelId=18&fullscreen&orgId=1

but then I actually used the temporary Grafana instance that gets data from the new Graphite instance, so I could use the annotations to find a run before and after, that made it is so much faster than before :)

Peter closed this task as Resolved.Oct 4 2019, 9:47 PM

The Speed Index is back to normal

and no grey flash in the screenshots.

Thanks all I managed to replicate this eventually on some cached HTML so it's really great your tests caught this. Thank you for keeping an eye on performance!!