How to Eliminate Render Blocking JavaScript and CSS in above the fold content

root's picture

I guess you are here because of google and his "website speed test": https://developers.google.com/speed/pagespeed/insights/
No worries, I will help you. There are various options over the net about how to achieve this.

The easiest way is the html5 way.

Let's say your javascripts code is:
<script type="text/javascript" src="/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="/common/js/jquery.lazyload.js"></script>
    <script type="text/javascript" src="/common/js/tooltip.js"></script>
You will have to modify it as follows:
<script type="text/javascript" [color=green]async[/color] src="/common/js/jquery.min.js"></script>
    <script type="text/javascript" [color=green]async[/color] src="/common/js/jquery.lazyload.js"></script>
    <script type="text/javascript" [color=green]async[/color] src="/common/js/tooltip.js"></script>
FYI, there is also the classic method which you can use:
<script>
  var resource = document.createElement('script'); 
  resource.src = "[color=green]/common/js/jquery.lazyload.js[/color]";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>
Or a fancy defer:

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

No matter the method, be careful, some of your website content (like menus, for example) do not like asynchronous load so you will have to leave them as is or load them directly in the code:

<script language="javascript">
        // common/js/jquery.min.js
        the famous code....
        </script>

Thou shalt not steal!

If you want to use this information on your own website, please remember: by doing copy/paste entirely it is always stealing and you should be ashamed of yourself! Have at least the decency to create your own text and comments and run the commands on your own servers and provide your output, not what I did!

Or at least link back to this website.

Recent content