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

Option To Move JS From Document Head
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

Unless I’m missing something (often the case), I don’t see a way to easily move the javascript calls in a theme from the document head into the body, at least not within the theme XML.

This may be a good option for those wanting to move their JS from the head for performance reasons.  I personally like to keep javascript as low in the page as possible without breaking anything.

Maybe a global getAdditionalJs() function for blocks?  Would there be any downsides to doing something like this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
srinigenie
Guru
 
Avatar
Total Posts:  539
Joined:  2008-02-04
 

ummm ..yes very valid!! It would load (atleast for the end user seem to load) the pages faster. I checked the demo home page for the size of javascript downloaded for the home page. Found it to be 253 KB. The list of JS used were
builder.js
controls.js
cookies.js
dragdrop.js
effects.js
form.js
js.js
menu.js
prototype.js
scriptaculous.js
slider.js
sound.js
translate.js
validation.js

phew!! I am sure some of these are not used on the home page - like slider.js and am wondering if we can save some download time there.
In addition, can we not use the compressed versions of huge scripts like ‘prototype.js’. Currently this js file is 91KB. I read that this can be reduced to as less than 20 KB. Or use a very light JS framework like jQuery. Wonder if these were considered during design of magento!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

The default theme is pretty heavy, but I tend to think of it as more of an elaborate example for training than for actual production use, at least in it’s current state.

I’m more concerned with the location of the javascript than the amount of it, since the quantity is something I can easily contend with during theme creation (as well as using whichever library I’m most comfortable with).  The actual size of the javascript isn’t an issue for me at this point.

If I can move my javascript out of the head, and only pull it in on pages where needed (which is the function of the xml files, from what I can tell) without too much fuss, I’d be content.  Mostly to shorten that initial delay when a new page loads.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mark_Kimsal
Sr. Member
 
Total Posts:  186
Joined:  2007-09-12
Michigan, USA
 
Cliff - 10 March 2008 11:41 PM

The default theme is pretty heavy, but I tend to think of it as more of an elaborate example for training than for actual production use, at least in it’s current state.

I tend to agree with that.

Cliff - 10 March 2008 11:41 PM

I’m more concerned with the location of the javascript than the amount of it, since the quantity is something I can easily contend with during theme creation (as well as using whichever library I’m most comfortable with).  The actual size of the javascript isn’t an issue for me at this point.

I modified all the action tags in layout/*.xml to call “footer” instead of “header” and copied and pasted the setAdditionalCssJs() method from header block into footer block.  Then you simply have to modify the template to call getAdditionalCssJs() in the template/page/html/footer.phtml.

It doesn’t work tho…

There’s lots of embedded <script> tags in the various phtml files of the default theme.  I had created a simple delayed evaluation for these function calls, but it is pretty elaborate and requires hunting through every single file for random <script tags.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

Thanks, Mark.

I’d be fine with placing the scripts at the top of the document body.  If Magento could make it easy to do this OOTB, that would be grand.

I’m still digging into theming, so I’ll update if I find an easy solution.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

We have implemented dynamic script compression, so all scripts are served as one file with spaces removed, gzip/deflated, and with cache management headers.

For frontend all scripts are one socket / 55K, and for admin it’s about 80K together with ext-js.

Server overhead is about 1ms.

The pages are just flying smile

This will be available in next release.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

Awesome, thanks, Moshe!

Will there be any way, though, to move them out of the document <head> and into the <body>?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

I think you should first see how it works, maybe you won’t need it.

YSlow shows “A” for everything besides first 3 steps (1. can’t do it without loading images; 2. CDN is up to the store; 3. Expires header for images is an apache configuration)

You still need to load the javascript libs before processing the page currently, so I don’t see how it would differ to move it to the <body>

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

I think scripts in the head may slightly delay page load on slower connections because of the default setting on some browsers, or some ridiculousness like that.  But I’m definitely more stoked about dynamic compression.  I’m running Magento on a Litespeed server and it’s pretty fast anyway, so right on.

Is the latest available via SVN?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

Try removing <?=$this->getAdditionalJsCss()?> from page/html/head.phtml and adding this to main templates (page/*column*.phtml) or wherever you want it to be:

<?=$this->getLayout()->getBlock('head')->getAdditionalJsCss()?>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Sprout Collective
Member
 
Total Posts:  64
Joined:  2007-08-31
Portland, OR / Orange County, CA
 

Wow, it seems so obvious now.  You the man, I’ll give it a shot.

 
Magento Community Magento Community
Magento Community
Magento Community
 
loeffel
Guru
 
Avatar
Total Posts:  427
Joined:  2009-02-03
 

Has anybody done something like this in the current version? There is no AdditionalJsCss call anymore and referencing CssJsHtml doesn\’t work.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top