4

i analyzed my website on Gmetrix.com for for optimization and the result was this:

361.0KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

http://mysite.com/media/js/b5de567c1b6b9d971394b4d4887370a1.js (351.7KiB)
http://mysite.com/ (9.3KiB of inline JavaScript)

Defer parsing of JavaScript

In order to load a page, the browser must parse the contents of all tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

how to solve it?

Improve this question

4 Answers 4

Reset to default
5

Solution 1. Best solution: Less Javascript

or find out which JS loads the part 'above the fold' and

Solution 2. load that in header + de rest of the JS in footer

Solution 3. or use the attribute for the JS below the fold, which prevents parsing from blocking the initial page load by deferring it until the browser's UI thread is not busy doing something else.

Improve this answer
3

Add in <script type="text/javascript" defer="defer"> tag like that it works for me.

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
Improve this answer
2
  • do you know any extension for this because in cant add manually in all files. Commented Jul 24, 2017 at 11:49
  • bsscommerce.com/magento-defer-js-extension.html it can defer javascript automatically . you don't need to add manually Commented Oct 27, 2017 at 3:10
3

Main idea here is to move all javascript to the bottom.

Create observer on http_response_send_before:

<frontend>
<events>
<http_response_send_before>
   <observers>
      <goivvy_deferjs_http_response_send_before>
          <class>goivvy_deferjs/observer</class>
          <type>singleton</type>
          <method>httpResponseSendBefore</method>
      </goivvy_deferjs_http_response_send_before>
   </observers>
</http_response_send_before>
</events> 
</frontend>

In Observer.php move all javascript to the bottom:

public function httpResponseSendBefore($observer)
{  
  if(!Mage::helper('goivvy_deferjs')->isEnabled()) return;
  $response = $observer->getEvent()->getResponse();
  $html = $response->getBody();
  preg_match_all('#(<script.*?</script>)#is', $html, $matches);
  $js = '';
  foreach ($matches[0] as $value)
    $js .= $value;
  $html = preg_replace('#<script.*?</script>#is', '', $html);
  $html = preg_replace('#</body>#',$js.'</body>',$html);
  $response->setBody($html);
}
Improve this answer
2
  • Depending on your version of the PCRE library, that heedless use of preg_replace might cause serious memory leaks and consequently segfaults on larger pages. Commented Jul 17, 2018 at 9:45
  • @Dencker anything to back it up? Commented Jul 18, 2018 at 17:37
-1

I found a solution to defer Javascript:

copy /app/code/core/Mage/Page/Block/Html/Head.php

to

/app/code/local/Mage/Page/Block/Html/Head.php

Go to line 204 and add an defer in line 205

// static and skin javascripts

        $html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" defer src="%s"%s></script>' . "\n",
            empty($items['js']) ? array() : $items['js'],
            empty($items['skin_js']) ? array() : $items['skin_js'],
            $shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null
        );

Make admin work with this "defer" and add the following to this section:

        // If Mage is Admin
        if (Mage::app()->getStore()->isAdmin()) {
            $html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript"  src="%s"%s></script>' . "\n",
            empty($items['js']) ? array() : $items['js'],
            empty($items['skin_js']) ? array() : $items['skin_js'],
            $shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null
        );
        }

This seems to work. Well, for most of the site. I have a problem in admin though:

I can't browse categories in admin, as all the entries for categories in admin have gone away. Has someone a correction for this code?

Improve this answer
2
  • This will not work due to Magento's common use of inline javascript. The inline JS is mostly Prototype.js and will require the libraries to be loaded. There is some likelihood that when you test you already have these files cached. Always test with an empty cache to see if you have any JS errors when loading a page that contains inline JS. Commented Oct 17, 2014 at 10:50
  • github.com/pratikmage/magento-defer-javascript Commented Jun 11, 2016 at 11:12

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.