I've been trying to optimize the user experience of a 2013 site that has an entirely custom responsive-design master page. So far, the only recommendation I've come up with is "Put your CSS links at the top of the head and your js links at the bottom." After some experimentation however, I've found that this makes no noticeable difference in load times.
Specifically the behavior I'm trying to optimize is the order in which the components are displayed. Right now the content loads, then there's half a second to a second of lag after which the CSS and js kick in simultaneously. The problem this creates is that to the user, this looks messy. All the text, images and navigation load, then are completely changed when the CSS is applied. The users comment that the site is "buggy" because of this jump and question why we bothered upgrading from 2007.
Here's the kicker, it works flawlessly in Chrome (groan). Unfortunately (or fortunately, depending on how you look at it) Chrome is not an option because we have several other web applications and policies that depend on IE.
So my question is, how can I force the CSS (and possibly the js) to load and apply before any content is displayed? Chrome seems to be doing this automatically, so is there some lesson I can take from it and apply to IE?