13

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
13

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

  • Where do you add that? in which magento xml file? – styzzz Jul 15 '15 at 22:14
  • @styzzz ,yes and also header /footer file .its better to find google suggested blocked js – matinict Jul 21 '15 at 6:09
  • @styzz it 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 – matinict Mar 8 '16 at 5:19
  • 1
    I followed you. It solve the issue in Google page insight but it is giving many errors in Console in Google chrome – Shoeb Mirza Jul 11 '16 at 17:15
  • @MDSHOEBMIRZA then it did not solve the issue – Stevie G Aug 25 '16 at 11:18
4

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

4

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.

  • Im sorry - I still cant figure out what to do. Which file should I be editing? Are you saying we should edit the XML files and move the line that calls the JS to a different section? I can edit the XML file, but I am unsure which one, and where to move the line that called the JS script. Please let me know. – styzzz May 22 '15 at 19:55
  • My answer should explain, that you can not move the javascript xml calls to a different section. This will lead to errors. You can try the mentioned extension. – Steven Fritzsche Jun 8 '15 at 16:56
  • Hi Steven, I tried your module. Nothing changed. No javascript or css were moved. Also the admin end Pagespeed configuration is showing 404 – Sandeep Jun 24 '15 at 6:33
  • @Sandeep: This is not the place for your comment. Please create a detailed report/issue at github. – Steven Fritzsche Jun 25 '15 at 7:13
1

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".

  • Went over to GitHub and found that the script was last updated on 23 Sep 2015. Furthermore there is no mention about Magento 2. Would it work for magento 2 or not? If not have you any other recomendations/suggestions? – marikamitsos May 16 '17 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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