title: fetch css file after page loads
body: <p>I've following css files for a hobby project:    </p>
  
  <ul>
  <li><code>normalize.css</code></li>
  <li><code>main.css</code></li>
  <li><code>viewports.css</code></li>
  <li><code>bigFile.css</code></li>
  </ul>
  
  <p>Now <code>normalize.css</code> , <code>main.css</code> &amp; <code>viewports.css</code> are the 3 files that are loaded on every page visit throughout the website. However <code>bigFile.css</code> contains a lots of css styles that are used in internal pages of the website. For now I'm loading these files inside homepage <code>index.html</code> like this :</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/normalize.min.css"&gt;
  &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'&gt;
  </code></pre>
  
  <p>I've merged <code>viewports.css</code> inside <code>main.css</code> and current file size is good. I cannot merge <code>bigFile.css</code> since then the size of <code>main.css</code> will be large and browser will wait to render it. Also note I'll be using github pages which sets expire headers to almost like 10 minutes , thus making caching state bad for me. And assume user is most likely navigate to next page.</p>
  
  <p>Is there any way I could load <code>bigfile.css</code> after the page has loaded successfully so that it saves some time for next page loads. I don't mind using js solution till it has a gracefull fallback on non-js sites (like not loading them till user actually navigates to next page). Also I'm not a big fan of jquery for such a small task. Thanks!</p>