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

Asked 7/11, 2011 at 7:6 Answered 17/10, 2019 at 9:17

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?

Construction answered 7/11, 2011 at 7:6 Comment(6)

What size is your CSS? (Wow, that feels awkward) – Puppetry 7/11, 2011 at 7:9

@Puppetry filesize of CSS is of no importance. CSS should always be defined in <head>. – Phionna 7/11, 2011 at 7:11

AFAIK, the files that "should" be at the end of your document are scripts, not styles. – Bumf 7/11, 2011 at 7:22

My issue is with "blank white page" when css is downloading slowly. I first noticed this when I am encountering network issues. But regardless my understanding is that when css is downloading I should at least see some HTML contents first hence progressing rendering...but instead is css takes 10 seconds to download, I am seeing blank white page for 10 seconds. My understanding in order to achieve progressive rendering, putting css within <head></head> will do the trick. But it seems like this is not the case... – Construction 7/11, 2011 at 7:25

Also, now I am simulating the issues by doing a sleep(10) in css (css generated via PHP)... – Construction 7/11, 2011 at 7:25

@Construction You might want to Google for "FOUC" (flash of unstyled content). – Deduct 7/11, 2011 at 7:31

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

Metzger answered 13/2, 2014 at 9:22 Comment(5)

@Coomie, but do your visitors? – Worldling 16/8, 2017 at 13:16

They do indeed recommend please provide link – Db 10/10, 2018 at 14:50

That's invalid html validator.w3.org/#validate_by_input - I'm not sure if that was a typo, but it should be safe to append the styles before the end of the body – Evasion 6/11, 2018 at 3:36

Hmm that's interesting. I was reading elsewhere that rendering styles always blocked rendering – Eternalize 14/5, 2019 at 7:27

There is such conflicting information on this. As "best practice" it should be in the head, however Google Page Speed insights will complain about any render blocking files. – Mcculley 17/10, 2019 at 9:15

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.

Duelist answered 7/11, 2011 at 7:10 Comment(1)

I have edited my question, my intention is how to solve the blank page issue..thanks for the info as well! – Construction 7/11, 2011 at 7:31

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.

Estrone answered 6/10, 2014 at 22:32 Comment(0)

Conflicting information can be found all over the internet.

I would strongly suggest that as of today you place only critical CSS as blocking CSS and then the rest as non render blocking using the following method:

    <link rel="stylesheet" href="/path/to/css.css" media="none"  onload="if(media!='all')media='all'">

This will use the media parameter as none which means it will not load at all, and then once the page as loaded onload swap to all thus forcing it to load.

Also read more up about the media attribute here: https://www.w3schools.com/tags/att_link_media.asp

Mcculley answered 17/10, 2019 at 9:17 Comment(1)

If it doesn't load at all, I would have expected the onload event to not fire? – Virtual 22/10, 2020 at 18:32

Recommended topics

Hot tags