CSS stylesheets at top or bottom? or How to solve blank page issue?
CSS should be defined in your <head>.
This way, as elements are loading in the DOM, they will render with the proper styles applied immediately.
It is worth remembering that when your browser first loads a CSS file, it usually caches it, although Internet Explorer does not cache CSS files loaded by other files using @import.
So next time around when a page is loaded, the cached version is used with no speed issues. So really, the only issue might occur when a user first loads the page.
I put all my CSS in the <head> where it belongs.
Google is fast busting the tradition of styles 'belonging' in the head. They do indeed recommend that critical styling belongs either in the <head> tag or even inline, but that other, non-essential styles should be referenced after the closing </html> tag. This does work on most, if not all modern browsers (I've not tested all).
The reason behind this is to load the bulk of the styles as a non-blocking reference, allowing the browser to begin writing to page before getting all the (potentially) bulky styles. Depending on what's in the 'critical' styles, this could cause an initial layout of hideous proportions before styling is rendered (FOUC). That is probably what you are experiencing with the "blank page" issue.
Remember also that CSS was released almost 20 years ago (1996), so it's not surprising that Google (and others) are manipulating and pushing out the traditional parameters of the concept.
A ridiculously simple example:
<!DOCTYPE html>
<html>
<head>
<title>It's a Brave New World</title>
<link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
<!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />