Css - in head or footer?

[Lorenzo Novia]

Hello everybody,

I'm wondering about what is the best choice to incorporate css in the html page.

Google speed test gives me the suggestion to take it off the head.

But, after reading manuals and articles, probably the best choice is to insert them in the head, so the browser, at the end of the page, doesn't need to re-render everything.

thanks in advanced for your opinions!

[Thomas Hey'l]

Salve, Lorenzo!

I'll answer later in the evening as I'm currently short of time. Thank you for repeating your question here as suggested by me.

Saluti, Thomas

[Thomas Hey'l]

Salve, Lorenzo!

Scusa il ritardo - mia figlia...

The rule about CSS blocking the rendering of the page cannot be solved by moving the inclusion of your CSS file(s) to the end of your documents. It is meant to save a server connection, request and answer so that the content initially visible above the fold can be rendered immediately.

As far as this concerns JavaScript and you don't use a popular framework like jQuery or JavaScript in general to display the page content, the rule is rather simple to fulfill (unless you use deprecated features like document.write instead of DOM methods).

It can become much harder when it comes to CSS, in example when it comes to the CSS required to render the basic layout of you pages, which becomes more important in times of responsive web design.

Personally, I managed to clear that rule with JavaScript (although I doubt many Webmasters will be able to follow me), but doing the same split for CSS is not convenient in my case. The basic idea is to include the CSS required to display the content above the fold inline and to inject the rest (or full set) after the load event using DHTML methods (which works in all current and even older browsers).

And in fact, this is not a real issue. Your pages may load fast as lightning without this rule fulfilled or slowly like snails fulfilling it. Remember the hints at Page Speed Insights are just hints and suggestions what you could do to improve your users' experience. PSI does not measure the real loading times over different connections and with different devices (we all know some of them are a pain - both), but only technical preconditions.

The background of this rule (specially when it comes to mobile devices) is that you have a "congestion window" of maximally 40kb for all it takes to load the content above the fold and that this content should be rendered in less than one second.

If you would provide the URL of the discussed site here (best using an URL shortener like goo.gl), we could look at probable issues ourselves. Let me know whether you need a translation to Italian, please.

Cordiali saluti, Tommaso

[Lorenzo Novia]

Hello Thomas,

insert inline the css for the above the fold content it could be, as google say also, a good idea...

but we have to see how all these processes are time consuming ... time, which is our enemy in fact of budget ...

as always we have to find compromise. So I think i'm not going to insert inline css, especially for maintaining purpose... to track a change in the style would be a mess!

thanks for sharing

[Thomas Hey'l]

Salve, Lorenzo!

So I think i'm not going to insert inline css, especially for maintaining purpose... to track a change in the style would be a mess!

You could use PHP to include your (partial) CSS from a unique ressource file the way I do it. So your's is probably not a heavy argument.

Another argument is more important in my opinion. You will have to use JavaScript to inject the complete CSS file into the DOM later. Although most users accept and interpret JavaScript, those who don't would be left without CSS.

Regards, Thomas