How is this CSS render blocking?

Question

I'm trying my best to follow the Google PageSpeed guidelines on how to design my website for optimal performance.

After analyzing the website, Google gives me a score or rank based on those guidelines.

One guideline that is keeping my score low is the following one:

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.

http://www.my-website.com/bundles/styles/125/core

I have done a lot to solve this issue.

This includes embedding parts of the CSS to the HTML itself (only those parts needed for the first rendering), and trying to load the CSS via an inline script.

I have added this piece of code at the end of my HTML body:

(function (document) {
    if(!document) return;
    var stylesheet = document.createElement('link');
    stylesheet.href = 'http://www.my-website.com/bundles/styles/125/core';
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(stylesheet);
})(document);

However, Googe PageSpeed still complains about it being render blocking.

Why is this and how can I solve this issue?

Answer 1

The key part is "above-the-fold content."

Ensure that the CSS you load in the head is only for elements which are within the above-the-fold section of your web page.

For example this shouldn't include any CSS which is for your footer, this can be loaded post-render with javascript.

---

However you shouldn't aim to load all CSS at the end of the document. If CSS is loaded post-render which affects HTML elements already styled then they will have to be re-painted onto the page, which will decrease performance.