0
Welcome Guest! Login
0 items Join Now

Is Gantry 5/Baseline/Page Settings correct place for adding defer javascrip

Last Post
Search Topic
    • Melanie's Avatar
    • Melanie
    • Hero Rocketeer
    • Posts: 273
    • Thanks: 3

    Is Gantry 5/Baseline/Page Settings correct place for adding defer javascrip

    Posted 9 years 4 weeks ago
    • Hi,

      I have a report from Google pagespeed that says I have 30+ render blocking java scripts which are causing my pages to load very slowly. I have searched the forums and found a very good link to how to defer javascript here varvy.com/

      However, I am not sure where or how to add it in Gantry 5. I have gone through the list that Google pagespeed returned and currently adding them to the Baseline template area under page settings in the /body bit. Is this correct? I also followed instructions on here to turn on Global configurations cache and enable the system cach plugin setting it user browser cache, however that stopped my homepage loading all the components.

      Am I adding the defer script to the correct place? Would RokBooster do this same thing? Also, is it ok just to paste my code as follows:

      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_roksprocket/assets/js/mootools-mobile.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/plugins/system/jqueryeasy/jquerynoconflict.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>

      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/system/js/mootools-core.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/system/js/core.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/system/js/mootools-more.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/modules/mod_responsive_scroller_for_easyblog/assets/js/rsceb.min.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/jui/js/bootstrap.min.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_jfbconnect/includes/jfbconnect.js?v=6";
      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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_community/assets/release_32/js/bundle.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_community/assets/vendors/toolkit.min.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_xipt/assets/js/acl.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/techjoomla_strapper/js/namespace.min.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/media/foundry/5.0/scripts/bootloader.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/components/com_roksprocket/assets/js/mootools-mobile.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>
      <script type="text/javascript">
      function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = " ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.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>

      Kind regards

      Mel
    #1281731
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Is Gantry 5/Baseline/Page Settings correct place for adding defer javascrip

    Posted 9 years 4 weeks ago
    • 1. You can't defer all javascript sometimes it has to be loaded earlier for the page to work.
      2. If it's you own javascript then you can specifiy that it be loaded at the bottom of the page in page settings (atom or assets). But again that assumes you don't need it to load earlier to be functional.
      3. rokbooster will help as it compresses javscript and combines it also (so you don't get the sequential loads issue),

      All that said a lot of this is pretty "academic, technically correct but not really a "real-world" importance. What matter is the response time that your end-user experiences not what these academic tools tell you.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1281740

Time to create page: 0.052 seconds