Above the fold CSS a necessary evil?

Question

I find Google Pagespeed Insight sometime ludicrous. It says, Optimize CSS delivery....says defer script, move to footer, inline styles etc etc etc....while all the while there are plenty of advice out there saying not to inline CSS. Eitherways, I tried their script

 </noscript>
 <script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
 </script>

I also tried putting the CSS Link at the foot of the Code. But Google still yells 'Above the fold content' !! And, deferring CSS is messing up the initial rendering and page looks like a beggar till the whole thing is loaded !

I know they say...'inline critical above the fold CSS' and defer all the rest. Still it is a frustrating effort to get the right method.

My query is, is it going to effect my SEO if I do let the CSS be in the head section ? And ignore 'Above the fold' issue ? Because that way even if it takes time to load, at least it loads like a decent page ! Anyway, my CSS is not huge.

Second issue is the js. I am not able to get CDN js like min.js to be cashed or deferred ...try whatever I may...

Summarising the basic question - What is the quick, simple and best thing to optimize CSS and JS for SEO ...and which will be cross platform/browser friendly and whether it really is such a big issue ?!!

My site is www.landshoppe.com for your reference

score 5 · Accepted Answer · answered Jul 31 '16 at 20:09

Ok you've a few things going on here.

For a start you need to take what tools like page speed insights tell you as suggestions. They are automatic tools that do some basic analysis and suggest potential improvements. That's not to say they are 100% accurate or will be right for your site.

Next up you need to similarly calm down on the SEO impact of this. Speed is important to users and so search engines do factor speed in as one of many factors. So yes improving it can improve SEO. But there are literally hundreds of other factors too so don't get too hung up on one to the detriment of how you want your sight to to work. For example if refactoring your code to take on board every single speed improvement suggested by web page insights improved your web loading time by 0.1seconds but meant publishing content now took a software developer 1 week of time to do it then I'd say you have the balance wrong. Speed often works as a negative impact rather than a positive one: No one goes to a fast site with no interesting content, but people will be put off by a slow website no matter how interesting the content is.

Then is how browsers handle content. This is a complicated topic with many subtleties and nuances, but take this as a quick, rough intro to that:

Basically CSS is render blocking when it's encountered. Convention is to put it in the <HEAD> tag so it's one of the first things loaded for this reason. Putting it to the footer if the page will cause a flash of unstyled content (FOUC) though some browsers may be clever enough to hold of rendering it until it's loaded anyway. So basically that doesn't help.

Moving it to from standard HTML links and to javascript loads instead just enforces this. So doesn't help either.

Javascript is similarly render blocking (unless it's marked as async) and worse - the browser waits to run that javascript to see what it does to the document before it continues as it may well change the page completely, so no point continuing until we know what it's going to do.

What tools like web page insights normally means by this is to inline your critical CSS directly in the <HEAD> tag by including the actual CSS in <STYLE> tags and then load the full CSS file asynchronously (i.e. in a non-render blocking fashion) via javascript. You appear to have only done the later part of this rather than both parts - hence why the browser is not able to draw the content as quickly as it could and, if it does, it shows initially as unstyled. Note there are some downsides to inlining CSS (see my blog post on this if that doesn't seem like too much of a shameless plug!).

Your website is reasonably fast loading (3.5seconds according to www.webpagetest.org). It could be improved and ideally you should be under two seconds - though faster the better if you can get it under even that (noting above caveat that it's not the be all and end all of everything).

Looking at your page load waterfall you're loading your HTML, then your images, then your render blocking JS, then the page paints for the first time, then the CSS is loaded, and finally the page is loaded completely. This is wrong. Load what's critical to your page first (i.e. your HTML, your CSS and maybe your fonts) and leave the nice to haves (i.e. your images and your javascript) until after assuming they are not super critical to the first view of a page.

I would suggest moving back to regular CSS file links - in your <HEAD> tag, before your jpg files (so they are prioritised), making your JS async (unless it's critical for your page) and seeing how that improves load times. Then consider inlining CSS (good performance benefits but some downsides as mentioned above and adds complexity).

To make your JS async simply change this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript"></script>

To this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript" async></script>

Also consider HTTP/2 which reduces impact of waterfall issue typical of HTTP/1.1 - but this is a fairly new technology that only latest versions of web servers support and also requires HTTPS which your site is not yet using so is quite an advanced topic at the moment.

Wow. That was some decent explanation, @Bazza ! Thanks. It did make sense to me ! I was thinking of moving the CSS back to the head. Internet explorer anyway is simply not rendering my CSS at all ! I definitely am gonna follow all you said above and update you. Thanks again ! — user3526204, Aug 01 '16 at 06:56
I have moved the CSS Links to the head. But I had to remove the — user3526204, Aug 01 '16 at 07:14
As stated in my answer, if you are using the deferred-styles script then you should load the critical CSS separately with direct inline CSS. The deferred load is for non-critical CSS. And the NoScript tag is a fallback for browsers that can't use javascript. Not sure why it is not working in IE to be honest. — Barry Pollard, Aug 01 '16 at 10:38
Hi Bazza, just to update you...I have got a loadCSS script which works wonderfully in deferring the CSS file and I have also inlined some style. Now I have a 95 score on google pagespeed. I got the script from here http://stackoverflow.com/questions/18761251/eliminate-render-blocking-css-in-above-the-fold-content?rq=1 — user3526204, Aug 01 '16 at 12:50

Above the fold CSS a necessary evil?

1 Answers1