: Google says my website has render blocking css while it doesn't Google says the mobile version of my website has render blocking css while my website has only one css file that is placed before

@Alves908

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.

Vote Up Vote Down