Defer parsing of JavaScript in Magento

Question

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?

score 5 · Accepted Answer · answered Oct 07 '14 at 11:35

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.

score 3 · Answer 2 · edited Aug 30 '23 at 13:38

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);
}

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. — Dencker, Jul 17 '18 at 09:45

score 3 · Answer 3 · answered Dec 31 '14 at 08:00

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>

answered Dec 31 '14 at 08:00

Randhir Yadav

2,546
1
20
31

do you know any extension for this because in cant add manually in all files. – BornCoder Jul 24 '17 at 11:49
https://bsscommerce.com/magento-defer-js-extension.html it can defer javascript automatically . you don't need to add manually – Jameslj Oct 27 '17 at 03:10

Martin Marsian · Answer 4 · 2014-10-17T10:33:45.050

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?

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. — Kristof at Fooman, Oct 17 '14 at 10:50

Defer parsing of JavaScript in Magento

4 Answers4

Linked