1

When you seek speed score in Google Page Insight, you may be seen a warning like "Eliminate render-blocking JavaScript and CSS in above-the-fold content ", i have been looking for a solution to fix this issue.

I know, there are already few geeks replied, to move CSS and Js file to the bottom of webpage, then it will load only after webpage content loaded. But unfortunately, it isn't the correct answer. This issue is all about how we allowing the above field content to render. So anybody have a solution (except "move CSS and Js to footer of webpage) ?

  • Can you tell us a little more about the structure of your website (e.g., how are these files are called and served, if you're using WordPress, etc...), so answers can be more specific? – dan Jan 29 '15 at 8:12
2

At last i found a solution my self,

By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

To fix this issue, what you need to do is identify the style sheet rule that applies to the above fold content, just remove them from the external css file, minify them and deliver it as inline CSS. And then move your external css link to bottom of the page. Like below,

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

After making the style rule delivery of above fold as like this, i could achieve speed score 100/100 for one of my landing page. You can have a look on speed insight score.

NOTE: Never use inline css delivery if style rule is to heavy

  • Responsive grids and most stylesheets are full of "heavy" rules in the sense that there are a ton of them repeated. Unless you can help it, never use inline CSS or style attrib at all, for anything, ever. Better off building or using common constructor class library and loading it up async. Then you also eliminate static styles all over the place. – dhaupin Jan 29 '15 at 18:14
0

You can change all your script calls to load "async" and dont use doc/window ready in functions if you can help it. Then make a script to load CSS files asynchronously as well using something like https://github.com/filamentgroup/loadCSS

As far as 3rd party scripts/source/cache/etc though, you are out of luck. Its ironic how google scripts reduce your google pagespeed score considering they are the proponents of all these rules.

-2

You can fix just Go to the Google page speed tester and find out what are the things which increases your page time loading , after analysis of your whole website , it shows overall result, your site problems and how to fix that problem. you just click on (how to fix), after clicking on that , Google give you solution how to fix.

protected by dan Dec 13 '18 at 8:12

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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