2

I'm trying to optimize the page load time of a website. Now I've implemented almost all suggestion Google PageSpeed Insights gave me. However it keeps suggesting using a non-blocking stylesheet so that the above-the-fold content can be rendered before loading the stylesheet (using inline CSS):

Eliminate render-blocking JavaScript and CSS in above-the-fold content.

Your page has X blocking CSS resources. This causes a delay in rendering your page.

Approximately Y% 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.

It refers to the following information on how it should be done. Basically:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Although I have never seen a link to a stylesheet tag outside off the HTML tag, I changed my website using this strategy.

However, the online version of Google PageSpeed insights still complains about the stylesheet. Even more strange, the similar browser plugin (PageSpeed Insights for Chrome) says the exact opposite thing:

When you remove inline style blocks and elements from the main text of the document and put it in the header, the display performance will be improved.

Now my questions are:

  • Which one is correct? (In perspective of SEO and ofcourse in the perspective of UX)
  • Is there another way which keeps them both pleased? (HTML5 and JavaScript solutions are accepted if they are cross-browser and do improve page load time)
Tim
  • 5,521
  • 8
  • 36
  • 69
  • I don't think "AJAX'ing in" your stylesheet will help, or even work, since it will mean those styles will be applied after the fact. And placing the link tag outside the html tag is definitely not right in my book. Stupid question, but if you don't need the the styles for the current page, why are you loading the stylesheet here in the first place? Also, the number one thing that affects page load time is number of requests, which implies that an easier solution would be to combine stylesheets if possible. – oliakaoil Jul 02 '14 at 16:55
  • @oliakaoil I completely agree. Even though my stylesheets are already combined and optimised in any other way, I still would like to get rid of the suggestion by Google (in order to improve the SEO). – Tim Jul 02 '14 at 16:58
  • Sorry, should have asked this up front, what is the exact text of the error message. Also, did you skim this? http://stackoverflow.com/questions/8197072/non-blocking-javascript-and-css-in-modern-browsers-is-it-still-needed – oliakaoil Jul 02 '14 at 17:00
  • @oliakaoil Interesting question, but the answer does not really say anything about the stylesheets. I've added the suggestion/error messages from both products. – Tim Jul 02 '14 at 17:12

2 Answers2

2

I would suggest you to prioritizing on getting the highest possible score of the online PageSpeed Insights if possible get it 100/100 like shown below. It will engage your page in the Google search ranking since the page speed score is one of the SEO factor as explained here.

No other solution to this unless finding out which part of your CSS is used for the above-the-fold initial view of your page. Once you know this you should inline this CSS in your HTML header and lazy load the rest of your CSS.

You could find then whatever solution to minimize the effect as long as the score as well as the validation of every important aspect e.g. html5 and css are maintained.

PageSpeed Score 100/100]

eQ19
  • 9,880
  • 3
  • 65
  • 77
0

Google wants you to load the "Above the fold" content as fast as you can, for that you can create a separate stylesheet giving it the basic structure coding like width and all that. You can also try to remove any heavy image in that area and if you cannot then try to reduce the size of those images.

Then you can create a second stylesheet to load after the first one loads and you can get that error removed about the css.

Sonics McClaine
  • 59
  • 1
  • 8