CSS stylesheets at top or bottom? or How to solve blank page issue?

css rendering progressive
forestclown picture forestclown · Nov 7, 2011 · Viewed 24.7k times · Source

I have been putting stylesheets on top (between <head></head>) of html. As far as I understand this is the best practice. (e.g. http://stevesouders.com/hpws/css-bottom.php)

Anyhow, recently I have experienced different results. Instead the codes below will return blank page when test.css is slow, which means I am not experiencing progressive rendering.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

Then when putting test.css at bottom, I get progressive rendering. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

As far as I have understood and tought so far, it should be the other way round.. Probably there are other factors that I have overlooked?

Answer

Jongosi picture Jongosi · Feb 13, 2014

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" />

Related questions

Exporting PDF with jspdf not rendering CSS

I am using jspdf.debug.js to export different data from a website but there are a few problems, I can't get it to render the CSS in the exported PDF and if I have an image in the page …

Read More
How to render thin fonts more smoothly in CSS 3 on Windows?

When I've designed my web site in Adobe Flash Pro CS6, the font looks like this: The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like …

Read More
CSS: @font-face anti aliasing

I'm a bit struggling with the @font-face CSS option. After a lot of reading, trying, retrying I finally came across a website that makes you a ready-to-go package when you upload your font. It's running now but it seems the …

Read More