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












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









share|improve this question





























    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









    share|improve this question



























      13












      13








      13


      12






      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









      share|improve this 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






      magento-1.9 javascript rwd-theme rwd htaccess






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 11 '15 at 6:59









      Rajeev K Tomy

      14.5k54587




      14.5k54587










      asked Mar 3 '15 at 1:43









      styzzzstyzzz

      3382519




      3382519






















          5 Answers
          5






          active

          oldest

          votes


















          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



          appdesignfrontendbasedefaultlayoutpage.xml about line:38,



          If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml






          share|improve this answer


























          • 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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.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






          share|improve this answer

































            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.






            share|improve this answer
























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






            share|improve this answer
























            • 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



















            0














            I am also looking for the same answers as i was trying to test my website on google page speed. it showing the same message but unable to get help. Please suggest me what to do as i am using magento 1.9 and url is flowerportal and https://flowerportal.in/flower-delivery






            share|improve this answer























              Your Answer








              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "479"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: false,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: null,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f59318%2fpagespeed-eliminate-render-blocking-javascript-and-css-in-above-the-fold-conte%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              5 Answers
              5






              active

              oldest

              votes








              5 Answers
              5






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              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



              appdesignfrontendbasedefaultlayoutpage.xml about line:38,



              If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml






              share|improve this answer


























              • 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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.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
















              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



              appdesignfrontendbasedefaultlayoutpage.xml about line:38,



              If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml






              share|improve this answer


























              • 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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.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














              13












              13








              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



              appdesignfrontendbasedefaultlayoutpage.xml about line:38,



              If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml






              share|improve this answer















              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



              appdesignfrontendbasedefaultlayoutpage.xml about line:38,



              If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Mar 8 '16 at 10:14

























              answered Jul 14 '15 at 6:13









              matinictmatinict

              75011029




              75011029













              • 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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.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



















              • 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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.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

















              Where do you add that? in which magento xml file?

              – styzzz
              Jul 15 '15 at 22:14





              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





              @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 appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml

              – matinict
              Mar 8 '16 at 5:19







              @styzz it locate on base theme appdesignfrontendbasedefaultlayoutpage.xml about line:38,. If you use active theme different path ex for rwd as appdesignfrontendbasedefaultlayoutpage.xml

              – matinict
              Mar 8 '16 at 5:19






              1




              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





              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





              @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






              share|improve this answer






























                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






                share|improve this answer




























                  4












                  4








                  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






                  share|improve this answer















                  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







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Mar 11 '15 at 6:55









                  Rajeev K Tomy

                  14.5k54587




                  14.5k54587










                  answered Mar 11 '15 at 6:49









                  Mohan GsMohan Gs

                  1062




                  1062























                      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.






                      share|improve this answer
























                      • 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
















                      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.






                      share|improve this answer
























                      • 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














                      4












                      4








                      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.






                      share|improve this answer













                      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.







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Mar 17 '15 at 11:43









                      Steven FritzscheSteven Fritzsche

                      514




                      514













                      • 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



















                      • 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

















                      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







                      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





                      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





                      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





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






                      share|improve this answer
























                      • 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
















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






                      share|improve this answer
























                      • 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














                      1












                      1








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






                      share|improve this answer













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







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Apr 7 '16 at 2:10









                      FireBearFireBear

                      1,94911025




                      1,94911025













                      • 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



















                      • 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

















                      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





                      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











                      0














                      I am also looking for the same answers as i was trying to test my website on google page speed. it showing the same message but unable to get help. Please suggest me what to do as i am using magento 1.9 and url is flowerportal and https://flowerportal.in/flower-delivery






                      share|improve this answer




























                        0














                        I am also looking for the same answers as i was trying to test my website on google page speed. it showing the same message but unable to get help. Please suggest me what to do as i am using magento 1.9 and url is flowerportal and https://flowerportal.in/flower-delivery






                        share|improve this answer


























                          0












                          0








                          0







                          I am also looking for the same answers as i was trying to test my website on google page speed. it showing the same message but unable to get help. Please suggest me what to do as i am using magento 1.9 and url is flowerportal and https://flowerportal.in/flower-delivery






                          share|improve this answer













                          I am also looking for the same answers as i was trying to test my website on google page speed. it showing the same message but unable to get help. Please suggest me what to do as i am using magento 1.9 and url is flowerportal and https://flowerportal.in/flower-delivery







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered 8 hours ago









                          piyush arorapiyush arora

                          11




                          11






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Magento Stack Exchange!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f59318%2fpagespeed-eliminate-render-blocking-javascript-and-css-in-above-the-fold-conte%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Magento 2 controller redirect on button click in phtml file

                              Polycentropodidae