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

I solve Remove render-blocking JavaScript issue on Magento-1.9.x as follows:

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

or

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

hints: it may locate on base theme

app\design\frontend\base\default\layout\page.xml about line:38,

If you use active theme different path ex for rwd as app\design\frontend\base\default\layout\page.xml

The technique as described by "Mohan Gs" will not work here.

Because of the js path /media/js/ it seems he uses js merging. That means, that all js files added by xml standard way

• <action method="addJs">...
• <action method="addItem"><type>js</type>..

will be merged in a big one to /media/js/<hash>.js.

Magento core js files are added

• <action method="addJs"><script>prototype/prototype.js</script></action>

this way, too.

There are also many templates using inline js, wich depends on objects/functions that are defined by the head js files.

At this point, is it not enough to move only the head js files to the bottom. You have to move all inline js declarations after the head js and before </body> too.

In all/many cases it is impossible to separate inline js from the templates because they are using template specific variables.

You can only use a general method like parsing the final html and move this things together and in correct order.

So have a look at the extension Pagespeed.

This code says wait for the entire document to load, then load the external file defer.js.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

These are the steps that you need to follow.

1. Copy above code.

2. Paste code in your HTML just before the </body> tag (near the bottom of your HTML file).

3. Change the defer.js to the name of your external JS file.

4. Ensure the path to your file is correct. Example: if you just put defer.js, then the file defer.js must be in the same folder as your HTML file.

For more details, Refer This Article