cancel
Showing results for 
Search instead for 
Did you mean: 

How to defer javascript in magento?

Occasional Contributor

How to defer javascript in magento?

My website is very slow.. after analyzing with gtmetrix. I got know this because of javascript..

how to defer javascript in magento? and plz tell me about increasing speed of magento website?

9 REPLIES
Moderator

Re: How to defer javascript in magento?

There are a lot of ways to increase Magento speed. I would suggest googling for guides. There are several really good ones.

 

To increase speed, there are two main parts. Server and Code. They should be looked at separately.

 

I personally don't recommend deferring javascript (more trouble then it is worth). However I suggest giving this a try: http://magento.stackexchange.com/questions/38485/defer-parsing-of-javascript-which-files-to-edit

-Kris
4x Certified, Blogger @ xgento.com
M1 Certified

Re: How to defer javascript in magento?

To defer JavaScript, I suggest  you should use a Magento extension: Defer JavaScript

This extension will defer your JavaScript loading till the last moment after all HTML and CSS loading. Therefore, your site can load faster and perform better. 

And of course, to see changes of site speed after installing Defer JavaScript, you can use GTMetrix to check and I'm sure that you will find much surprise about site performance 

Frequent Contributor

Re: How to defer javascript in magento?

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.

Contributor

Re: How to defer javascript in magento?

Deferring of javascript is one of those issues on the web that can make you want to pull your hair out trying to find a solution.

Many people say "just use defer" or "just use async" or others say "just put your javascript at bottom of page" but none of those solve the problem of actually allowing a webpage to fully load and then (and only then) loading external JS. Nor will they get you past that "Defer loading of javascript" warning you are getting from the Google page speed tool. For more detail:- https://varvy.com/pagespeed/defer-loading-javascript.html

New Contributor

Re: How to defer javascript in magento?

Hello,

First time i used GTMetrix in 2014 since then i am using it for optimizing in increasing Magento websites speed.

 

Recently i worked on CCTV Kits I used following method to defer js.

Note:  

Go to app/code/core/Mage/Page/Block/Html/Head.php

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

Go to line 204 and add an defer in line 205 replace
// static and skin javascripts with below code
    $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
        );

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

Highlighted
Occasional Contributor

Re: How to defer javascript in magento?

Never ever update any core files please. IF you update any core files you might get into trouble at the time of upgrade. I would rather suggest to copy the file into your local folder and make the changes. Though the sugesstion you've suggested won't solve any of his problem as there will be conflicts with jQuery.

M1 Certified

Re: How to defer javascript in magento?

Those who use Magento 2 can try my extension https://www.goivvy.com/magento-plugins/magento2-defer-javascript.html

Works with Magento 2.0.x and Magento 2.1.x

Frequent Visitor

Re: How to defer javascript in magento?

Sorry the extension working only on the home page !

if you select a product you will notice that image is not loading due the the jquery defer.

For example : http://magento2.goivvy.com/fusion-backpack.html

 

Conclusion : don't buy the extension

M1 Certified

Re: How to defer javascript in magento?

That is the wrong conclusion.

I have to say the image is not working for different reasons. You can always check category, cms, cart and checkout pages and make sure it is perfectly working there.