Page MenuHomePhabricator

FOUC for styles applied via MediaWiki:Mobile.css due to bottom-loading
Closed, DuplicatePublic

Description

Visiting https://wikitech.wikimedia.org/wiki/Main_Page on my phone clearly shows a FOUC (flash of unstyled content) for the portal layout styles that are specified by https://wikitech.wikimedia.org/wiki/MediaWiki:Mobile.css. These styles are loaded via the "mobile.site" RL module which is implemented as the custom RL module MobileSiteModule.

The "mobile.site" module is bottom loaded by RL instead of being combined with the <link rel="stylesheet"> top loaded css collection or loaded as an independent top loading <link rel="stylesheet"> as the "site" module is for desktop.

Related Objects

StatusAssignedTask
OpenNone
ResolvedJdlrobson
DuplicateNone
ResolvedTgr
ResolvedAnomie
Resolvedtstarling
Resolvedcoren
ResolvedAnomie
StalledMhurd
ResolvedAnomie
ResolvedEsanders
ResolvedEsanders
Resolvedssastry
ResolvedAnomie
ResolvedCKoerner_WMF
Resolvedjhsoby
ResolvedTgr
DeclinedTgr
Resolvedcoren
ResolvedAnomie
ResolvedTgr
OpenNone
Resolvedssastry
ResolvedTgr
ResolvedTgr
ResolvedTgr
ResolvedDeskana
ResolvedCKoerner_WMF
ResolvedWhatamidoing-WMF
ResolvedTgr
ResolvedTgr
ResolvedTgr
ResolvedUrbanecm
ResolvedTgr
ResolvedTacsipacsi
ResolvedTgr
ResolvedCKoerner_WMF

Event Timeline

bd808 raised the priority of this task from to Needs Triage.
bd808 updated the task description. (Show Details)
bd808 added a project: MobileFrontend.
bd808 added a subscriber: bd808.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptFeb 6 2016, 11:04 PM
bd808 triaged this task as Lowest priority.Feb 8 2016, 6:12 PM

This was intentional and made on the basis that any changes to template CSS would be better inside the template itself and top loaded CSS is very expensive. I've added the RFC that has been campaigning for more flexible in CSS templates, as it helps both improve performance and load.

In the mean time could you inline any CSS to avoid the disruptive flash? You probably don't want to load this CSS on every single page anyway.

Rather than have

.mw-tpl-portal-image {
    font-size: 160%;
    padding-top: .5em;
    text-align: center;
}

could you not use an inline style in the template? This seems to minimise flash.

In the particular instance I'm pointing to here I probably can figure out how to refactor things to use inline styles. In general I agree that getting T483: RfC: Allow styling in templates implemented would be a better solution to most site css hacks. I guess I'm not completely sold on the concept that MobileFE is measurably faster by omitting the equivalent of desktop's <link rel="stylesheet" href="/w/load.php?debug=false&amp;lang=en&amp;modules=site&amp;only=styles&amp;skin=vector" />, but I'm not ready to find the data to prove that.

It depends... Probably on wikitech it doesn't but on wikis like enwiki common.CSS is bigger than all the existing styles needed for the skin :)

The potential is there without any sysadmin there to manage/monitor it.

Id suggest this would be made optional so sysadmins who don't care can apply them but then you are opening Pandora's box.

It depends... Probably on wikitech it doesn't but on wikis like enwiki common.CSS is bigger than all the existing styles needed for the skin :)

The potential is there without any sysadmin there to manage/monitor it.

Id suggest this would be made optional so sysadmins who don't care can apply them but then you are opening Pandora's box.

Jdlrobson moved this task from Backlog to Bugs on the MobileFrontend board.Feb 18 2016, 6:28 PM
Krinkle added a subscriber: Krinkle.Apr 6 2016, 9:37 PM

This shouldn't be blocked on T483: RfC: Allow styling in templates. Things are broken due to a contract violation with site CSS - causing FOUC bugs and such.

Mobile already dequeues Common.js and Common.css, introducing a much smaller Mobile.css. Similar to Common.css, virtually every single style in Mobile.css is layout related and causes a FOUC if loaded late. It's not a script module and should not be loaded as such.

I was surprised this doesn't cause a FOUC for infoboxes and such. Turns out MobileFrontend hardcodes styles for those as part of "Minerva hacks for Wikimedia wikis". Essentially cherry-picked part one wiki's Mobile.css to avoid the most obvious FOUC, ignoring the others. Collaborating with the community on their stylesheets can be hard. It may be ignored for early experiments, but after that it's part of the job.

Loading it late degrades perceived performance and overall user experience. Page load time and 85% render time (WebPageTest) are also higher now when loading it late due to it starting the fetch much later and causing many wasted repaint cycles along the way (FOUC).

Last year we experimented in ResourceLoader with a second style queue. It didn't improve things how we hoped and was subsequently reverted. In the long run, we'll need a more delicate split (see T127328), but for now I suggest the same strategy for Mobile.

Loading it late could make the technically recorded first paint (1% render) occur marginally faster. But at the aforementioned cost of degraded perceived performance, slower total page load time, and user-facing content reflows.

When we last experimented with top loading this stylesheet first paint was delayed by 2s (I think on 2g) but I remember there was also a delay for 3g too due to the additional stylesheet url. This may be less now but I still think this is unacceptable.

The strategy so far has been to put layout styles in a hacks module. I'm happy to shift more rules over there or explore ways to group the stylesheet in the existing skin styles url if that's an option.

In terms of the RFC I agree I just wanted to ensure these were linked as reading PMS are aware of this problem and needing examples of things this will help.