title: "Eliminate render-blocking CSS in above-the-fold content"
body: <p>I've been using Google PageSpeed insights to try and improve my site's performance, and so far it's proven extremely successful. Things like deferring scripts worked beautifully, since I already had an in-house version of jQuery's <code>.ready()</code> to defer scripts until the page had loaded fully, all I had to do was inline that particular function and move the full scripts to the end of the page. That worked great.</p>
  
  <p>But now I find myself glaring at the one remaining yellow dot on the checklist: "Eliminate render-blocking CSS in above-the-fold content".</p>
  
  <p>The way my CSS is set up is to have one global <code>_.css</code> file containing styles that apply to the page structure in general, or are used in more than one or two places across the site. Most pages then have an associated CSS file (for instance, <code>party.php</code> has <code>party.css</code>) containing styles specific to that particular page. All CSS files are cached indefinitely, as I append <code>/t=FILEMTIME</code> to filenames (and later remove them with .htaccess) in order to guarantee that files are updated when they are changed.</p>
  
  <p>So anyway, Google recommends inlining critical styles needed for above-the-fold content. Trouble is... well, take a look at this screenshot: <a href="http://prntscr.com/1qt49e" rel="noreferrer">http://prntscr.com/1qt49e</a></p>
  
  <p>As you can see... <em>ALL</em> of the content is above-the-fold! People hate scrolling, especially on a game that involves loading many pages. So I designed the site to fit on one screen (assuming a good enough resolution). So that means... <em>ALL</em> of the styles apply to above-the-fold content! So... is there any solution? Or am I stuck with that yellow mark on an otherwise near-perfect score?</p>