CSS and js UX optimization for 2013 master page

Question

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?

Answer 1

This really depends on how big your CSS and Javascript files are. It also depends on if you guys are using revision on your client-side files. And of course how much content (webparts, custom controls etc) there is on the pages the users enter.

First I'd advice you to use revision on your links to CSS and javascript files. This saves HUGE response time as the browsers then only re-downloads the files if their revision number has changed.

Example:

<SharePoint:CSSRegistration runat="server" name="/_layouts/custom/css/mycss.css?rev=30092013" />

?rev=30092013 is the revision in the example above, which is just todays date, but can also be a timestamp. The point is that as long as that querystring in the url does not change, the browsers won't download the same file every time the page loads. Same goes for Javascript files.

Next step might be minimizing the sizes of your CSS and javascript files. If you can, use minimized version, just like jQuery has a jQuery-latest.min.js.
You can use CSSCompressor for your CSS files and JSCompress for your javascript files.

When talking about where to add your CSS and JS files in the masterpage, CSS files should always go in the header but above AdditionHeader delegate control. JS files should go where it is most logical they go. If they change the look and feel, put them at the bottom of your masterpage. If they are only there to assist a custom usercontrol, then load them through the control and not waste resources by loading it on every single page.

This might not be all the ways to optimize your site, but it will help a lot on the long run.