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?

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.

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

Here is the already made paid extension (for Magento 1 and Magento 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. – Dencker Jul 17 '18 at 9:45
  • @Dencker anything to back it up? – Konstantin Gerasimov Jul 18 '18 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?

  • 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

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