Unstyled content flashes on homepage

[johngruen]

Will try to grab a recording, but basically css gets passed in after content :(

[jaredhirsch]

Here's a screencast of the issue:

I bet moving the CSS above the ~700kb of JS would help

[jaredhirsch]

Might need to move the homepage CSS above the GA and Raven snippets for this approach to work. It looks like those scripts (small yellow blocks) get loaded before the first paint (green block), but the big homepage JS (long yellow block) doesn't:

The first attempt PR moves the homepage CSS just above the homepage JS, so it might (hopefully will) get loaded before the first paint. I'll try on a low-spec machine once this hits stage, too.

Other approaches might include delaying rendering until the CSS loads, or inlining some/all of the homepage CSS. Hopefully this tweak will be good enough.

[jaredhirsch]

Looks like this is actually a Nightly bug. See the discussion on dev-platform: https://groups.google.com/d/topic/mozilla.dev.platform/uN4idW92CCQ/discussion

Indeed, I cannot reproduce this bug on Chrome.

Probably still good to load CSS earlier, if only to improve perception among Nightly users.