Currently, MobileFrontend loads 137kb of uncompressed CSS (29kb compressed) in the head, which blocks rendering. That's a whole lot of CSS for a mobile skin and represents as much as 21 seconds worth of staring at a blank page on a 2G connection (simulated in Chrome devtools).
We need to trim this down as much as possible. Some initial ideas:
- see what can be done about all the inlined images (move to their own non-head modules?)
- identify styles that cover elements only appearing after a user action, and load those asynchronously and/or on action
- identify styles that cover elements which are usually below the fold, which could be loaded asynchronously, as the chance of reflow seen by the user would be minimized if we load that extra CSS right after the initial pageload
- clean up dead rules, if any
First, I will measure how much gain there is to be had for images, which are easily greppable.