1

Google says the mobile version of my website has render blocking css while my website has only one css file that is placed before the closing body tag.

I even test putting the css after closing html tag but I'm reveiving the same warning what can be wrong?

have a look at this page:

http://www.namebabies.net/en-us/search/ash enter image description here

2

Potentially, any external stylesheet is render blocking. For the browser to render the page correctly, all the HTML and all the relevant stylesheet(s) need to be loaded. (A stylesheet is not "relevant" if you are using media queries and the condition fails.)

The browser does not render the page when only the HTML and embedded/inlined styles are loaded. It waits for all relevant external stylesheets to load as well, since these could affect the page. You don't see the page before the styles have been applied (unless there's a problem with your connection).

<link type="text/css" href="/my-stylesheet.css" rel="stylesheet" />

The above link element (similar to what you have on your page) is always render blocking since there are no media queries to suggest otherwise. This is regardless of where you are loading it (head or body).

Strictly speaking this should go in the head section. There is no advantage in having this at the end of the body in this instance. In its current format (rel="stylesheet") it's actually invalid to have it in the HTML body. Reference: HTML 5.1 Nightly - Section 4.2.4 The link element

To make the external stylesheet non-render blocking you either need to:

  • Inline the whole thing! ie. Embed the external CSS file in the HTML head section. However, if the CSS is large this can cause other problems. And it's not cached (if you have many pages sharing the same CSS file then this is important).

Or,

  • Inline only the necessary styles for the content that is "above the fold". (I see you have some embedded style blocks already, so it would seem you are already doing this to some extent at least.) Then defer loading of the external stylesheet (the remainder of) using JavaScript - this is what makes it non-render blocking. The external stylesheet is only loaded after the page has loaded in its entirety.

Using JavaScript to defer loading of the stylesheet involves creating an event listener on page load that creates the relevant link element referencing the external stylesheet. Only at this stage is the external stylesheet loaded.

|improve this answer|||||
  • I have inline css for my above fold content and this css is for other content. I had thought of loading it with javascript but didn't think its a wise think to do. I'm going to give it a try ;) thanks a lot – Ashkan Mobayen Khiabani Jul 5 '15 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.