Page MenuHomePhabricator

CSS Reflows degrading page load performance
Closed, ResolvedPublic

Description

The order in which we're loading CSS and Javascript is causing some rather unsightly reflows on more complicated pages (e.g. diff pages, recent changes, page editing). Even though the CSS and Javascript is being delivered to the browser faster using Resource Loader, this delivery speed benefit is more than offset by the performance penalties of the reflows.

From Roan: "This is because we're loading the styles for these after the page load, even though the elements are present in the page itself. Obviously this is bad: loading styles after page load is only acceptable for things that get inserted by JS (which happens after the styles are loaded). Flashes of unstyled content should not happen."

This is a work item to find and fix areas where we're loading CSS dynamically where we don't need to, and switch to static loading in those cases


Version: 1.16.x
Severity: major

Details

Reference
bz27418

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:17 PM
bzimport set Reference to bz27418.
bzimport added a subscriber: Unknown Object (MLST).

/me was just going to file a similar bug based on comments floating around at wikinews about diff pages being weird.

This is a work item to find and fix areas where we're loading CSS dynamically
where we don't need to, and switch to static loading in those cases

diff pages would be one of them.

People at wikinews also complained that loading css in this manner significantly degrades the user experience for people who have css on, but JS disabled. ( https://secure.wikimedia.org/wikinews/en/wiki/Wikinews:Water_cooler/technical#1.17 (permalink: https://secure.wikimedia.org/wikinews/en/w/index.php?title=Wikinews:Water_cooler/technical&oldid=1179648#1.17 )

r82200 takes a stab at this. More could be done like this.

I *think* this is takes care of the most visible problem, so I'm removing the blocker. Since Trevor's comment implies more could be done, not closing it.

matmarex claimed this task.
matmarex subscribed.

Pretty sure this is no longer the case, we now use 'position'=>'top' and addModuleStyles() to load critical styles before page render and without JavaScript.