Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
Defer Javascript loading in magento
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

Hi to all magento developers out there,

You all know that magento pages are filled up with complex javascript code.

Some html optimization services like gtmetrix advise to implement defer js loading to overcome web page blocking while javascript is run by the browser.

We’ve developed the extension that attempts to defer javascript loading on default magento store install.

The Idea is split into two parts:

Grab all external javascript files and execute them after page loads.
Filter all html blocks and extract javascript code. Place that code into separate function and execute that function after step 1.

You can download the extension here GoIvvy_DeferJS-1.0.0.0.tgz

Be sure to read this blog post Magento Defer JS loading write up before installation.

Important: extension might not work as you are expecting it is just an attempt not a stable solution

BUT: defer js loading using this extension GoIvvy_DeferJS is implemented on a couple of websites:

GoIvvy.com - Page Speed 96%
TrueFoodsMarket - Page Speed - 92%

 
Magento Community Magento Community
Magento Community
Magento Community
 
dvXvb
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2012-11-15
 

Up and running without any problems, thank you very much!

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

@dvXvb

would you please leave the website url to showcase?

 
Magento Community Magento Community
Magento Community
Magento Community
 
dvXvb
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2012-11-15
 

red face

http://geowhat.com.au

cheese

 
Magento Community Magento Community
Magento Community
Magento Community
 
muri
Member
 
Total Posts:  41
Joined:  2009-04-15
Italy
 

It seems there is some issue on my website.
If I enable this extension, the home loads correctly an then suddently all graphical elements disappear.

What could it be?

Thank you

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

if you leave your website link i might be able to shed some light

 
Magento Community Magento Community
Magento Community
Magento Community
 
muri
Member
 
Total Posts:  41
Joined:  2009-04-15
Italy
 

Good idea rasberry
http://www.barbacanelibri.it

Thank you

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

you should enable defer js extension - otherwise i cannot say what is going on

we offer paid magento services http://goivvy.com/magento-services/magento-service.html

in fact we just help http://www.picnicbasket.net/ to implement Defer JS on their website

 
Magento Community Magento Community
Magento Community
Magento Community
 
Siggit
Jr. Member
 
Total Posts:  18
Joined:  2010-06-21
 

Very Nice Extension.works.

When you will use Dropdown Menu the Dropdown Menu dont work. Only Paid Support. Not a solution for CE.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 
Siggit - 26 July 2013 07:20 AM

Very Nice Extension. It works.

Thanks!

@Siggit

please leave your website url link for showcase

 
Magento Community Magento Community
Magento Community
Magento Community
 
Siggit
Jr. Member
 
Total Posts:  18
Joined:  2010-06-21
 

Hi!

Im sorry to say that, when i activated your Extension ther is no correctly Functin in my horizontal Dropdown Menu.
How can i solve this.

Attachment Source Code from <head> to </head>

Siggit

goivvy - 26 July 2013 09:17 AM

Siggit - 26 July 2013 07:20 AM
Very Nice Extension. It works.

Thanks!

@Siggit

please leave your website url link for showcase

File Attachments
head.pdf  (File Size: 186KB - Downloads: 4)
 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

re js/varien/menu.js

at the moment Defer JS extension doesn’t support document.observe("dom:loaded",

i simply switched it over to jquery style (if you have jquery included) js/varien/menu.js around line 126:

jQuery(document).ready(function (){
......
 
Magento Community Magento Community
Magento Community
Magento Community
 
Siggit
Jr. Member
 
Total Posts:  18
Joined:  2010-06-21
 

Hi!

When i insert this in line 126 of /js/varien/menu.js i get a Server error after activation.

Query(document).ready(function () {
    mainNav
("nav"{"show_delay":"100","hide_delay":"100"});
});

origin Code:

document.observe("dom:loaded", function() {
    
//run navigation without delays and with default id="#nav"
    //mainNav();

    //run navigation with delays
    
mainNav("nav"{"show_delay":"100","hide_delay":"100"});
});

Siggit

goivvy - 29 July 2013 02:07 AM

re js/varien/menu.js

at the moment Defer JS extension doesn’t support document.observe("dom:loaded",

i simply switched it over to jquery style (if you have jquery included) js/varien/menu.js around line 126:

jQuery(document).ready(function (){
......
 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

for jQuery ready function to work you should have Jquery lib loaded before menu.js

hope it makes sense

 
Magento Community Magento Community
Magento Community
Magento Community
 
Siggit
Jr. Member
 
Total Posts:  18
Joined:  2010-06-21
 

Hi!

i wrote this code in page.xml of my template” <action method="addJs"><script>jquery/jquery-1.10.2.min.js</script></action>”

<block type="page/html" name="root" output="toHtml" template="page/2columns-left.phtml">

            <
block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
                <
action method="addJs"><script>lib/ccard.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/builder.js</script></action>
                <
action method="addJs"><script>scriptaculous/effects.js</script></action>
                <
action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <
action method="addJs"><script>scriptaculous/controls.js</script></action>
                <
action method="addJs"><script>scriptaculous/slider.js</script></action>
                <
action method="addJs"><script>varien/js.js</script></action>
                <
action method="addJs"><script>varien/form.js</script></action>
                <
action method="addJs"><script>jquery/jquery-1.10.2.min.js</script></action>
            <
action method="addJs"><script>varien/menu.js</script></action>
                <
action method="addJs"><script>mage/translate.js</script></action>
                <
action method="addJs"><script>mage/cookies.js</script></action>
                
                <
block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

                <
action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <
action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <
action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

                <
action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <
action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
            </
block>

jquery is 1.7.1

Im loading the site an look at the scource code there is not loading jquery. before menu.js whats the error.

This is the result in source code:

<link rel="stylesheet" type="text/css" href="http://www.meine-domain.com/skin/frontend/default/my-skin/css/styles.css" media="all" />
<
link rel="stylesheet" type="text/css" href="http://www.meine-domain.com/skin/frontend/default/my-skin/css/widgets.css" media="all" />
<
link rel="stylesheet" type="text/css" href="http://www.meine-domain.com/skin/frontend/default/my-skin/css/print.css" media="print" />
<
script type="text/javascript" src="http://www.meine-domain.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.meine-domain.com/js/mage/cookies.js"></script>

when i load this

<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
in the head of 2columns-left.phtml of my Template then i have no Dropdown menu.
I suspect that the sequence of the scripts is very important. I hope you can help me.

Siggit

goivvy - 30 July 2013 12:16 PM

for jQuery ready function to work you should have Jquery lib loaded before menu.js

hope it makes sense

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

make sure [your magento root]/js/jquery/jquery-1.10.2.min.js file exists

also add

jQuery.noConflict();

to the end of jquery lib file - that would make it play nicely with prototype

we offer paid support it you woudn’t find a solution http://goivvy.com/magento-services/magento-service.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2