1

We wanted to follow the PageSpeed Insights CSS recommendations and separate critical and deferred CSS. To that end we read lots of posts and recommendations, such as Optimize CSS Delivery and Eliminate render blocking css.

Just to test what difference it makes we moved the bundle to the bottom of the page. The result was it made no difference whatsoever. We still got the exact same score and the same "Eliminate render-blocking JavaScript and CSS in above-the-fold content" problem for this bundle (why when it's loaded last??).

We also started separating the CSS physically, but quickly came to the conclusion that if we do it in a way that all pages show correct above-the fold content, about 70% of the CSS would need to go inline, leaving only about 30% deferred.

Having a large portion of the CSS inline doesn't seem to make much sense, so we wonder if we can ignore the PageSpeed Insights suggestion without too much ranking penalty. At present, how much SEO difference does fixing this issue really make and is it worth the effort for a site with several different page layouts (different categories each have their own layout)?

Improve this question
2
  • I'm assuming when you say you've separated the CSS you're using a CDN and not just loading from the same site
    – user5823815
    Aug 10, 2016 at 12:12
  • what I meant was separating the critical CSS from the rest that can be deferred
    – devlock
    Aug 10, 2016 at 14:52

1 Answer 1

Reset to default
1

What "bundle" did you move to the bottom of the page? You can only do that with javascript.

You start inserting above the fold CSS when it makes a measurable difference. Is inserting the CSS making the page display faster than round-tripping a CSS file? You might look into why 70% of your CSS is being applied to the top of your page.

Then again, a lot of recommendations by Google, and others, are for large sites with large pages and megabyte files; something to keep in mind. The documentation won't always state exceptions.

I believe that the PageSpeed statement is a blanket one; you can have perfect CSS but, if your javascript slows things down, you'll get the same statement. CSS files will always block.

The best thing to follow is the network and timing tabs in your browser's developer tools.

Improve this answer
6
  • you can also move the css bundle(s) to the bottom of the page, it results in a FOUC though; recommendation is to leave critical css at the top and move the rest down, i.e. defer (so our understanding)
    – devlock
    Aug 10, 2016 at 14:51
  • re "You might look into why 70% of your CSS is being applied to the top of your page.": in a nutshell, because much of it is header, sidebar and interactive elements at top of main content; further down is mostly standard stuff w/o special styles
    – devlock
    Aug 10, 2016 at 15:07
  • @devlock You cannot use the style element outside of the head. That's invalid though there is a new scoped attribute that only works in Firefox. Or are you using JavaScript to load the CSS?
    – Rob
    Aug 10, 2016 at 15:41
  • we wanted to load the non-critical CSS last via script, but as said, not sure it's worth the effort
    – devlock
    Aug 11, 2016 at 6:47
  • in HTML5, 'stye' is a global attribute, i.e. can be used on any element (html-differences.whatwg.org); in HTML5, "When used with the itemprop attribute" the link element can be used in the body (w3.org/TR/2013/WD-html51-20130528/document-metadata.html); either way, just for seeing page speed difference we temporarily moved the link tag to the bottom to eventually load the non-critical CSS via script as described by Google
    – devlock
    Aug 11, 2016 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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