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

Question

I am running magento 1.9, and I am using the RWD slider that comes with Magento 1.9 on the home page.

Google's PageSpeed doesn't like this and says:

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

How can I do it for this java script file which calls the slider:

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

Here is open source extension to solve that https://github.com/mediarox/pagespeed

Current features

• Move all Javascript tags (head & inline) to the bottom. ({stripped_html}{js})
• including conditional js units ({multiple js tags})
• including external js tags including "inline" js tags
• Move all CSS tags (head & inline) to the bottom. ({stripped_html}{css})
• including conditional css units ({multiple css tags})
• including external css tags
• including inline css tags

Compatibility

From Magento 1.5.x to Magento 1.9.x .

Backend Configuration

All modules (Pagespeed_Js, Pagespeed_Css) are disabled by default.

Configuration path: System > Configuration > ADVANCED > Pagespeed

How it works ?

Simple parse the final html stream on the event "controller_front_send_response_before".