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" />
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 (
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).
link element referencing the external stylesheet. Only at this stage is the external stylesheet loaded.