Prevent Render Blocking CSS

Question

I have a web page that references Bootstrap 4 from a CDN. In the head of my HTML page, I have the following:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

That is the only CSS that I'm referencing. Yet, when I run Google's PageSpeed tool, I get the following error:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following:

https://maxcdn.bootstrapcdn.com/…trap/4.0.0-alpha.2/css/bootstrap.min.css

I feel like this is a chicken-and-egg issue. If I move this stylesheet reference to the bottom of my body element, the page jumps from unstyled to styled when I visit the page. As a human, its quite jarring. Yet, when I do that, my PageSpeed score increases significantly.

Are there any alternative approaches? I always thought using a CDN was a good thing because it enabled you to take advantage of some caching features. But, this penalty seems to be quite significant.

Gasconade

Answer 1

No worries, this is not that of a big issue and you should definitely keep your CSS in the head. Moving it to the bottom will cause much greater problems (unstyled content, referenced resources in the css like images are loaded even later, etc.)

What PageSpeed tries to tell you, is a (imho very progressive) approach of serving all CSS needed to display "above-the-fold"-content (everything you see before you start scrolling down the site) and delivering the rest async/later to ensure, that the first correct view on the website is asap. As this CSS-file is "only" 22kB, i don't think, that taking actions into separating it into 2 different files is worth the effort, especially as this causes an additional http-request or requires you to inline the css (which might get complex and error-prone)

Yaws

Answer 2

If you have a nodejs environment you can use critical to create the critical CSS.

Then you can create in your script the following:

var styleSheetLink = document.createElement('link')
styleSheetLink.rel = 'stylesheet'
styleSheetLink.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'
styleSheetLink.type = 'text/css'
var godefer = document.getElementsByTagName('link')[0]
godefer.parentNode.insertBefore(styleSheetLink, godefer)

at the bottom which will defer loading of the rest of the CSS .

Chickenlivered